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!
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:
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:
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:
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.
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 👇
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
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 😉🖐
Hola Mr Jeff.
¿Cómo puedo colocar el “Acepto política de privacidad”, al final del formulario, y enviar solo si la acepta el usuario?
Gracias Mil
Que tal Wilmer, deberías poder crear una casilla condicional. Con ello podrás activar lo que necesitas.