Cuando se trata de complementos de formulario de WordPress, hay bastantes opciones para elegir. En un tutorial anterior de Elegant Themes, compartí algunos fragmentos de CSS para diseñar el complemento Caldera Forms . Caldera es una excelente opción de complemento de creación de formularios gratuitos, pero hoy compartiremos algunos consejos de estilo para Gravity Forms . Gravity Forms es uno de los complementos de creación de formularios premium más populares (si no el) para sitios web de WordPress.
Dado que esta publicación es realmente un tutorial de diseño, no voy a profundizar en el complemento en sí, pero ya hay varias publicaciones realmente buenas en nuestro blog que hacen eso:
- Gravity Forms: una mirada detallada a la edición personal
- Gravity Forms: una solución completa de formularios para WordPress
- Comparación de los 15 mejores complementos de formularios de contacto de WordPress
Por lo tanto, es posible que se pregunte por qué alguien necesitaría o desearía cambiar el estilo de su formulario desde el aspecto predeterminado en primer lugar. Aquí hay algunas razones:
- Hacer que sus formularios coincidan con la apariencia de su sitio web : si bien la mayoría de los formularios de complementos tienen una apariencia limpia que realmente podría encajar bien en cualquier sitio web, tienden a tener un aspecto muy genérico. Hacer coincidir los elementos de su sitio entre sí muestra que está prestando atención a los detalles y se preocupa por unir todo en un nivel estético.
- Para darle a su formulario un aspecto más personalizado : en cualquier momento, puede personalizar partes de su sitio web para diferenciarse y darle un poco de singularidad.
- La singularidad puede mostrar autoridad o nivel de habilidad : si eres una agencia de diseño web o un trabajador independiente, por supuesto, mostrar tus habilidades en tu propio sitio muestra a tus visitantes que eres capaz de cierto nivel de personalización del diseño, lo que a su vez puede llevar a adquirir más clientes.
- ¡Aprender! — Cada vez que usa fragmentos de CSS de nuestro blog para diseñar cualquier elemento de su sitio, se abre a una forma de aprender a codificar. Es posible que no tenga un interés personal en eso, y eso está bien, pero si lo tiene, es genial leer los comentarios en el CSS y aprender qué fragmentos de código controlan qué parte de la apariencia en la interfaz.
¡En el estilo!
Suscríbete a nuestro canal de Youtube
Estilo 1: El look Divi
El primer estilo que implementaremos es, por supuesto, el estilo Divi . Divi se ha vuelto muy conocido por su enfoque de diseño limpio y minimalista y a muchos usuarios les gustaría que sus formularios se crearan con un complemento de terceros para parecerse a Divi. Usando nuestra primera porción de fragmentos de CSS, este es el aspecto que logrará.
Configuración previa a CSS
Gravity Forms es un generador de formularios de arrastrar y soltar, por lo que debe tener sus campos Nombre, Correo electrónico y Mensaje (texto de párrafo) arrastrados a los lugares apropiados. Su formulario puede verse así en el backend:
El primer paso para lograr este aspecto en realidad viene antes de agregar cualquier CSS. Vamos a limitar el campo a un solo campo de nombre, por lo que en la pestaña General, seleccione solo el primer campo para mostrar .
Como vio en nuestra imagen de ejemplo arriba, las etiquetas están dentro del campo, se denominan «marcadores de posición». A continuación, vaya a la pestaña Apariencia > introduzca el texto de marcador de posición que desea que aparezca .
También voy a usar dos de las clases preparadas de Gravity para hacer columnas (por defecto, cada campo tiene una columna de ancho). Con estos le digo al formulario qué va en la columna de la izquierda y qué campo va en la columna de la derecha. Como quiero el nombre a la izquierda, estoy ingresando la clase «gf_left_half» en el campo Clase CSS personalizada .
Voy a hacer lo mismo con el campo de correo electrónico pero esta vez lo quiero en la columna derecha, así que usaré la clase “gf_right_half”
El código CSS
Lo siguiente va en su cuadro Opciones de Divi > CSS personalizado (en la parte inferior de la página) o en su hoja de estilo secundaria .
|
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
|
/*** REMOVE LABEL ON FIELDS USING PLACEHOLDER ***/.gform_wrapper .top_label .gfield_label,.gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label { display: none;}/*** FIELD STYLING ***/input[type=text],textarea { background: #eee; border: none; border-radius: 0; color: #999 !important; padding: 15px !important;}/*** BUTTON STYLING ***/.gform_wrapper .gform_footer input.button { float: right; background: transparent; border: 2px solid #2ea3f2; font-size: 22px; color: #2ea3f2; padding: 12px 23px; border-radius: 5px; letter-spacing: 2px; cursor: pointer;}/*** BUTTON HOVER STYLING ***/.gform_wrapper .gform_footer input.button:hover { background: rgba(0, 0, 0, 0.05); border: 2px solid transparent;} |
¡Ahora debería tener un formulario de contacto simple (o cualquier tipo de formulario que haya creado) que tenga ese aspecto memorable de Divi!
¡Estilos adicionales usando la fuente del icono de Elegant Themes y más!
También daré algunos fragmentos de CSS más para lograr dos aspectos adicionales. El objetivo de estos fragmentos es tener un punto de partida, por lo que incluso si solo sabe cómo cambiar el color de la fuente y el color de fondo, a veces eso es todo lo que realmente necesita.
Al igual que con el primer ejemplo, todo el código CSS puede ir dentro del Panel CSS personalizado de Divi en las Opciones de tema o en la hoja de estilo del tema de su hijo.
Estilo 2: Diseño de materiales
Material Design es una tendencia que ha llegado para quedarse. Para ser honesto, es más que una simple tendencia, es realmente un conjunto de pautas de estilo que se están implementando en mucho más que solo diseño web, pero puede obtener más información al respecto en una de nuestras publicaciones de blog recientes aquí y en el sitio web oficial . aquí _
He incluido solo un poco de animación en este, ya que es una característica distintiva del diseño de materiales. Sin embargo, con el diseño de materiales, la animación no solo se usa para el atractivo visual, sino que intenta cumplir un propósito funcional adicional cuando es posible.
Así que aquí mi cuadro de mensaje es tan alto, pero cuando el usuario hace clic en él, el cuadro se expande automáticamente y permite más espacio sin tener que arrastrar manualmente la pequeña esquina hacia abajo. Algunos dirían que más espacio atrae un mensaje más largo y más elaborado, pero eso se lo dejamos a los psicólogos del diseño.
Aquí está el resultado final que tendremos con el CSS correspondiente:
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
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
/*** MAIN GRAVITY WRAPPER ***/.gform_wrapper { background: #6000AA; padding: 5%;}/*** REMOVE LABEL ON FIELDS USING PLACEHOLDER ***/.gform_wrapper .top_label .gfield_label,.gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label { display: none;}/*** FIELD STYLING ***/.gform_wrapper ul.gform_fields li.gfield,.gform_wrapper .top_label li.gfield.gf_right_half { padding-right: 0;}input[type=text],textarea { background: #8300E9; border: none; border-radius: 0; color: #fff !important; font-weight: 700 !important; letter-spacing: 2px !important; padding: 17px 15px !important;}/*** FIELD FOCUS STYLING ***/input[type=text]:focus,input.text:focus,input.title:focus,textarea:focus { box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2);}/*** MESSAGE BOX TRANSITION ***/.gform_wrapper textarea.medium { margin-top: 6px; height: 10em; transition: height .3s ease-out;}/*** MESSAGE BOX FOCUS HEIGHT ***/.gform_wrapper textarea.medium:focus { height: 25em;}/*** BUTTON STYLING ***/.gform_wrapper .gform_footer input.button,.gform_wrapper .gform_footer input[type=submit] { width: 100%;}.gform_wrapper input[type=submit] { cursor: pointer; text-transform: uppercase; font-weight: 700; letter-spacing: 2px; padding: 10px 12px; border-radius: 0; background: #19ffc0; color: rgba(0, 0, 0, 0.5); border: none; transition: box-shadow .2s ease-in-out;}/*** BUTTON HOVER STYLING ***/.gform_wrapper input[type=submit]:hover { background: #f2bf2f; color: #fff; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2);}/*** PLACEHOLDER ***/::-webkit-input-placeholder { /* Chrome */ color: rgba(255, 255, 255, 0.7) !important;}:-ms-input-placeholder { /* IE 10+ */ color: rgba(255, 255, 255, 0.7) !important;}::-moz-placeholder { /* Firefox 19+ */ color: rgba(255, 255, 255, 0.7) !important;}:-moz-placeholder { /* Firefox 4 - 18 */ color: rgba(255, 255, 255, 0.7) !important;} |
** Tenga en cuenta que estoy usando esas clases de columna izquierda y derecha en mi formulario como lo hice en el primer ejemplo, por lo que es posible que desee hacerlo también si le gusta cómo se distribuyen mis campos, y no se olvide de cambiar los códigos hexadecimales de color para que coincidan con su sitio.
Este en realidad viene bastante repleto de excelentes extras
Así que primero tengo que dar crédito donde se debe. Encontré un increíble tutorial en línea para implementar la fuente Elegant Themes para su uso en botones de radio y casillas de verificación aquí , y simplemente estoy modificando los increíbles fragmentos de código de este tipo.
Este es el aspecto del formulario que tendremos después de configurar nuestra imagen de fondo y agregar el CSS:
Configuración previa a CSS
Como puede ver, este aspecto de formulario tiene una imagen de fondo , un fondo de formulario opaco y utiliza encabezados de sección . Dos de esos elementos deben configurarse primero (el fondo opaco se maneja con CSS, por lo que sucederá automáticamente cuando agregue el código).
En su sección principal querrá agregar su imagen de fondo.
En su formulario, querrá agregar una sección y editar su encabezado (esto es opcional, por cierto).
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
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
/*** MAIN FORM WRAPPER ***/.gform_wrapper { background: rgba(255, 255, 255, 0.95); padding: 5%;}/*** GRAVITY FIELDS ***/.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),.gform_wrapper textarea.medium,.gform_wrapper textarea.large { background: rgba(0, 0, 0, 0); border-top: none; border-left: none; border-right: none; border-bottom: 2px solid #000; border-radius: 0px !important;}.gform_wrapper ul.gform_fields li.gfield { margin-bottom: 20px;}input[type=text]:focus,input.text:focus,input.title:focus,textarea:focus { border-bottom: 2px solid #b5b5b5 !important;}/*** BUTTON STYLING ***/.gform_wrapper .gform_footer input.button,.gform_wrapper .gform_footer input[type=submit] { background: #A2D400; text-transform: uppercase; border: 2px solid #1d1d1d; padding: 7px 12px; cursor: pointer; font-size: 18px; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s; border-radius: 0 !important;}/*** BUTTON HOVER STYLING ***/.gform_wrapper .gform_footer input.button:hover,.gform_wrapper .gform_footer input[type=submit]:hover { background: #1d1d1d; color: #fff;}/*** SECTION STYLING ***/.gform_wrapper h2.gsection_title { font-weight: normal; font-size: 2em;}.gform_wrapper .gsection { padding: 20px !important; border-bottom: none; background: #A2D400;}/*** GRAVITY RADIO AND CHECKBOXES ***/.gform_wrapper ul.gfield_checkbox li input[type=checkbox],.gform_wrapper ul.gfield_radio li input[type=radio] { visibility: hidden; margin: 0; width: 0!important;}.gform_wrapper input[type=checkbox] + label,.gform_wrapper input[type=radio] + label { font-size: 16px;}input[type=checkbox] + label:hover,input[type=radio] + label:hover { cursor: pointer;}input[type=checkbox] + label:before,input[type=radio] + label:before { font-family: "ETmodules" !important; font-size: 30px; position: relative; top: 0.3em; margin-right: 0.2em;}.gform_wrapper li.gf_list_inline ul.gfield_checkbox li,.gform_wrapper li.gf_list_inline ul.gfield_radio li { display: -moz-inline; display: inline;}input[type=checkbox] + label:before { content: ' 56';}input[type=checkbox] + label:hover:before { content: ' 5a'; filter: alpha(opacity=40); opacity: 0.4;}input[type=checkbox]:checked + label:before { content: ' 5a'; color: #A2D400;}input[type=checkbox]:checked + label:hover:before { color: #A2D400; filter: alpha(opacity=100); opacity: 1;}input[type=radio] + label:before { content: ' 5b';}input[type=radio] + label:hover:before { content: ' 5c'; filter: alpha(opacity=40); opacity: 0.4;}input[type=radio]:checked + label:before { content: ' 5c'; color: #A2D400;}input[type=radio]:checked + label:hover:before { color: #A2D400; filter: alpha(opacity=100); opacity: 1;}.gform_wrapper ul.gfield_checkbox li input[type=checkbox]:checked+label,.gform_wrapper ul.gfield_radio li input[type=radio]:checked+label { font-weight: normal;}/*** SUCCESS MESSAGE ***/.gform_confirmation_wrapper { background: #fff; padding: 15px;} |
Si desea cambiar el ícono, consulte la publicación de referencia de fuentes de Elegant Themes . Aquí hay una captura de pantalla de los íconos que elegí y cuando miras el CSS verás cómo ingresé el código correcto.
Para concluir
Bueno, eso es todo por este tutorial. Espero que ahora se sienta capacitado para diseñar los formularios de su propio sitio web para que realmente se destaque y ayude a reflejar la estética general que está tratando de representar. Suscríbase para asegurarse de no perderse todos los excelentes recursos que brindamos constantemente. Y si tiene alguna pregunta sobre este tutorial, no dude en preguntarme en los comentarios a continuación.