Cómo formatear un formulario Contact Form 7 en Divi

Quien soy
Philippe Gloaguen
@philippegloaguen
FUENTES CONSULTADAS:

support.google.com, support.apple.com

Autor y referencias

A menudo, este tipo de páginas traen consigo muchos pequeños detalles que cubrir, como por ejemplo, cómo se pueden filtrar los productos en el motor de búsqueda o diseños publicitarios relacionados.

Dicho esto, podemos darnos cuenta cuando el nivel de detalle para poder cubrir dentro de nuestra propia sitios web. Sin embargo, todo depende del nivel de la creatividad que tengamos que participar en nuestro sitio web. Porque antes te vamos a contar un detallito que puedes cubrir en unos minutos, y este es el Formulario de contacto 7.



ContactForm 7 es uno de los complementos de formulario más utilizados por usuarios de diferentes páginas web. Esto se debe a que es una forma muy eficiente para que nuestros visitantes interactúen con nosotros a través de una página de contacto u otra ubicación.

Pero tienes el pequeño detalle de que muchas veces resulta ser un plugin de encuestas bastante básico, hasta el punto de que muchos consideran que su apariencia es bastante. desagradable. Es por eso que debemos pensar en mejores formas de adaptar este complemento popular a nuestro tema.

Con esto último en mente, podemos mencionar a Divi como uno de los temas más populares en WordPress y por su estética. Es realmente genial de ver. Por esta razón, puede resultar un poco molesto utilizar Formulario de contacto 7 dentro de una página web con Divi, porque los dos estilos no coinciden.

Es por eso que tenemos que formatear ContactForm 7 para que se pueda ver en el mismo sentido estético que Divi. Vea a continuación cómo puede hacerlo.

Personalización de ContactForm 7 para Divi

De hecho, ser capaz de utilizar Formulario de contacto 7 es una bendición cuando queremos recibir un mensaje de nuestros visitantes y poder interactuar con ellos si así lo deseamos. pero si tenemos divi como tema, podríamos tener el pequeño problema de encontrar que este complemento no coincide en absoluto con nuestro tema.



Es por eso que necesitamos reformular el aspecto de ContactForm 7 y adaptarlo al aspecto de Divi. Podemos hacerlo de una forma muy sencilla. Para ello, debemos entrar en el menú. divi y luego en la opción que aparece como "Opciones de tema", aquí encontraremos el CO personalizado Dentro de este tendremos que insertar lo siguiente código.

.wpcf7-text,.wpcf7-textarea,.wpcf7-captchar {

color de fondo: #eee!importante;

borde: ninguno! importante;

ancho: 100%! importante;

-moz-border-radio: 0! importante;

-webkit-border-radius: 0!importante;

borde-radio: 0! importante;

tamaño de fuente: 14px;

color: #999! importante;

relleno: 16px! importante;

-moz-box-sizing: border-box;

-sizing-box-webkit: marco-borde;

tamaño de caja: cuadro de borde;

}

.wpcf7-enviar {

color: # 8B3C90! importante;

margen: 8px automático 0;

cursor: puntero;

tamaño de fuente: 20px;

peso de fuente: 500;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

radio del borde: 3px;

relleno: 6px 20px;

altura de línea: 1,7 cm;


fondo: transparente;

borde: sólido 2px;

-webkit-font-smoothing: suavizado;

-moz-osx-font-smoothing: escala de grises;

-moz-transición: todos los 0.2s;

- traducción de webkit: todo 0.2s;

transición: todo 0.2s;

}

.wpcf7-enviar: desplazar {

color de fondo: #eee;

color del borde: #eee;

relleno: 6px 20px! importante;

}

Tenga en cuenta que cada uno de los lugares donde dice #eee e #8B3C90, tendrás que cambiarlo para poder personalizar más los colores según los que uses en tu página web. Ahora solo tienes que usar el constructor Divi para poder personalizar el formulario.


¿Por qué no utilizar otras alternativas?

Quizás se pregunte por qué no debería hacer un mejor uso de la herramienta de formulario de contacto que viene con Divi. La respuesta a esta pregunta es que en realidad no es tan útil como usar ContactForm 7, no tiene muchos opciones y no es tan intuitivo y directo. Por eso es mejor quedarse con ContactForm 7 y cambiarlo según sea necesario.

EtiquetasTutorial
Añade un comentario de Cómo formatear un formulario Contact Form 7 en Divi
¡Comentario enviado con éxito! Lo revisaremos en las próximas horas.