Seguramente 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.
CF7 Customizer
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.
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:
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.
Una vez cargado el Personalizador de WordPress, en la parte izquierda localiza CF7 Customizer y haz clic sobre esa opción.
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.
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.
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.
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.