Tutorial Divi: Adaptar los estilos de Contact Form 7 a Divi

Formulario de contacto 7 generador de código

¿Le gusta utilizar el plugin Contact Form 7 para WordPress? ¿Te cuesta añadir personalizaciones sencillas a tus formularios? Bueno, espero que hayas llegado al lugar correcto. En este post, te mostraré cómo hacer que tus formularios de contacto se vean limpios y elegantes usando un simple CSS.

Asumiré que ya tienes instalado el plugin Contact Form 7 en tu sitio web y que también tienes un formulario de contacto incrustado en tu página de contacto. Si no lo tienes, puedes encontrar el plugin aquí para empezar.

Bueno, la pista está en el nombre. Es un plugin muy sencillo para añadir un formulario de contacto a tu sitio web WordPress. Los formularios son fácilmente personalizables utilizando marcas simples. Contact Form 7 es USD en más de 5 millones de sitios web de WordPress, así que estás en buenas manos.

Además de las notas a continuación, recomiendo ver el breve vídeo tutorial. El vídeo ya tiene unos años, pero el proceso de personalización del formulario no ha cambiado en WordPress. También encontrará los fragmentos de código CSS para los formularios a continuación.

Para este tutorial, voy a utilizar la opción 2, añadiendo CSS al campo CSS adicional proporcionado. Desde tu panel de WordPress, deberías poder encontrarlo navegando a Apariencia > Personalizar > CSS Adicional. (Ver imagen de abajo).

Formulario de contacto 7 código html

Una de las opciones no disponibles actualmente en el tema Divi es la posibilidad de centrar los botones del formulario de contacto. Aunque es un tema increíblemente robusto y bien construido no puede incluir todas las opciones posibles para cada elemento que se utiliza para construir un sitio web. Afortunadamente, esto es relativamente sencillo de rectificar y no requiere muchos conocimientos de codificación, sólo unas pocas líneas de código CSS. Si no estás seguro de cómo añadir CSS al tema Divi o WordPress echa un vistazo a los artículos siguientes:Añadir CSS a Divi

  Todos los shortcodes de Sensei LMS

Si tienes la opción de captcha activada esto creará un diseño donde el captcha se situará a la izquierda del botón de enviar. Si has añadido esto al formulario es probable que quieras mantenerlo dentro del formulario especialmente para prevenir o reducir el spam.

Si desea ajustar la ubicación del captcha, simplemente añada un fragmento de texto de alineación como se muestra en el primer bloque de código y ¡listo! Un ejemplo de esto podría ser text-align: center; que es el formato que hemos utilizado en el primer ejemplo. Esperamos que esto te ayude a dar estilo a tu sitio web Divi exactamente de la manera que deseas y te agradeceríamos un comentario o un compartir si lo encontraste útil.

Formulario de contacto 7 plantillas gratuitas

Es importante que todos los aspectos de su sitio web ofrezcan a sus visitantes una experiencia coherente y profesional. Pero a veces las pequeñas cosas se olvidan, como el mensaje de éxito después de enviar un formulario. Así que en este rápido tutorial te mostraré cómo estilizar el texto del mensaje de éxito en el módulo Divi Contact Form con un poco de CSS básico que te servirá de base para hacer coincidir los valores con tus preferencias deseadas.

  HTML cortado al publicar desde Windows Live Writer

El primer paso para estilizar el mensaje de éxito del módulo de formulario de contacto Divi después de enviar un formulario es añadir una clase CSS personalizada al módulo. Esto se utiliza para orientar el módulo con el código compartido en el paso 2 de este tutorial. Abra la configuración del módulo y vaya a la pestaña Avanzado. Vaya a la pestaña CSS IDs & Classes. Coloque la clase “pa-contact-form-success-message” en el campo de entrada CSS Class del módulo Contact Form.

Este es un tutorial muy rápido y sencillo, y ya casi hemos terminado. El segundo paso es añadir algo de código CSS a su sitio para dar estilo al texto del mensaje de éxito del Formulario de Contacto Divi. Esto es necesario porque no hay ajustes de diseño para esto en el módulo (sin nuestro plugin).

Botón de envío estilo formulario de contacto 7

¿Tiene un formulario de contacto de gran éxito en su sitio web de WordPress? ¿Pero le preocupa si seguirá viéndose bien una vez que cambie a un nuevo diseño de tema? La mayoría de los usuarios de WordPress se encuentran tarde o temprano en esta difícil situación. Tienen una cantidad insana de tráfico de usuarios que llegan a sus formularios de contacto y la tasa de conversión es altísima. Sin embargo, de alguna manera el diseño del sitio simplemente no funciona tan bien y requiere una actualización. Por lo general, esto significa que el formulario de contacto o registro existente en el sitio tendrá que ser estilizado para que coincida con el nuevo diseño del tema. Sin embargo, esto en sí no es un problema. La verdadera preocupación es cómo reaccionarán los usuarios del sitio al nuevo diseño del formulario. La posibilidad de ver un descenso en la tasa de conversión de tu formulario de contacto puede atormentarte sin fin y hacerte pasar noches en vela.

  25 sorprendentes diseños wordpress

A la hora de revisar la compatibilidad con los temas, qué mejor que echar un vistazo a los temas más populares entre los usuarios de WordPress hoy en día. Aquí tienes nuestro formulario con capturas de pantalla de cómo aparece en cinco de los temas más populares de WordPress…