Cómo añadir una imagen de encabezado o logotipo a un formulario en WordPress

¿Quieres aprender a añadir una imagen o logotipo en la cabecera de un formulario en WordPress?

Añadir una imagen es una excelente manera de personalizar tu formulario, dar a los usuarios una idea de qué trata el formulario o destacar el logotipo de tu empresa.

Afortunadamente, es fácil de hacer con WPForms. El campo de contenido en WPForms simplifica el proceso de subir texto y medios, como imágenes o logotipos, directamente en tus formularios.

En esta publicación, te guiaremos a través del proceso de uso del campo de contenido para añadir una imagen en la cabecera de un formulario en WordPress.

Añade una imagen de cabecera a tu formulario ahora

¿Por qué debería añadir una imagen de cabecera a un formulario?

Personalizar tu formulario con una imagen de cabecera personalizada es una forma fácil de complementar tu sitio web de WordPress con un diseño coherente y unificado. Dado que nuestro creador de formularios de arrastrar y soltar hace que la personalización de formularios sea muy sencilla, puedes usar tus imágenes en una variedad de estilos.

Además, usar una imagen dará a los usuarios de tu sitio web una idea clara de qué esperar de tu sitio y formulario. Las imágenes también ayudan a aportar interés visual a tus formularios y a integrarlos con el esquema de colores general y el tema de diseño de tu sitio.

La imagen de tu cabecera puede reflejar el tema del contenido de tu formulario, o podría ser una imagen que represente tu empresa u organización, como un logotipo.

Cómo añadir una imagen de encabezado o logotipo a un formulario en WordPress

En esta guía paso a paso, te mostraremos cómo editar la cabecera en los formularios de WordPress sin necesidad de código. Este tutorial es perfecto para principiantes y no requiere el uso de CSS personalizado, un constructor de páginas o el personalizador de WordPress.

Simplemente sigue esta tabla de contenidos para todos los pasos que te mostraremos:

1. Instala el plugin WPForms

Primero, necesitas instalar el plugin WPForms. Consulta todas las licencias de WPForms aquí, o descarga el plugin desde tu panel de WordPress.

Para usar la funcionalidad de carga del campo de contenido para añadir una imagen de cabecera al formulario, necesitarás seleccionar una licencia mejorada como Pro, Plus o Elite.

Aquí tienes un tutorial útil sobre cómo instalar un plugin de WordPress.

2. Selecciona la plantilla de formulario de contacto simple

Una vez que tengas el plugin configurado en tu sitio, navega a WPForms en tu panel de WordPress y haz clic en Añadir nuevo.

Desde aquí, encontrarás una gran selección de plantillas para elegir para crear tu formulario.

Pero primero, vamos a nombrar el formulario. Para este tutorial, nombraremos nuestro formulario "Contáctanos", que se mostrará en la parte superior del formulario. 

Ahora, seleccionaremos el Formulario de contacto simple.

Esto nos llevará a una nueva página, donde usaremos el creador de formularios fácil de usar para personalizar esta plantilla.

3. Añade el campo de contenido

Ahora que estamos en el creador de formularios, añadiremos el campo de contenido de las selecciones en la pestaña Campos.

Simplemente haz clic en Contenido y arrastra y suelta el campo donde quieras en tu formulario.

Estamos arrastrando el campo de contenido a la parte superior de la página para que los medios subidos actúen como una sección de encabezado en nuestro formulario.

Cuando el campo de contenido esté en su lugar en el área de vista previa, haremos clic en él para acceder a sus Opciones de campo y agregar nuestros medios y editar el texto usando el editor fácil en el panel izquierdo.

Puedes editar tu contenido visualmente o usar el editor de texto para editarlo usando HTML.

¡Genial! Ahora estamos listos para subir nuestra imagen e introducir algo de texto en el formulario.

4. Sube el logotipo/imagen de tu empresa

A continuación, haremos clic en Añadir medios para subir nuestra imagen al campo de contenido.

Podrás subir una nueva imagen o seleccionar una de tu Biblioteca de medios. Se aceptan archivos JPG y PNG.

Con nuestro logotipo personalizado en su lugar, podemos editar opciones de personalización como el tamaño de la imagen, la orientación y otros detalles.

Para asegurar que nuestra imagen actúe como un encabezado del formulario, hemos ido a la pestaña Avanzado y hemos establecido el Tamaño del campo en Grande.

Luego, de vuelta en la pestaña General, nos hemos asegurado de que la imagen esté centrada en el campo usando las opciones de formato dentro del campo de texto.

También tenemos la capacidad de editar el texto en el campo. Hemos editado el texto aquí para que sea un mensaje corto para los visitantes y una indicación para completar el formulario de contacto.

Al igual que los medios que están encima, puedes formatear el texto libremente con el campo de Contenido. Haz clic en Expandir editor debajo del cuadro de texto para obtener aún más opciones de edición.

Para nuestro logotipo aquí, hemos centrado el texto con el resto de la imagen.

Es posible que también desees personalizar los otros campos del formulario.

Por ejemplo, hemos aumentado el tamaño del campo de nombre a Grande, para que coincida con el ancho de nuestra imagen de encabezado que está encima.

Hay muchas maneras de personalizar los detalles de los campos del formulario como mejor te parezca, y puedes previsualizar tus cambios a medida que avanzas.

Asegúrate de hacer clic en Actualizar vista previa para ver los ajustes realizados en el campo de Contenido.

¡Excelente! ¡Ahora estamos listos para incrustar el formulario en cualquier página que queramos!

5. Guarda e incrusta el formulario

Presiona el botón Guardar en la esquina superior derecha del formulario para ver los cambios reflejados en la vista previa de la página.

Ya sea que revises la vista previa de la página o no, deberás hacer clic en Guardar antes de continuar.

Ahora, haremos clic en el botón Incrustar en la parte superior para añadir este formulario a una nueva página de nuestro sitio web de WordPress.

Después de hacer clic en Incrustar, elegiremos dónde poner el nuevo formulario.

Tenemos la opción de Seleccionar página existente o Crear nueva página. Para este tutorial, estamos creando una nueva página, así que haremos clic en Crear nueva página.

Después de eso, se nos pedirá que nombremos la nueva página.

La llamaremos "Contáctanos" ya que ese es el nombre que le dimos a este formulario cuando seleccionamos la plantilla.

Ahora podemos ver el formulario en una página recién creada para nuestro sitio web de WordPress. Desde aquí, podemos previsualizar la página, guardar la página como borrador o publicarla.

Recomendamos que configures los ajustes del bloque en el lado derecho del editor para ocultar el título del formulario si aún no lo has hecho. No querrás que distraiga de la imagen del encabezado de tu formulario.

Solo asegúrate de que el interruptor Mostrar título esté en la posición de apagado.

Cuando estés listo, haz clic en Publicar para que esta página esté activa en tu sitio.

¡Fantástico!  Ahora has añadido con éxito un encabezado de formulario con una imagen o un logotipo a tu sitio de WordPress.

Añade una imagen de cabecera a tu formulario ahora

A continuación, detén el spam del formulario de contacto en WordPress.

Con un nuevo y atractivo formulario personalizado con la imagen de encabezado que elijas, invitarás a muchos visitantes de tu sitio web a rellenar tu formulario.

Pero no querrás recopilar spam con tu nuevo formulario.

Para evitar que los spammers rellenen tus formularios, consulta este artículo sobre cómo prevenir envíos de spam en tus formularios de WordPress.

¿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.