domingo, junio 16, 2024
No menu items!
InicioBlogsCómo agregar una imagen a sus formularios de WordPress (la forma más...

Cómo agregar una imagen a sus formularios de WordPress (la forma más fácil)

¬ŅQuieres agregar una imagen a un formulario de WordPress? Agregar gr√°ficos a un formulario puede ayudar a agregar su marca y hacer que el formulario se vea m√°s interesante.

En este tutorial, veremos el proceso de agregar una imagen a un formulario. Hacia el final, también explicaremos cómo usar imágenes en lugar de preguntas en su formulario.

Cómo agregar una imagen a un formulario

WPForms es el creador de formularios m√°s sencillo para WordPress. Le permite agregar im√°genes f√°cilmente en cualquier lugar de sus formularios.

Por ejemplo, podrías:

Hay algunas formas diferentes de agregar imágenes a formularios en WordPress. Veamos primero el método más fácil: agregar una imagen a un formulario usando HTML.

Cómo agregar una imagen a sus formularios de WordPress

Aquí hay instrucciones escritas si lo prefiere:

Veamos el proceso de agregar una imagen a un formulario con algo de HTML b√°sico. Esto es realmente f√°cil y r√°pido con el constructor de arrastrar y soltar de WPForms.

Estos son los pasos que seguiremos:

  1. Instale el complemento WPForms
  2. Sube tu imagen a WordPress
  3. Agregue su imagen a su formulario de WordPress
  4. Publica tu formulario

Si desea agregar im√°genes a preguntas de opci√≥n m√ļltiple, lo ayudaremos al final del art√≠culo.

Paso 1: Instale el complemento WPForms

Primero, debe instalar y activar el complemento WPForms. Aquí hay una guía paso a paso sobre cómo instalar un complemento de WordPress si necesita ayuda.

ūüĒ• Leer:  Error 521 de Cloudflare: 4 m√©todos para solucionarlo

Ahora tienes 2 opciones:

  • Si ya tiene un formulario al que desea agregar una imagen, puede continuar y pasar al siguiente paso.
  • Si a√ļn no tiene ning√ļn formulario en WPForms, ahora es el momento perfecto para crear uno. Puede crear un formulario de contacto simple en menos de 5 minutos.

Una vez que haya terminado de crear su formulario, vuelva a este tutorial.

Paso 2: sube tu imagen a WordPress

La forma m√°s f√°cil de agregar una imagen a WordPress es subirla a la Biblioteca de medios. De esa manera, ser√° muy f√°cil encontrarlo cuando necesite copiar el enlace.

Para comenzar, abra su panel de WordPress. Luego haga clic en Medios de comunicación en el lado izquierdo.

Ahora sigue adelante y haz clic en el Agregar nuevo botón.

Agregar nueva imagen de formulario en WordPress

Arrastre su archivo de imagen al cuadro o haga clic en Seleccione archivos si prefiere ubicar la imagen en su computadora.

Sube la imagen de tu formulario a WordPress

Una vez que se haya cargado su imagen, contin√ļe y haga clic en ella para ver los detalles. Haga clic en el bot√≥n etiquetado Copiar URL para copiar la URL de la imagen a su portapapeles.

Copiar la URL del archivo subido

Ahora tiene la URL de la imagen en su portapapeles lista para pegarla en su formulario.

Permanezca en el panel de WordPress para la siguiente parte.

Paso 3: agregue su imagen a su formulario de WordPress

A continuación, vamos a abrir el formulario al que queremos agregar la imagen.

En la barra de navegación de la izquierda en el panel, haga clic en WPForms. Luego haga clic en Editar bajo el formulario que creó en el Paso 1.

Edite su formulario de carga de im√°genes de WordPress

Cuando se abra el generador de formularios, arrastre un campo HTML desde el panel de la izquierda al panel de la derecha y suéltelo donde desee que aparezca la imagen:

ūüĒ• Leer:  Descargue los √ļltimos controladores USB Cubot X16 | Driver MediaTek | y m√°s

Agregar un campo de imagen a un formulario de WordPress

Ahora haga clic una vez en el campo para abrir la configuración en el lado izquierdo.

¬ŅNotaste el C√≥digo campo a la izquierda? Simplemente escriba el c√≥digo HTML para incrustar su imagen aqu√≠.

Puede copiar este ejemplo. Pero recuerde: despu√©s de src =, querr√° pegar la URL a la imagen que carg√≥ en el √ļltimo paso:

Formulario de imagen de WordPress HTML

Ahora haga clic Ahorrar en la parte superior de su formulario.

Guardar formulario de imagen en WordPress

¬°Terminamos! Todo lo que tenemos que hacer es publicar el formulario.

Paso 4: Publique su formulario

WPForms le permite agregar r√°pidamente sus formularios en cualquier lugar de su sitio web, incluidos:

En este ejemplo, lo haremos de la manera m√°s sencilla. Usemos el Empotrar para crear autom√°ticamente una p√°gina para el formulario.

Adelante, haz clic Empotrar ahora.

Incrustar formulario de imagen en WordPress

A continuación, hagamos clic Crear nueva página.

Crea una nueva p√°gina para el formulario de WordPress con una imagen

Y finalmente, escriba un nombre para su p√°gina y haga clic en Vamos.

Cree una nueva p√°gina de WordPress para el formulario de imagen

WPForms creará automáticamente una nueva página e incrustará su formulario dentro de ella. Verá la imagen en la vista previa aquí también.

Simplemente haga click Publicar para que el formulario esté activo en su sitio web.

Publica tu formulario con una imagen en WordPress

¬°Y eso es! Tu formulario est√° en vivo.

Así es como se ve nuestra imagen en nuestro formulario terminado.

Formulario de imagen publicada en WordPress

Puede editar el formulario y modificar el HTML si necesita cambiar el tama√Īo de la imagen. Tambi√©n puede agregar clases CSS para dise√Īar su imagen si lo desea.

Cómo agregar imágenes a campos de formulario

Antes de salir, veamos r√°pidamente otra caracter√≠stica interesante en WPForms. Puede agregar im√°genes como respuestas a preguntas de opci√≥n m√ļltiple para que sus visitantes puedan hacer clic en ellas para tomar una decisi√≥n.

El uso de imágenes en las preguntas es perfecto para formularios de pedido simples, así que veamos rápidamente cómo se hace.

ūüĒ• Leer:  10 mejores documentales de ingenier√≠a que todo ingeniero deber√≠a ver

En este formulario de pedido de camisetas, tenemos un campo de opci√≥n m√ļltiple con 3 opciones. Vamos a comprobar el Usar opciones de imagen casilla de verificaci√≥n debajo.

Utilice opciones de imagen en un formulario de WordPress

Ahora podemos agregar una imagen para cada opci√≥n en nuestro campo de opci√≥n m√ļltiple. Deber√° hacer clic en el Cargar imagen texto para subir cada imagen.

Agregue im√°genes para formar respuestas en WordPress

Y así es como se ve el formulario en el generador de formularios una vez hecho esto:

Opciones de imagen en el formulario de WordPress

¬°Excelente! Cuando haya terminado, haga clic en el azul Publicar y eche un vistazo a su formulario. Cuando haga clic en una imagen para seleccionarla, ver√° una marca verde en el centro:

Elección de imagen de WPForms en WordPress

El uso de opciones de im√°genes es una excelente manera de hacer que las encuestas y las encuestas sean m√°s interesantes, o mostrar a sus visitantes diferentes dise√Īos o colores en un formulario de pedido.

Siguiente paso: Estilo de sus formularios de WordPress

¬°Excelente! Ahora conoce la manera f√°cil de agregar una imagen a un formulario de WordPress. WPForms tambi√©n facilita que sus visitantes carguen sus propias im√°genes en WordPress, as√≠ que aseg√ļrese de verificarlo a continuaci√≥n.

¬ŅEst√° buscando m√°s formas de dise√Īar y dar estilo a sus formularios? Consulte este art√≠culo sobre hermosos dise√Īos de formularios de contacto que puede robar. El art√≠culo contiene muchos ejemplos de CSS que puede copiar y pegar en el Personalizador de WordPress para dise√Īar sus formularios.

¬ŅListo para construir tu formulario? Empiece hoy mismo con el plugin de creaci√≥n de formularios de WordPress m√°s sencillo. WPForms Pro incluye m√°s de 100 plantillas de formulario gratuitas y ofrece una garant√≠a de devoluci√≥n de dinero de 14 d√≠as.

Si este artículo te ayudó, síguenos en Facebook y Twitter para obtener más guías y tutoriales gratuitos de WordPress.

Recomendamos

Populares