Descuento 20% Diciembre
Plugin Optimización de Imágenes Gratuito para WordPress
Miércoles, 30 Septiembre 2015 21:30

Personaliza formularios en WordPress - Contact Form 7

Escrito por 
CMS:  WordPress |  Versión:  4.3.x |  Nivel de dificultad:  Básico |  Tiempo estimado de lectura:  5 minutos


formularios en WordPressSeguramente tu formulario de contacto de WordPress esté realizado con un plugin, ya que la mayoría de temas no suelen incluir formularios construidos en base al tema e integrados, no es interesante y su personalización es más laboriosa. El plugin Contact Form 7 por defecto no permite grandes personalizaciones de formularios en WordPress en lo que a formato, tamaños y colores se refiere ¿ya lo has comprobado?

Puedes construir formularios con Contact Form 7 y luego darles un toque de personalidad, adaptándolos a la estética o imagen corporativa de tu sitio web de forma que su integración en el conjunto de tu sitio web sea la deseada.

Meterle mano al código o crear un 'override' para personalizarlo no es interesante por la cantidad de tiempo que necesitas invertir para realizarlo ¿que tal si usamos un plugin y lo hacemos más personalizable?, bueno, lo del plugin como que ya lo esperabas, es un clásico en los artículos de WordPress, pero si te digo que no necesitarás tocar código, seguro que eso suena mejor ¿vamos?...

Has dado el paso de hacer clic en 'Leer más', eso es señal de que quieres saber como mejorar un poco más la estética de tu formulario de contacto creado con el plugin Contact Form 7 ¡felicidades!

El siguiente paso es echar mano del plugin CF7 Customizer para poder editar el formato del formulario de contacto y modificar determinados aspectos visuales como el tamaño y color de fuentes, espacios entre campos del formulario, colo de los textos de los campos y del fondo, etc.

WordPress

CF7 Customizer

El plugin CF7 Customizer te permite rediseñar el formulario de Contact Form 7 de forma intuitiva utilizando el personalizador de WordPress desde el frontal.


Una vez que has instalado el plugin CF7 Customizer y lo has activado, tienes que verificar en el dashboard, Usuarios, Tu Perfil, que tienes habilitada la opción Barra de herramientas, Muestra la Barra de Herramientas en el sitio.


Activación barra herranmientas sitio (admin bar)

También debes tener el plugin Contact Form 7 instalado y un formulario de contacto creado y publicado en alguna parte, ya sea en una página mediante el correspondiente código corto:

[contact-form-7 id="4" title="Formulario de contacto 1"]

O en un widget:

Formulario de contacto en widget

Vamos a modificar y personalizar el formulario publicado en el widget, que se encuentra localizado en un apartado de la web.

Accede a CF7 Customizer desde el frontal de la web, en la barra superior (admin bar) veras el Personalizador.


Acceso al Personalizador desde la Admin bar

Una vez cargado el Personalizador de WordPress, en la parte izquierda localiza CF7 Customizer y haz clic sobre esa opción.


Menú personalizador

Encontraras 4 apartados para configurar opciones:

  • Form Text & BG Colors: Aqui personalizamos el color del texto del formulario, el color de fondo, podemos añadir una imagen de fondo o cambiar el tamaño de la fuente.
  • Form Padding, Margin & Border: Podemos añadir el relleno, el margen y el borde del formulario y personalizar el color del borde.
  • Input Fields Styling: Ajustar el estilo de los campos de entrada del formulario estableciendo el ancho, los colores, el borde, el relleno y los márgenes.
  • Button Styling: Aqui personalizamos el botón de 'Envío' del formulario indicando el color del fondo y del texto, el borde, incluso cambiar los colores del estado estacionario.

Ajuste de fuente y colores

Toqueteando aquí y allá, estableciendo los colores adecuados, los tamaños de fuente correctos y con paciencia y buenos alimentos, como decía mi abuela, podrás dejar tu formulario con un aspecto más bonito y llamativo.


formularios en WordPress

Importante: No olvides realizar comprobaciones del formulario que estés personalizando, desde dispositivos móviles, para observar que la estructura y estilos se mantienen.

Aprovecha que estás mejorando el formulario de Contact Form 7 si cambia el viejo CAPTCHA por el nuevo No CAPTCHA reCAPTCHA que ahora es nativo para el plugin CF7.

formularios en WordPress

Los detalles siempre son importantes y tener un formulario de Contacto visible, adaptado a la estética de tu web, forma parte del conjunto de tu proyecto web.


¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop



Luis Méndez Alejo

Miembro del equipo técnico de Webempresa.
Coordinador de contenidos en el Blog y en Youtube.
Google+


Plugin Optimización de Imágenes Gratuito para WordPress