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

¿Quieres agregar una imagen en el encabezado de tu formulario? Quizás sea tu logotipo, un banner que coincida con tu sitio o una foto que muestre a los visitantes de qué trata el formulario.

Sea lo que sea que imagines, un bloque simple de campos grises no le hace ningún favor a tu marca. He visto muchos sitios web hermosos con formularios que parecen prestados del sitio de otra persona.

La solución es el campo de contenido en WPForms. Te permite insertar imágenes, logotipos y texto directamente en tus formularios, sin necesidad de código.

En esta publicación, te guiaré a través de todo el proceso de agregar una imagen de encabezado de formulario en WordPress, paso a paso.

Añade una imagen de cabecera a tu formulario ahora

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

Una imagen de encabezado de formulario personalizada es una de las formas más rápidas de hacer que tu formulario parezca que realmente pertenece a tu sitio web. En lugar de un conjunto genérico de campos, los visitantes ven tu marca primero, lo que genera confianza antes de que escriban una sola letra.

También establece expectativas. Una imagen de encabezado o un logotipo le da a las personas una idea clara de a quién contactan y por qué, y vincula tu formulario con el esquema de color general y el tema de diseño de tu sitio.

Tu encabezado podría reflejar el tema del formulario, o podría ser simplemente el logotipo de tu empresa. Y si deseas el mismo aspecto de marca en cada formulario que creas, puedes crear plantillas de formularios de marca para que cada nuevo formulario comience con tu encabezado ya en su lugar.

Los logotipos también vienen en todos los tamaños. Si te preguntas qué tan grande debería ser el tuyo, consulta nuestra guía sobre el mejor tamaño de logotipo para sitios web.

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

En esta guía paso a paso, te mostraré cómo agregar una imagen o logotipo de encabezado a tus formularios de WordPress sin tocar ningún código. Este tutorial es perfecto para principiantes, y no necesitarás CSS personalizado, un constructor de páginas ni el personalizador de WordPress.

Paso 1: Instalar el plugin básico de WPForms

WPForms es la forma más fácil de crear formularios de marca en WordPress. Obtienes un constructor de arrastrar y soltar más más de 2100 plantillas para empezar, por lo que nunca te quedarás mirando un formulario en blanco preguntándote por dónde empezar.

Lo que más me gusta de WPForms para este trabajo en particular es que el campo de contenido funciona igual que el editor de WordPress que ya conoces. Agregar tu logotipo a un formulario se siente exactamente como agregar una imagen a una publicación de blog, hasta el botón Agregar medios.

Necesitarás una licencia para usar el campo de contenido, ya que no está incluido en Lite. La buena noticia es que se desbloquea en Basic, el primer nivel de pago, por lo que no tienes que gastar en un plan más caro solo para marcar tus formularios.

Para empezar, compra la licencia Basic. Luego, instala WPForms en tu sitio web. Si necesitas ayuda, sigue estas instrucciones sobre cómo agregar un plugin a WordPress.

¡Obtén WPForms Basic ahora!

Paso 2: Seleccionar la plantilla de formulario de contacto simple

Una vez que tengas el plugin configurado en tu sitio, ve a WPForms » Agregar nuevo en tu panel de WordPress.

Desde aquí, encontrarás una gran biblioteca de plantillas de formularios para elegir.

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 la plantilla Formulario de contacto simple.

Esto nos lleva directamente al constructor de formularios de arrastrar y soltar, donde personalizaremos la plantilla.

Paso 3: Agregar el campo de contenido

Ahora que estamos en el constructor de formularios, busca el campo Contenido en la pestaña Campos.

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

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

Cuando el campo esté en su lugar en el área de vista previa, haz clic en él para abrir sus Opciones de campo. Aquí es donde agregarás tus medios y editarás el texto usando el editor en el panel izquierdo.

Puedes editar tu contenido visualmente o cambiar al editor de texto para trabajar en HTML. Para un resumen completo de todo lo que este campo puede hacer, consulta nuestra guía completa para usar el campo de contenido.

¡Genial! Ahora estamos listos para subir nuestra imagen y agregar algo de texto al formulario.

Paso 4: Subir el logotipo o la imagen de tu empresa

A continuación, haz clic en Agregar medios para subir tu 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.

Un par de consejos rápidos antes de subir la imagen. Para los logotipos, usa un PNG con fondo transparente para que tu logo no quede dentro de un recuadro blanco, y un ancho de unos 200 píxeles es un buen punto de partida. Para las imágenes de encabezado tipo banner, elige algo al menos tan ancho como tu formulario, aproximadamente de 700 a 800 píxeles para la mayoría de las áreas de contenido de WordPress, para que se mantenga nítido a tamaño completo.

¿Todavía no tienes un logo? Estos generadores de logos con IA pueden conseguirte uno sólido en pocos minutos.

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 asegurarnos de que nuestra imagen actúe como un verdadero 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 utilizando las opciones de formato dentro del editor de texto.

También podemos editar el texto del campo. Aquí hemos escrito un breve mensaje de bienvenida para los visitantes, además de una indicación amigable para rellenar el formulario de contacto.

Al igual que el medio que está encima, puedes formatear el texto libremente en el campo 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 Nombre a Grande para que coincida con el ancho de nuestra imagen de encabezado que está encima.

Hay muchas maneras de ajustar los campos de tu formulario, 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 Contenido.

Nuestro encabezado se ve genial, así que vamos a poner este formulario en una página.

Paso 5: Guardar e incrustar el formulario

Pulsa el botón Guardar en la esquina superior derecha del constructor de formularios para aplicar tus cambios.

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

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

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

Puedes seleccionar una página existente o crear una nueva. Para este tutorial, estamos creando una nueva página, así que haremos clic en Crear página nueva.

Después de eso, se nos pide 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, guardarla como borrador o publicarla.

Una recomendación más. En la configuración del bloque en el lado derecho del editor, oculta el título del formulario para que no compita con tu nueva imagen de encabezado.

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 tienes un formulario con una imagen de encabezado o logo personalizado, y todo probablemente te ha llevado menos de diez minutos.

Preguntas frecuentes sobre cómo añadir una imagen de encabezado a un formulario en WordPress

Añadir una imagen de encabezado o un logo a tus formularios de WordPress tiende a plantear las mismas preguntas. Aquí tienes respuestas rápidas a las que oímos con más frecuencia.

¿Por qué no encuentro el campo Contenido en WPForms?

El campo Contenido está disponible en WPForms Basic y superior, por lo que no aparecerá en la lista de campos si estás utilizando la versión gratuita Lite. Actualiza a cualquier licencia de pago y el campo aparecerá en el constructor de formularios.

¿Qué tamaño debe tener una imagen de encabezado de formulario?

Para un logotipo, un tamaño de unos 200 píxeles de ancho con un fondo PNG transparente funciona bien. Para un encabezado estilo banner, ajusta el ancho de tu formulario, que suele ser de 700 a 800 píxeles en un área de contenido estándar de WordPress. Empezar cerca del tamaño de visualización mantiene tu imagen nítida.

¿Puedo agregar imágenes en cualquier otro lugar de mi formulario?

Definitivamente. El campo Contenido puede ir en cualquier lugar de tu formulario y puedes usar más de uno. Si quieres imágenes junto a tus preguntas o en otros lugares creativos, aquí te mostramos cómo añadir imágenes en cualquier lugar de tus formularios de WordPress.

¿Puedo dar estilo a mi formulario para que coincida con la marca de mi sitio?

Sí. Si incrustas tu formulario con el bloque WPForms, puedes cambiar colores, fondos y estilos de campo directamente en el editor de bloques sin escribir CSS. Nuestra guía sobre cómo dar estilo a tus formularios recorre todas las opciones.

¿Puedo cambiar el encabezado de mi sitio en lugar del encabezado del formulario?

Este tutorial cubre el área del encabezado de un formulario. Si deseas actualizar el encabezado de todo tu sitio web, eso está controlado por tu tema, y lo cubrimos en nuestra guía sobre cómo editar el encabezado de tu sitio en WordPress.

A continuación, Detener el spam en los formularios de contacto en WordPress

Con un nuevo y atractivo encabezado en tu formulario, invitarás a muchos más visitantes a rellenarlo. Sin embargo, no querrás que la mitad de esas entradas sean basura.

Para mantener alejados a los spammers de tu flamante formulario, consulta nuestra guía sobre cómo prevenir envíos de spam en tus formularios de WordPress.

Crea tu formulario de marca ahora

¿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 Twitter para obtener más tutoriales y guías gratuitas de WordPress.