El módulo de formulario de contacto de Divi facilita que los visitantes del sitio web se comuniquen con usted y que usted recopile información de sus visitantes.
De forma predeterminada, las etiquetas de campo del módulo de formulario de contacto de Divi se muestran dentro de los campos de entrada. Sin embargo, a veces, es posible que desee mostrar las etiquetas encima de los campos del formulario de contacto. En este tutorial, le mostraremos cómo lograrlo con un poco de CSS.
Nuestro objetivo hoy es pasar de esto:
A esto:
¡Pongámonos a trabajar!
Cómo agregar etiquetas encima de los campos en el módulo de formulario de contacto de Divi
Para esta demostración, utilizaremos el diseño de la página de contacto del Paquete de diseño de destilería de whisky gratuito . Si no está familiarizado con cómo cargar paquetes de diseño prefabricados, consulte esta publicación de blog: Cómo usar un paquete de diseño prefabricado en su sitio web Divi .
Hay dos formas en que podemos ingresar CSS personalizado en su sitio web Divi: a través del Personalizador de temas, que afectará a todos los formularios de contacto en su sitio web, o por página en la configuración de la página, lo que afectará a los formularios de contacto individuales. Primero, probaremos el método por página y luego le mostraré cómo agregar el CSS globalmente.
Primero, navegue a la página de su formulario de contacto y habilite Visual Builder.
Expanda la barra de herramientas de Divi en la parte inferior de la página y haga clic en el ícono de ajustes para abrir la configuración de la página. Luego navegue a Avanzado > CSS personalizado y copie y pegue el código CSS.
Este es el código CSS que tendrás que copiar y pegar en el cuadro CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
/* Displays titles above the fields */.et_pb_contact_form_label { display: block;}/* Hides placeholder text */.et_pb_contact_form_container .input::placeholder { color: transparent;}/* Hides duplicate titles on checkboxes and radios */.et_pb_contact_field_options_title { display: none;} |
Esto es lo que tenemos hasta ahora. Notarás que nuestro estilo de fuente no se transfiere y ahora hay un título duplicado sobre el campo desplegable.
Entonces, para arreglar eso, agregaremos un estilo de fuente CSS al código y algunas líneas más de código para eliminar el título duplicado sobre el campo desplegable.
Aquí está el código final actualizado :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
|
/* Displays titles above the fields */.et_pb_contact_form_label { display: block; font-family: 'Playfair Display'; color: #E7E2BC; font-size: 15pt; font-style: italic; margin-bottom: 15px;}/* Hides placeholder text */.et_pb_contact_form_container .input::placeholder { color: transparent;}/* Hides duplicate titles on checkboxes and radios */.et_pb_contact_field_options_title { display: none;}/* Remove title above dropdown */.et_pb_contact_field[data-type=select] .et_pb_contact_form_label { display: none;} |
¡Y aquí está el resultado final!
Haciendo esto globalmente
Agregar el código globalmente afectará a todos los formularios de contacto en su sitio web. Si desea que los cambios se apliquen solo a un formulario de contacto específico, deberá agregar una ID de CSS al módulo en la pestaña avanzada. Después de hacerlo, coloque el «#» + su ID de CSS delante de cada clase de CSS a la que se dirige en el código.
Hay tres lugares donde puede agregar el código CSS para que tenga efecto globalmente. A la hoja de estilo style.css de su tema hijo:
O el bloque CSS personalizado en Divi > Opciones de tema :
O al Personalizador de temas:
¡Y eso es!
Más recursos
Hay tantas maneras de diseñar el módulo del formulario de contacto para personalizarlo. ¡Mira estos otros tutoriales en el formulario de contacto para comenzar!
- 5 formas únicas de diseñar el módulo de formulario de contacto de Divi
- Cómo revelar un menú desplegable de opciones después de marcar una casilla en su formulario de contacto Divi
- Cómo agregar un formulario de contacto adhesivo a su página