Personalizar el formulario de Contact Form 7 en Divi

Personalizar el formulario de Contact Form 7 en Divi

En este tutorial te mostraremos como personalizar el formulario de contacto de Contact Form 7 en Divi. Como saben, muchos usuarios prefieren usar un formulario de contact form 7 para administrar los mensajes de contacto en sus p√°ginas hechas con Divi, debido a que los formularios por defecto de Divi son un tanto limitados.

Crea un formulario de contacto avanzado con Divi ¬°Mira este tutorial!

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

El problema de contact form 7 es que sus estilos por defecto son muy básicos, y no se acoplan correctamente al estilo que tengamos en nuestro sitio, es por ello que en este tutorial te mostraremos como personalizar los estilos del formulario de contact form 7 para un formulario en Divi sin apenas saber nada de código CSS.

√ćndice

Este tutorial es para ti si lo que quieres es personalizar los estilos del formulario de contacto de contact form 7 con Divi.

Instala Contact Form 7 y crea un formulario

El primer paso es claro, instalar el plugin de contact form 7 y crear un formulario de contacto con el mismo. Este paso lo puedes omitir si ya tienes instalado el plugin y creado un formulario. En todo caso, el plugin contact form 7 es totalmente gratuito y lo puedes encontrar él en repositorio de WordPress:

Al instalarlo y activarlo, podr√°s ir a la nueva pesta√Īa de configuraci√≥n de formularios que se encuentra en el men√ļ de WordPress y crear all√≠ un nuevo formulario:

contact form 7 creacion de formulario

En los campos del formulario puedes colocar todos los que desees, y con ello tener todo listo para comenzar con la personalización de estilos del formulario de contacto que acabas de crear con contact form 7.

Aprende a crear formularios de creaci√≥n de post, productos o cualquier custom post type con el plugin Divi Contact Form Builder que mostramos en las √ļltimas clases de nuestro curso de membres√≠a para directorios.

En nuestro video mostramos como crear el formulario de forma más especifica, agregando algunos campos adicionales, así que no dejes de verlos. Una vez tengamos nuestro formulario completamente creado, ahora sí, vamos a darle los estilos.

Instala Divi Contact Form 7 para los estilos

Para personalizar el formulario de contacto de contact form 7 que hemos creado, debemos usar un plugin adicional que nos ayudará a poder hacerlo sin saber nada de código CSS. Este plugin es completamente gratuito y se encuentra en el repositorio de WordPress, lo podemos buscar como Divi Contact Form 7 (anteriormente llamado CF7 styler for Divi) y es de la gente de Divi People:

Debemos instalar el plugin y activarlo en nuestro sitio para poder empezar a usarlo.

Personaliza los estilos de tu formulario con Divi Contact Form 7

Personalizar los estilos de formulario de contacto de CF7 con Divi ya es tarea sencilla a partir de ac√°. Como primer paso podemos escoger directamente desde el constructor visual de Divi cualquier formulario que hayamos creado en contact form 7 anteriormente, pues dentro de constructor aparecer√° un nuevo bloque con el que lo podremos traer directamente al constructor:

Divi contact form 7

Una vez que hayamos insertado el formulario de CF7 en la parte del sitio donde lo queramos, podemos entrar a las opciones de dise√Īo y ahora si, personalizar todo lo que queramos:

Resultado: Personalizar el formulario de Contact Form 7 en Divi

Podremos cambiar el color de los campos, de los bordes, la tipograf√≠a, el fondo, el ancho del bot√≥n, el color del bot√≥n, y montones de opciones m√°s, todo desde la misma pesta√Īa de dise√Īo del m√≥dulo del formulario de contacto de contact form 7.

Es tal como si estuviéramos editando el formulario de contacto nativo de Divi, pero en este punto, editando el formulario de contact form 7 propiamente.

Demo del resultado

Como puedes ver acá, el resultado puede ser tan estético como si estuviéramos editando un formulario nativo de Divi.

Demo del resultado de personalizacion

Cambiamos muchos valores de dise√Īo y personalizamos completamente todos los estilos del formulario de contacto con contact form 7.

Conclusiones

Contact Form 7 es una opción muy interesante si quieres crear formularios avanzados que tengan conexión con muchas otras herramientas, en este caso, muchos usuarios usan CF7 para poder crear formularios con bases de datos en Divi.

Aprende a personalizar el formulario de suscripción Optin de Divi con unas pocas líneas de código.

La limitante es que los estilos de estos formularios no se alinean con los estilos del sitio, es por ello que personalizar los estilos de los formularios de contacto con Divi CF7 es una gran alternativa para lograr este objetivo, y lo mejor, es que no se necesitan conocimientos de código para poder lograrlo.

¬ŅQu√© te ha parecido esta soluci√≥n? D√©jalo por ac√° en los comentarios en la parte inferior, y no olvides compartir este contenido en tus redes sociales con los botones disponibles ac√° abajo ūüĎá

Artículos relacionados

Comentarios

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  1. Hola Jefferson una vez que tu le das estilo al formulario solo va a funcionar en la p√°gina donde le diste los estilos o como CF7 trabaja con shortcode, si utilizas ese shortcode en otra p√°gina sigue teniendo los estilos?

    Saludos y gracias por este tutorial

    1. Hola Miriam, un gusto saludarte.
      Esto dependerá de donde coloques el código CSS para los estilos, si los colocas en las opciones generales de Divi, entonces no importará en que parte del sitio coloques el shortcode con el formulario, tomará todos los estilos siempre.
      Espero que esta info te sea de ayuda.¬†Para cualquier otra cosa, aqu√≠ me tienes ūüėČūüĖź

¡Registrate en nuestro próximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas m√°s frecuentes que los usuarios hacen sobre Divi, adem√°s de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
10
días
10
horas
10
minutos
10
segundos
¡Registrate en nuestro próximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
10
días
10
hrs
10
min
10
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¬ŅA√ļn no eres miembro Premium ‚≠ź de UXDivi? ¬°Esta es tu oportunidad de oro! √önete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
10
días
10
horas
10
minutos
10
segundos
25% OFF BLACK FRIDAY SALE!
10
días
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
10
días
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!