Resumen de IA
La mayoría de los formularios de WordPress son de texto plano, lo que funciona bien para un formulario de contacto básico. Pero un poco de pulido visual puede marcar una gran diferencia, ya sea tu logo en la parte superior, una foto de producto o opciones de respuesta basadas en imágenes que son más fáciles de escanear que las opciones de texto plano.
Añadir una imagen a un formulario de WordPress es más fácil de lo que piensas, y no necesitarás escribir ningún código. Te guiaré a través de todo el proceso paso a paso, desde la instalación del plugin hasta la inserción de tu imagen y la publicación del formulario final.
¡Crea tu formulario de imágenes de WordPress ahora! :)
Cómo añadir una imagen a WordPress
El proceso para añadir imágenes a WordPress varía dependiendo de dónde exactamente estés insertando una imagen. En este tutorial, te mostraremos algunos de los escenarios más comunes para subir imágenes en WordPress.
Paso 1: Instala el plugin WPForms Pro
WPForms es el plugin de formularios más fácil de usar para principiantes en WordPress, con más de 2.100 plantillas de formularios y un constructor de arrastrar y soltar, para que puedas empezar desde una plantilla predefinida en lugar de una página en blanco.
Lo que más me gusta de WPForms para esto es el campo de Contenido. Te proporciona un pequeño editor visual directamente dentro del constructor de formularios, para que puedas subir una imagen, añadir un encabezado o insertar un logo sin salir de la página ni tocar ningún HTML.
El campo de Contenido es una función de pago, por lo que necesitarás una licencia de WPForms Pro para usarlo, que también desbloquea la biblioteca completa de plantillas junto con pagos, encuestas y los otros complementos que probablemente querrás a medida que tus formularios crezcan.
Para empezar, adquiere la licencia de WPForms Pro. Una vez que la hayas comprado, instala y activa el plugin en tu sitio. Si nunca has añadido un plugin antes, nuestra guía sobre cómo instalar WPForms te guiará a través de ello.
¡Actualiza a WPForms Pro ahora!
Paso 2: Crea tu formulario
Con WPForms activo, es hora de construir el formulario que contendrá tu imagen. Desde tu panel de WordPress, ve a WPForms » Añadir Nuevo para abrir el constructor de formularios.
En la pantalla de configuración, dale un nombre a tu formulario y elige una plantilla para empezar. Usaré la plantilla Formulario de contacto simple, así que haz clic sobre ella y selecciona Usar plantilla.
La plantilla se carga en el constructor con todos los campos estándar ya colocados, listos para que los personalices.
Paso 3: Inserta una imagen en tu formulario
Para añadir tu imagen, usarás el campo Contenido, que te permite colocar imágenes, encabezados y texto formateado en cualquier lugar de tu formulario. Si quieres un resumen completo de lo que puede hacer, la documentación del campo de Contenido lo cubre.
Busca el campo Contenido en el panel izquierdo y arrástralo a tu formulario. Estoy añadiendo un logo en la parte superior, así que colocaré el campo encima de los otros campos.
Haz clic en el campo que acabas de añadir para abrir sus Opciones de campo a la izquierda, donde encontrarás un pequeño editor visual para añadir contenido.
Justo encima del editor, haz clic en el botón Añadir medios.
Luego haz clic en Seleccionar archivos para subir una imagen desde tu ordenador, o elige una que ya esté en tu Biblioteca de medios.
Una vez que tu imagen se haya subido, puedes rellenar detalles como el texto alternativo y el título. Cuando estés listo, haz clic en Insertar en el formulario en la parte inferior.
La imagen se añade al campo, aunque no se mostrará en la vista previa del formulario de inmediato. Haz clic en el botón Actualizar vista previa debajo del editor para que aparezca.
Así es como se ve el formulario una vez que la imagen está en su lugar y la vista previa se ha actualizado.
Si deseas un mayor control sobre el aspecto de tu contenido, haz clic en el botón Expandir editor en la parte inferior derecha.
Desde allí puedes cambiar la alineación, añadir una lista con viñetas y dar formato al texto de la misma manera que lo harías en una entrada.
Cuando todo tenga el aspecto correcto, haz clic en Guardar en la parte superior derecha del constructor. Este mismo campo de Contenido es el que usarías para añadir una imagen de encabezado o un logotipo, por lo que cubre la mayoría de los retoques visuales que necesita un formulario.
Paso 4: Publica tu formulario
Con tu imagen en su lugar, el último paso es colocar el formulario en tu sitio. WPForms tiene un asistente de incrustación integrado que se encarga de esto en unos pocos clics.
Comienza haciendo clic en el botón Incrustar en la parte superior del constructor de formularios.
Aparece una ventana preguntando dónde te gustaría que fuera el formulario. Haré clic en Crear página nueva para colocarlo en una página nueva.
Dale un nombre a la nueva página y luego haz clic en ¡Vamos!.
WPForms te lleva al editor de WordPress con tu formulario ya incrustado. Cuando estés satisfecho con él, haz clic en Publicar para ponerlo en línea.
Tu formulario ya está en línea, con tu imagen mostrándose justo donde la colocaste.
Más formas de añadir imágenes a tus formularios
El campo de Contenido cubre la mayoría de las situaciones, pero WPForms te ofrece un par de formas más de trabajar con imágenes. Estas son opcionales, así que usa la que mejor se adapte a lo que estás construyendo.
Añadir opciones de imagen a los campos del formulario
Esto funciona con campos como Opciones Múltiples, Casillas de Verificación y Múltiples Elementos, y es una función gratuita, por lo que puedes probarla incluso en WPForms Lite.
Puedes ver la lista completa de campos compatibles en la guía de opciones de imagen. Para activarlo, abre las Opciones del campo del campo y activa el interruptor Usar opciones de imagen.
A continuación, obtendrás un botón Subir imagen para cada opción. Haz clic en él para añadir una imagen a esa opción.
Repite esto para el resto de tus opciones, y una lista simple se convierte en un conjunto de opciones visuales que tus visitantes pueden seleccionar.
Si prefieres usar iconos en lugar de tus propias imágenes, activa el interruptor Usar iconos en su lugar y elige de la biblioteca de iconos integrada.
Como ejemplo específico, aquí tienes cómo añadir una imagen junto a los botones de radio en tus formularios.
Añadir imágenes con código HTML
Si prefieres trabajar con código, o quieres insertar una imagen que ya está alojada en línea, el campo HTML es otra opción. Necesitarás la URL de la imagen para esta.
Si tu imagen aún no está en línea, súbela primero. Ve a Medios » Añadir nuevo archivo multimedia en tu panel.
Haz clic en Seleccionar archivos y elige la imagen de tu ordenador.
Una vez que termine de subirse, haz clic en Copiar URL al portapapeles para obtener el enlace.
Ahora abre el formulario que deseas editar o crea uno nuevo. Para editar un formulario existente, ve a WPForms » Todos los formularios.
Selecciona el formulario que deseas de la página Resumen de formularios.
En el constructor, arrastra el campo HTML a tu formulario.
Haz clic en el campo para abrir sus Opciones de campo a la izquierda.
Puedes añadir una Etiqueta para ayudarte a identificar el campo más tarde, aunque no se mostrará en el front-end. Para mostrar tu imagen, arrástrala a una etiqueta de imagen en el cuadro Código. El formato es <img src="[URL del archivo de tu imagen]">, con tu propia URL en lugar del marcador de posición.
A diferencia del campo Contenido, el campo HTML no se previsualiza dentro del constructor. Para comprobar tu trabajo, haz clic en el botón Vista previa en la parte superior para ver el formulario completo.
Desde allí, publica el formulario de la misma manera que te mostré antes.
Preguntas frecuentes sobre cómo añadir imágenes a formularios de WordPress
Añadir imágenes a tus formularios plantea algunas preguntas comunes. Aquí tienes respuestas rápidas a las que oigo con más frecuencia.
¿Se puede añadir una imagen a un formulario de WordPress gratis?
Sí, en parte. Las opciones de imagen para campos seleccionables funcionan en el plugin gratuito WPForms Lite. El campo Contenido, que es la forma más fácil de añadir un logotipo o una imagen independiente, es una función de pago que comienza en el plan Básico.
¿Cómo permito que los visitantes suban sus propias imágenes a mi formulario?
Ese es un campo diferente llamado Carga de archivos, que permite a las personas adjuntar imágenes o documentos cuando envían. Puedes ver cómo funciona en la página de funciones de cargas de archivos.
¿Cómo añado un logotipo a mi formulario?
Usa el campo Contenido en la parte superior de tu formulario y sube tu logotipo como imagen. Para un tutorial centrado solo en esto, sigue nuestra guía sobre cómo añadir una imagen de encabezado o logotipo a un formulario de WordPress.
A continuación, permite que los visitantes envíen sus propias imágenes
Ahora que puedes añadir imágenes a tus formularios, es posible que quieras darle la vuelta y permitir que tus visitantes suban sus propias imágenes a WordPress a través de un formulario. Es igual de sencillo de configurar.
¿Quieres seguir refinando el aspecto de tus formularios? Echa un vistazo a nuestra guía sobre estilo de WPForms usando el editor de bloques, que te muestra cómo diseñar tus formularios sin código.
¡Crea tu formulario de imágenes de WordPress ahora! :)
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.
Hola.
Cuando quiero poner una imagen en mi formulario, no se adapta al tamaño del formulario, siempre es demasiado grande.
¿Cómo puedo hacerla más "responsiva"?
¡Gracias!
Hola Guillaume, ¡lamento los problemas! Para hacer que las imágenes sean responsivas, podrías añadir tamaños de imagen en % y ajustar el tamaño, como
Sin embargo, para asegurarnos de responder a su pregunta de la manera más completa posible, ¿podría ponerse en contacto con nuestro equipo de soporte con algunos detalles adicionales sobre lo que desea hacer?
¡Gracias! 🙂
¿Cómo pueden los usuarios subir su imagen en el formulario? ¿Desde su ordenador o usando la webcam?
Hola Sohaib, ¡buena pregunta! Primero puedes almacenar la imagen en el almacenamiento de tu ordenador (incluidas las capturadas con webcam) y luego seguir las instrucciones del Paso 2 haciendo referencia a este mismo artículo.
¡Espero que esto ayude! 🙂
¿Cómo pueden mis CLIENTES publicar sus fotos en mi sitio web a través de un formulario que he creado, por ejemplo, para vender un coche o un equipo?
¡Hola Carl! La forma más sencilla de permitir que tus clientes creen sus propios anuncios sería a través de nuestro complemento de Envío de Publicaciones, especialmente con nuestro editor de Campo de Texto Enriquecido lanzado recientemente 🙂
Con esos dos combinados, tus usuarios podrán diseñar su anuncio como quieran, enviar el formulario y se añadirá directamente a tu sitio (o pendiente de tu aprobación).
Espero que esto ayude a aclarar 🙂 Si tienes alguna otra pregunta al respecto, por favor contáctanos si tienes una suscripción activa. Si no la tienes, no dudes en enviarnos tus preguntas a nuestros foros de soporte.
¿Cómo puedo cambiar el logo de búsqueda del formulario del widget?
¡Hola Cory! Me disculpo, pero no estoy seguro de haber entendido a qué te refieres.
Cuando tengas oportunidad, ¿podrías ponerte en contacto con nuestro equipo aquí si tienes una suscripción activa?
Si no la tienes, no dudes en contactarnos en nuestros foros de soporte.
¡Gracias!
He añadido la imagen en mi formulario usando HTML, pero no la recupera en el correo electrónico.
Añadí un par de imágenes en la cabecera para poder imprimir la entrada del formulario junto con los logotipos en la parte superior, pero no tuve éxito.
¡Hola Aman!
¡Gracias por contactarnos!
La razón por la que no pasamos campos HTML, campos de divisor de sección o descripciones (los dos últimos son esencialmente campos HTML) es que estas áreas permiten HTML completo, lo que significa que será común que contengan cosas que rompan las notificaciones por correo electrónico o causen problemas de entrega.
Sin embargo, tenemos un filtro que te permitirá incluir campos que no sean de entrada en tus correos electrónicos. Aquí tienes nuestro tutorial con todos los detalles, además del código que necesitarías: https://wpforms.com/developers/include-page-break-section-divider-and-html-fields-in-notifications/.
También tenemos un útil tutorial con detalles sobre cómo añadir código personalizado como este a tu sitio: https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ (para una opción especialmente fácil, recomiendo la opción del plugin Code Snippets).
O si prefieres evitar PHP, podrías considerar modificar el cuerpo de tus notificaciones para incluir el texto que necesitas. Podrías hacerlo construyendo el contenido de la notificación de una manera más personalizada utilizando texto normal, HTML y etiquetas inteligentes.
Esta opción probablemente proporciona el mayor control, ya que puedes elegir exactamente qué detalles te gustaría incluir en tu notificación.
Me disculpo si esto no es exactamente lo que buscabas, pero espero que alguna de estas ideas te sirva. ¿Podrías, por favor, hacerme saber si tienes alguna otra pregunta?
¡Gracias!
¿Puede un usuario usar la cámara de su dispositivo para tomar una foto y cargarla en un solo paso en lugar de primero tomar una foto, guardarla en su escritorio y luego cargar la foto? Idealmente, me gustaría que el usuario cargara una foto de una biblioteca si tiene una foto existente, pero si lo prefiere, puede simplemente tomar una foto de la cámara y cargarla. ¿Hay alguna forma de hacer esto en WPForms?
¡Hola Anil! El campo de carga de archivos, cuando se accede desde un dispositivo móvil, puede ofrecer al usuario la opción de subir una imagen directamente desde su cámara. Sin embargo, depende de si ese usuario tiene configurado su móvil para permitir que el navegador acceda a su cámara. Si no es así, la opción no estará disponible.
Espero que esto ayude a aclarar 🙂 Si tienes alguna otra pregunta al respecto, por favor contáctanos si tienes una suscripción activa. Si no la tienes, no dudes en enviarnos tus preguntas a nuestros foros de soporte.
Hola,
¿WP-Forms maneja los datos de registro del usuario de la misma manera que WooCommerce? Si un usuario finaliza la compra en mi tienda de comercio electrónico y registra una cuenta, ¿se duplican sus datos, una vez en WooCommerce y otra en el registro de WP Forms?
Hola Ann, nuestro complemento de registro de usuarios no proporciona una interfaz para administrar o editar usuarios existentes y se centra únicamente en el proceso de creación de cuentas. Sin embargo, no admitimos ninguna integración con WooCommerce.
Dicho esto, para asegurarnos de responder a tu pregunta de la manera más completa posible y evitar confusiones, ¿podrías ponerte en contacto con nuestro equipo?
Si tienes una licencia de WPForms, tienes acceso a nuestro soporte por correo electrónico, así que por favor envía un ticket de soporte. De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite en WordPress.org.
Gracias.
¿WPForms admite medios gib? ¿O la incrustación de un código corto de un plugin de visor 3D?
Hola Melissa, ¡estaremos encantados de ayudarte! Cuando tengas un momento, por favor, escríbenos a soporte para que podamos ayudarte.
Si tienes una licencia de WPForms, tienes acceso a nuestro soporte por correo electrónico, así que por favor envía una solicitud de soporte.
De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite en WordPress.org.
Gracias 🙂
¿Cómo agrego una imagen en el botón de envío de wpforms en WordPress?
Hasta ahora solo muestras cómo agregar iconos. Pero tengo una imagen personalizada que me gustaría agregar.
Hola Aser: para agregar una imagen al botón de enviar, puedes considerar usar el siguiente CSS:
.wpforms-submit-container .wpforms-submit { background-image: url('image_url'); background-size: cover; padding-left: 40px; }Y por si acaso te ayuda, aquí tienes un tutorial detallado sobre cómo agregar CSS personalizado como este a tu sitio.
Mi código se ve algo así:
.wpforms-submit-container .wpforms-submit { background-image: url(‘https://lhamosplane.world/wp-content/uploads/2023/07/th-1787430678.B.png’); background-size: cover; padding-left: 40px; }
Sin embargo, la URL no se capta, lo que significa que la imagen no se muestra. No estoy seguro de si entiendes lo que busco, pero quiero que una imagen .png sea visible junto al texto "Enviar" dentro del botón de enviar a la izquierda.
Encontré este código de tu tutorial que muestra iconos Fantastique y hace casi lo que quiero, pero no puedo agregar una URL a mi imagen elegida.
.wpforms-form button[type=submit]:hover { background-color: #ac2428 !important; }
.wpforms-form button[type=submit]:before { content: ‘\f1d8’; /* Unicode para el icono, asegúrate de mantener las comillas y la barra diagonal */ margin-right: 10px !important; /* Distancia entre el icono y el texto del botón */ }
Hola Aser, ¡estaremos encantados de ayudarte! Cuando tengas un momento, por favor, escríbenos a soporte para que podamos ayudarte.
Si tienes una licencia de WPForms, tienes acceso a nuestro soporte por correo electrónico, así que por favor envía una solicitud de soporte.
De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite en WordPress.org.
Gracias 🙂
¿Cómo alinear una imagen a la izquierda de un formulario?
Hola JM: si buscas mostrar una imagen a la izquierda y los campos a la derecha, puedes considerar usar el campo de diseño.
Hola, tengo una pregunta para saber si puedo comprar tu módulo para hacer el formulario que necesito. La primera línea contiene 6 botones de radio encima de los cuales hay una imagen (por lo tanto, 6 imágenes) pero que no son "etiquetas". Cuando haces clic en una imagen, se abre una ventana emergente que muestra la imagen más grande y texto explicativo. ¿Es posible hacer esto con WP-Forms? Gracias de antemano
Hola Françoise, ¡estaremos encantados de ayudarte! Cuando tengas un momento, por favor envía una solicitud de soporte para que podamos ayudarte.