Diseñar formularios de Caldera para que se parezcan al formulario de contacto de Divi (+ Aspectos adicionales)

Caldera Forms es uno de los complementos de formulario más populares y mejor calificados (GRATIS) en el repositorio de WordPress. Su interfaz de usuario de arrastrar y soltar hace que sea increíblemente fácil crear todo tipo de formularios. Si está acostumbrado a usar el constructor Divi , entonces el constructor Caldera debería resultarle bastante natural.

Cómo hacer que una forma de caldera se vea como Divi

Suscríbete a nuestro canal de Youtube

El estilo Divi se ha convertido en uno de los estilos más reconocibles entre los temas de WordPress más populares en la actualidad. Divi a menudo se elige por su apariencia limpia y minimalista, por lo que no es de extrañar que los usuarios quieran diseñar complementos de terceros para que se vean como él.

Así es como se ve el formulario de contacto de Divi antes de que se aplique cualquier configuración de estilo o módulo:

Y este es el formulario de inicio básico con el que viene listo el complemento de Caldera:

Como puede ver, deberá jugar con el ancho de las columnas, eliminar algunos de los campos de encabezado de Caldera y eliminar las etiquetas de encima de los campos y reemplazarlos con marcadores de posición si desea que se vea lo más cerca posible de Divi (o si puede comenzar el suyo propio desde cero). Los dos primeros cambios los puede hacer por su cuenta, es posible que desee conservar los encabezados y el texto, pero le mostraré cómo agregar marcadores de posición en los campos y le daré el CSS para que se vea como el formulario de Divi.

Agregar marcadores de posición a los campos

Así es como se ve la forma inicial básica de Caldera en el backend. Tómese un tiempo para familiarizarse con él, mueva las cosas y vea lo que hacen; aprender haciendo. Si lo necesita, siempre puede comenzar de nuevo con un nuevo formulario de inicio después.

Siempre que tenga texto de entrada en su formulario es donde querrá usar marcadores de posición en su lugar. Usaré el módulo de correo electrónico como mi ejemplo. Desea marcar la casilla que dice «ocultar etiqueta» y completar el campo titulado «marcador de posición» .

Cuando tenga su formulario como lo desea, guárdelo. Luego, agréguelo usando un módulo de texto Divi a su página (aparecerá un ingenioso botón de Caldera en su editor de texto).

El código CSS

A continuación, deberá agregar el siguiente CSS a su panel de CSS personalizado de opciones de Divi O a la hoja de estilo de su tema secundario :

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
26
27
28
/*** THIS CHANGES THE LOOK OF THE FORM FIELDS ***/
.caldera-grid .form-control {
 padding: 16px;
 height: auto;
 box-shadow: none;
 background: #eee;
 color: #999;
 border: none;
}
 
/*** THIS CHANGES THE BUTTON STYLE ***/
.caldera-grid input[type=submit] {
 padding: 10px 20px;
 border-radius: 2px;
 background: transparent;
 color: #2ea3f2;
 font-size: 20px;
 border: 2px solid #2ea3f2;
 float: right;
 transition: all 0.3s ease-in-out;
}
 
/*** THIS CHANGES THE BUTTON HOVER STYLE ***/
.caldera-grid input[type=submit]:hover {
 background: rgba(0, 0, 0, 0.05);
 border-color: transparent;
 color: #2ea3f2;
}

No necesitaba !important en ninguna parte aquí, pero si ve que algo no se aplica, intente agregarlo.

Y listo, deberías terminar con un formulario de contacto que se ve idéntico al formulario de contacto de Divi:

¡Apariencia adicional!

Voy a darte algo de CSS que puedes usar para lograr tres looks más. Querrá colocar este código exactamente en el mismo lugar donde colocó el código anterior: ya sea dentro del Panel CSS personalizado de Divi con Opciones de tema o en la hoja de estilo de su tema secundario. Obviamente, no querrá que dos de estos estilos estén activos al mismo tiempo, así que solo use uno de estos bloques de css a la vez.

Estilo 1: Forma fantasma

El primero es muy popular, usa una imagen de fondo con campos de formulario transparentes para un efecto transparente, estoy colocando el área de la imagen de fondo en la sección Divi . Tenga en cuenta que querrá considerar la legibilidad al elegir su imagen, una imagen más oscura sería mejor en este caso:

El código CSS

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/*** THIS CHANGES THE LOOK OF THE FORM FIELDS ***/
.caldera-grid .form-control {
 padding: 16px;
 height: auto;
 box-shadow: none;
 background: transparent;
 color: #fff;
 border: 2px solid #fff;
}
 
/*** THIS CHANGES THE BUTTON STYLE ***/
.caldera-grid input[type=submit] {
 padding: 10px 16px;
 border-radius: 2px;
 background: transparent;
 color: #fff;
 font-size: 20px;
 border: 2px solid #fff;
 float: right;
 transition: all 0.3s ease-in-out;
}
 
/*** THIS CHANGES THE BUTTON HOVER STYLE ***/
.caldera-grid input[type=submit]:hover {
 background: rgba(255,255,255, 0.2);
 border-color: transparent;
 color: #fff;
}
 
.caldera-grid .form-control:focus {
 border-color: #fff;
 box-shadow: inset 0 1px 1px rgba(255, 255, 255, .075), 0 0 8px rgba(255, 255, 255, .6);
}
 
/*** THIS CHANGES THE PLACEHOLDER TEXT COLOR WHICH IS IMPORTANT FOR THIS PARTICULAR STYLE ***/
input::-webkit-input-placeholder {
 color: #fff !important;
}
input:-moz-placeholder {
 /* Firefox 18- */
 color: #fff !important;
}
input::-moz-placeholder {
 /* Firefox 19+ */
 color: #fff !important;
}
input:-ms-input-placeholder {
 color: #fff !important;
}
textarea::-webkit-input-placeholder {
 color: #fff !important;
}
textarea:-moz-placeholder {
 /* Firefox 18- */
 color: #fff !important;
}
textarea::-moz-placeholder {
 /* Firefox 19+ */
 color: #fff !important;
}
textarea:-ms-input-placeholder {
 color: #fff !important;
}

Es posible que se pregunte por qué no se condensa ese último bit de CSS para el texto del marcador de posición. Bueno, cuando lo condensé dejó de funcionar jajaja, no estoy seguro de por qué, pero siéntete libre de jugar.

Estilo 2: variante de forma fantasma

Esto es similar al aspecto anterior, pero en lugar de campos completamente transparentes, haremos que tengan una opacidad oscura. Esto le dará un poco más de libertad a la hora de elegir su foto porque esta opacidad ayuda a resolver el problema de la legibilidad.

El código CSS

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
26
27
28
29
30
31
32
33
34
/*** THIS CHANGES THE LOOK OF THE FORM FIELDS - I RAISED THE FONT SIZE THIS TIME ***/
.caldera-grid .form-control {
    font-size: 22px;
    padding: 16px;
    height: auto;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.7);
    color: #f5f5f5;
    border: none;
}
 
/*** THIS CHANGES THE BUTTON STYLE ***/
.caldera-grid input[type=submit] {
    padding: 10px 16px;
    border-radius: 4px;
    background: #27c9b8;
    color: #fff;
    font-size: 20px;
    border: none;
    float: right;
    transition: all 0.3s ease-in-out;
}
 
/*** THIS CHANGES THE BUTTON HOVER STYLE ***/
.caldera-grid input[type=submit]:hover {
    background: #f15640;
    color: #333;
}
 
/*** THIS REMOVES THE GLOW EFFECT COMPLETELY ***/
.caldera-grid .form-control:focus {
    border-color: transparent;
    box-shadow: none;
}

Estilo 3: solo borde inferior del campo de texto

Por último, este ejemplo muestra los campos con solo un borde inferior. Este aspecto es muy elegante y bastante moderno en este momento. Puede ver que cuando el usuario está escribiendo su texto, el borde inferior cambia a un color más claro, un detalle muy pequeño pero agradable.

El código CSS

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
26
27
28
29
30
31
32
33
34
35
36
37
/*** THIS CHANGES THE LOOK OF THE FORM FIELDS ***/
.caldera-grid .form-control {
    font-size: 22px;
    padding: 16px;
    height: auto;
    box-shadow: none;
    border-radius: 0!important;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #333;
}
 
/*** THIS CHANGES THE BUTTON STYLE ***/
.caldera-grid input[type=submit] {
    text-transform: uppercase;
    padding: 10px 16px;
    border-radius: 0;
    background: #dd0000;
    color: #000;
    font-size: 20px;
    border: none;
    float: right;
    transition: all 0.3s ease-in-out;
}
 
/*** THIS CHANGES THE BUTTON HOVER STYLE ***/
.caldera-grid input[type=submit]:hover {
    background: #000;
    color: #f5f5f5;
}
 
/*** THIS CHANGES THE BOTTOM BORDER COLOR WHILE USER IS TYPING ***/
.caldera-grid .form-control:focus {
    border-color: #e0e0e0;
    box-shadow: none;
}

Pensamiento final

Espero que hayas disfrutado de estos ejemplos y puedas usar estos fragmentos de CSS para ayudarte a diseñar tus formularios de Caldera . Estos son geniales tal como están, pero jugar y agregarles puede dar como resultado un aspecto realmente divertido, ¡disfrútalo!