Resumen de IA
¿Quieres añadir una imagen a tu sitio de WordPress?
Las imágenes son una parte esencial de todo contenido en línea. Mejoran el atractivo visual de tu sitio web y hacen que tu contenido sea más legible.
En este tutorial, te guiaré a través del proceso de añadir una imagen a diferentes partes de tu sitio de WordPress.
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.
Aquí tienes instrucciones escritas si prefieres leer.
Crea tu formulario de imágenes de WordPress ahora
Escenario n.º 1: Añadir una imagen a una entrada de WordPress
Si estás creando una nueva entrada o página en WordPress, es probable que necesites añadir algunas imágenes para que tu contenido destaque.
Para añadir una imagen a tu entrada, primero deberás ir al editor de entradas de WordPress navegando a Entradas » Todas las entradas desde el menú de administración.
Esto te llevará inmediatamente al editor Gutenberg de WordPress. Una vez dentro del editor, simplemente haz clic en el botón ‘+‘ para abrir la lista de bloques disponibles y luego selecciona el bloque Imagen.
Cuando el bloque Imagen se inserte en el área de contenido, verás las opciones para subir una nueva imagen desde tu ordenador, seleccionar una imagen ya subida desde la Biblioteca de medios o insertar una imagen desde una URL.
Si estás añadiendo una nueva imagen que aún no existe en la biblioteca, haz clic en el botón Subir.
Luego, selecciona la imagen que deseas subir desde tu ordenador y debería aparecer inmediatamente en tu entrada.
¡Así de fácil es añadir una imagen a una entrada de blog de WordPress!
El proceso para insertar imágenes en páginas es similar. Solo tendrás que seguir el mismo proceso después de hacer clic en la opción de menú Añadir nueva página desde la barra lateral de administración en tu WordPress.
Escenario n.º 2: Añadir una imagen a un formulario de WordPress
Si quieres añadir una imagen a un formulario de WordPress, primero necesitarás instalar un plugin de formularios con una funcionalidad de carga de imágenes sencilla.
WPForms es uno de los pocos plugins de formularios para WordPress que facilitan increíblemente la inserción de una imagen en cualquier lugar de tu formulario.
Instalar WPForms
Si aún no tienes WPForms instalado en tu sitio, te recomendamos obtener la licencia WPForms Pro.
Para obtener ayuda con la instalación del plugin, puedes consultar nuestra guía de documentación sobre la instalación de WPForms.
Una vez que hayas instalado el plugin, pasa al siguiente paso donde te mostramos cómo crear un formulario.
Crear un formulario nuevo
En tu panel de WordPress, ve a WPForms » Añadir nuevo.
Verás la ventana de configuración del formulario abrirse en solo unos segundos. Aquí, puedes nombrar tu formulario y elegir entre una plantilla predefinida para empezar rápidamente.
Usaremos el Formulario de Contacto Sencillo para este tutorial, colocando el cursor sobre él y haciendo clic en Usar Plantilla.
La plantilla del formulario se cargará ahora en tu pantalla con todos los campos necesarios ya añadidos.
Podemos personalizar este formulario para añadir una imagen con bastante facilidad, como se muestra en el siguiente paso.
Insertar una imagen en tu formulario de WordPress
Para insertar una imagen, necesitarás añadir el campo Contenido a tu formulario. Simplemente arrastra y suelta el campo Contenido desde el panel izquierdo al derecho.
Vamos a añadir un logotipo en la parte superior del formulario, así que colocaremos el campo Contenido en la parte superior.
Después de añadir el campo, haz clic en él para abrir sus Opciones de Campo en el panel izquierdo, lo que te permite usar el editor visual para insertar contenido.
A continuación, tendrás que hacer clic en el botón Añadir Medios justo encima del editor visual.
Ahora, haz clic en el botón Seleccionar Archivos.
Ahora puedes seleccionar cualquier archivo de imagen para subir e insertar en tu formulario. Una vez subido, puedes introducir detalles como el texto alternativo y el título. Luego, haz clic en el botón Insertar en Formulario en la parte inferior.
Hacer esto insertará la imagen dentro de tu formulario. La imagen no aparecerá inmediatamente en el formulario, aunque puedas verla en el editor de la izquierda.
Solo necesitarás presionar el botón Actualizar Vista Previa debajo del editor visual para ver la imagen en el formulario.
Así es como debería verse después de haber añadido la imagen usando el campo Contenido y actualizado la vista previa.
También puedes acceder a opciones de formato adicionales haciendo clic en el botón Expandir Editor en la parte inferior derecha del editor.
Por ejemplo, puedes ajustar la alineación de tu contenido, añadir una lista con viñetas para texto, y más.
¡Excelente! Ahora que has añadido una imagen a tu formulario, procede a presionar el botón Guardar en la parte superior derecha del constructor de formularios.
Todo lo que queda ahora es publicar este formulario en tu sitio para que tus visitantes puedan acceder a él.
Publicar tu formulario en línea
WPForms viene con un asistente de incrustación fácil que hace que la publicación sea un proceso rápido y sencillo.
Comienza haciendo clic en el botón Incrustar en la parte superior del constructor de formularios.
Verás entonces aparecer una ventana modal, preguntándote dónde quieres incrustar tu formulario. Seleccionaremos Crear Nueva Página para incrustar un formulario en una página nueva.
Después de eso, introduce un nombre para tu página y haz clic en ¡Vamos!.
El asistente te llevará al editor de WordPress, donde encontrarás tu formulario incrustado.
Cuando estés listo para continuar, presiona el botón Publicar en la parte superior derecha para poner tu formulario en línea.
¡Y eso es todo! Ahora has creado con éxito un formulario con una imagen añadida.
Hay mucho más que puedes hacer con WPForms en lo que respecta a añadir gráficos. Te mostraremos algunos consejos adicionales a continuación.
Extra: Más formas de usar imágenes en formularios de WordPress
La flexibilidad de WPForms hace posibles muchas cosas interesantes cuando se trata de añadir medios a tus formularios.
Te mostraremos algunos consejos que pueden ayudarte a que tus formularios tengan un mejor aspecto, junto con métodos alternativos para insertar imágenes.
Añadir imágenes a campos seleccionados
En el ejemplo anterior, te mostramos cómo insertar una imagen como un elemento de contenido en tu formulario.
¿Pero sabías que también puedes usar imágenes para acompañar elementos seleccionables en campos como Casillas de verificación y Elementos múltiples?
Para usar imágenes para las opciones en un campo de Elementos múltiples, puedes hacer clic en el botón de activación Usar opciones de imagen en las Opciones del campo.
Después de activar Opciones de imagen, podrás subir imágenes para cada opción de tu campo. Haz clic en el botón Subir imagen para añadir fácilmente cualquier imagen.
Puedes repetir esto para cada opción para convertir un formulario simple en algo más atractivo visualmente.
De hecho, no solo estás limitado a subir imágenes personalizadas para las opciones. WPForms también te da acceso a una enorme biblioteca de iconos pre-cargados que puedes añadir a tus opciones.
Para usar iconos para tus opciones, haz clic en la activación Usar opciones de icono.
Pruébalo. Es fácil de hacer y tus visitantes disfrutarán más rellenando tus formularios cuando haya elementos visuales que capten su atención.
Añadir imágenes con código HTML
Anteriormente, te mostramos cómo insertar rápidamente una imagen en tu formulario de WordPress usando el campo de Contenido.
Sin embargo, si prefieres trabajar directamente con código HTML, también puedes insertar imágenes usando un método más complejo técnicamente.
Para que esto funcione, es necesario que la imagen que deseas añadir a tu formulario ya esté subida a tu Biblioteca de medios y conozcas su URL.
Si no es así, puedes subir una y obtener la URL ahora. Desde tu panel de WordPress, haz clic en Medios » Añadir nuevos medios.
Esto abrirá el área de subida de la Biblioteca de medios. Haz clic en el botón Seleccionar archivos para continuar.
Ahora, elige el archivo que deseas subir desde tu ordenador. Cuando el archivo haya terminado de subirse, podrás ver su URL.
Haz clic en el botón Copiar URL al portapapeles para obtener el enlace.
Ahora, abre un formulario existente al que quieras añadir la imagen o crea uno nuevo como te mostramos anteriormente en este tutorial.
Puedes editar un formulario existente yendo a WPForms » Todos los formularios.
Ahora, selecciona el formulario en el que deseas insertar tu imagen desde la página Vista general de formularios.
Dentro del constructor de formularios, arrastra y suelta el campo HTML en el área de la derecha donde está tu formulario.
Después de haber hecho esto, haz clic en el campo HTML que acabas de colocar dentro de tu formulario para abrir sus Opciones del campo a la izquierda.
Puedes usar la opción Etiqueta para darle un nombre al campo HTML para que puedas identificarlo más fácilmente en el formulario, pero esto no será visible en el frontend.
Finalmente, la imagen que deseas insertar deberá añadirse dentro de una etiqueta img en el cuadro de Código. Puedes usar este formato para añadir tu imagen: <img src="[inserta la URL del archivo de tu imagen]">
Tenga en cuenta que, a diferencia del campo Contenido, el campo HTML no puede cargar el código para actualizar la vista previa dentro del generador de formularios. Pero puede usar el botón Vista previa en la parte superior para ver una vista previa de todo su formulario.
Esto es útil para comprobar si el código HTML que ha introducido funciona correctamente.
A continuación, puede publicar el formulario siguiendo los mismos pasos que hemos descrito anteriormente.
¡Y eso es todo! Ahora está listo para añadir una imagen a su sitio de WordPress, ya sea para una entrada o un formulario.
Crea tu formulario de imágenes de WordPress ahora
A continuación, Aceptar imágenes enviadas por el usuario
WPForms también facilita que sus visitantes suban sus propias imágenes a WordPress, así que asegúrese de consultarlo a continuación.
¿Busca más formas de diseñar y dar estilo a sus formularios? Consulte este artículo sobre cómo dar estilo a WPForms usando el editor de bloques. ¡Esta guía le mostrará cómo diseñar su formulario como un profesional utilizando controles sencillos y sin ningún código!
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin constructor 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 X para 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 enviar 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.