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

Como alinear horizontal los checkboxes y botones de radio en los formularios de contacto de Divi

En este tutorial gratuito te mostraremos como alinear de forma horizontal los checkboxes y botones de radio en los formularios de contacto de Divi. Si…

Comentarios

  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!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
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.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →