Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)
Es posible que hayas visto formularios en los que el texto marcador de posición es animado cuando comienzas a escribir en ese campo de entrada. Este patrón no es nuevo, pero sigue siendo una tendencia popular en el diseño de formularios enfocado a la experiencia de usuario.
Hoy aprenderemos los pasos necesarios para añadir este comportamiento en un formulario creado con Contact Form 7 (CF7), uno de los complementos más populares para formularios de contacto de WordPress disponible.
Lo que vamos a construir
Aquí puedes ver una demostración rápida en video del formulario de WordPress en acción:
Nota: este tutorial asume que estás en cierto modo familiarizado con WordPress y Contact Form 7.
Complementos para Contact Form 7 en CodeCanyon
¿Estás interesado en extender tu Contact Form 7 de forma rápida y sencilla? CodeCanyon alberga una gran cantidad de scripts y complementos para llevar tus formularios CF7 al siguiente nivel. Por ejemplo, Multi Step for Contact Form 7 Pro (Múltiples pasos para Contact Form 7 Pro) es una excelente forma de mejorar la experiencia de usuario de tus formularios largos:
Dicho eso, suponiendo que ya has instalado Contact Form 7 en un proyecto de WordPress, regresemos al tutorial y discutamos los pasos necesarios para animar las etiquetas de nuestro formulario CF7.
1. Elimina las etiquetas innecesarias
El primer paso es eliminar las etiquetas adicionales que Contact Form 7 agrega al formulario.
Para hacer esto, vamos a establecer el valor de la constante WPCF7_AUTOP en false en el archivo wp-config.php, de esta forma:
2. Crea el formulario de contacto
El segundo paso es crear el formulario desde el panel de control de WordPress.
Usaremos una combinación de códigos cortos de Contact Form 7 junto con un poco de HTML personalizado.
El formulario estará compuesto por dos elementos input, un elemento textarea y un botón de envío. Además, asociaremos cada uno de los elementos input y textarea con un elemento label. Cada elemento label se comportará como un marcador de posición.
Este es el código que tenemos que agregar al editor de Contact Form 7:
1 |
<h1>Contact Us</h1> |
2 |
<ul>
|
3 |
<li class="form-wrapper"> |
4 |
[text* your-fullname id:your-fullname] |
5 |
<label for="your-fullname">Full Name</label> |
6 |
</li>
|
7 |
<li class="form-wrapper"> |
8 |
[email* your-email id:your-email] |
9 |
<label for="your-email">Email</label> |
10 |
</li>
|
11 |
<li class="form-wrapper form-textarea-wrapper"> |
12 |
[textarea* your-message id:your-message] |
13 |
<label for="your-message">Message</label> |
14 |
</li>
|
15 |
<li class="form-wrapper form-submit-wrapper"> |
16 |
[submit "Submit"] |
17 |
<svg width="24" height="24" viewBox="0 0 24 24"> |
18 |
<path d="M24 21h-24v-18h24v18zm-23-16.477v15.477h22v-15.477l-10.999 10-11.001-10zm21.089-.523h-20.176l10.088 9.171 10.088-9.171z"/> |
19 |
</svg>
|
20 |
</li>
|
21 |
</ul>
|
3. Agrega los estilos de formulario CSS
Para continuar, pondremos en cola un nuevo archivo CSS en el archivo functions.php de nuestro proyecto, de esta forma (aunque tu carpeta destino puede diferir):
1 |
wp_enqueue_style( 'custom', get_template_directory_uri() . '/assets/css/custom.css' ); |
En su interior, colocaremos un grupo de estilos:
- Comenzaremos con algunos de restablecimiento (genéricos). Solo para hacer que el formulario se vea un poco más atractivo, usaremos una fuente de Google personalizada. Asegúrate de poner esta fuente en cola si quieres usarla en tu proyecto.
- A continuación, definiremos los estilos principales para nuestro formulario. Como veremos más adelante, el formulario recibirá la clase
form-with-animated-labels. Esto nos ayudará a aislarla y evitar conflictos con otros estilos. - Finalmente, personalizaremos un poco la apariencia de algunos de los mensajes de respuesta de CF7.
Lo más importante es que eches un vistazo a la manera en la que estilizamos las etiquetas. Estos son elementos con una posición absoluta y centrados verticalmente en el interior de su padre .form-wrapper. Como veremos en un momento, cuando su elemento relacionado del formulario recibe el foco, estos se moverán encima de él a través de la clase focused.
Aquí están todos los estilos requeridos:
1 |
/* RESET RULES & INITIAL SET UP
|
2 |
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
3 |
:root { |
4 |
--white: #fff; |
5 |
--black: #222; |
6 |
--brown: #9f4631; |
7 |
--gray: #9a9a9a; |
8 |
--lightgray: #f2f3f5; |
9 |
}
|
10 |
|
11 |
* { |
12 |
padding: 0; |
13 |
margin: 0; |
14 |
box-sizing: border-box; |
15 |
border: none; |
16 |
outline: none; |
17 |
}
|
18 |
|
19 |
input, |
20 |
textarea { |
21 |
font-family: inherit; |
22 |
font-size: 100%; |
23 |
}
|
24 |
|
25 |
[type="submit"] { |
26 |
cursor: pointer; |
27 |
}
|
28 |
|
29 |
textarea { |
30 |
resize: none; |
31 |
}
|
32 |
|
33 |
ul { |
34 |
list-style: none; |
35 |
}
|
36 |
|
37 |
body { |
38 |
font: 20px/24px "IBM Plex Sans", sans-serif; |
39 |
}
|
40 |
|
41 |
form { |
42 |
max-width: 600px; |
43 |
padding: 0 15px; |
44 |
margin: 100px auto; |
45 |
}
|
46 |
|
47 |
h1 { |
48 |
font-size: 60px; |
49 |
line-height: 78px; |
50 |
margin-bottom: 50px; |
51 |
}
|
52 |
|
53 |
|
54 |
/* FORM ELEMENTS
|
55 |
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
56 |
.form-with-animated-labels .form-wrapper { |
57 |
position: relative; |
58 |
}
|
59 |
|
60 |
.form-with-animated-labels .form-wrapper + .form-wrapper { |
61 |
margin-top: 40px; |
62 |
}
|
63 |
|
64 |
.form-with-animated-labels [type="text"], |
65 |
.form-with-animated-labels [type="email"], |
66 |
.form-with-animated-labels textarea { |
67 |
width: 100%; |
68 |
padding: 15px 10px; |
69 |
border: 1px solid transparent; |
70 |
border-radius: 5px; |
71 |
color: var(--black); |
72 |
background: var(--lightgray); |
73 |
font-size: 18px; |
74 |
}
|
75 |
|
76 |
.form-with-animated-labels textarea { |
77 |
height: 150px; |
78 |
}
|
79 |
|
80 |
.form-with-animated-labels [type="text"]:focus, |
81 |
.form-with-animated-labels [type="email"]:focus, |
82 |
.form-with-animated-labels textarea:focus { |
83 |
border-color: var(--brown); |
84 |
}
|
85 |
|
86 |
.form-with-animated-labels label { |
87 |
position: absolute; |
88 |
top: 50%; |
89 |
left: 10px; |
90 |
font-size: 18px; |
91 |
transform: translateY(-50%); |
92 |
color: var(--gray); |
93 |
transition: all 0.25s ease-in-out; |
94 |
}
|
95 |
|
96 |
.form-with-animated-labels .form-textarea-wrapper label { |
97 |
top: 10px; |
98 |
transform: none; |
99 |
}
|
100 |
|
101 |
.form-with-animated-labels label.focused { |
102 |
top: -22px; |
103 |
transform: none; |
104 |
font-size: 13px; |
105 |
font-weight: bold; |
106 |
color: var(--black); |
107 |
}
|
108 |
|
109 |
.form-with-animated-labels [type="submit"] { |
110 |
min-width: 160px; |
111 |
padding: 20px 4px; |
112 |
border-radius: 10px; |
113 |
width: 100%; |
114 |
font-size: 22px; |
115 |
font-weight: bold; |
116 |
text-transform: uppercase; |
117 |
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); |
118 |
color: var(--white); |
119 |
background: var(--brown); |
120 |
}
|
121 |
|
122 |
.form-with-animated-labels .form-submit-wrapper svg { |
123 |
position: absolute; |
124 |
top: 0; |
125 |
left: 0; |
126 |
transform: rotate(40deg); |
127 |
opacity: 0.75; |
128 |
fill: var(--white); |
129 |
width: 60px; |
130 |
height: 60px; |
131 |
}
|
132 |
|
133 |
.form-with-animated-labels .wpcf7-form-control-wrap { |
134 |
position: static; |
135 |
}
|
136 |
|
137 |
.form-with-animated-labels .wpcf7-not-valid-tip { |
138 |
position: absolute; |
139 |
bottom: 100%; |
140 |
right: 10px; |
141 |
font-size: 12px; |
142 |
}
|
143 |
|
144 |
|
145 |
/* OUTPUT MESSAGES CF7
|
146 |
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
147 |
.wpcf7 form .wpcf7-response-output { |
148 |
font-size: 18px; |
149 |
padding: 10px; |
150 |
margin: 0; |
151 |
}
|
152 |
|
153 |
.wpcf7 form.invalid .wpcf7-response-output, |
154 |
.wpcf7 form.unaccepted .wpcf7-response-output, |
155 |
.wpcf7 form.sent .wpcf7-response-output { |
156 |
border-color: var(--brown); |
157 |
}
|
Nota: para este ejemplo estoy usando un tema básico. Sin embargo, dependiendo de tu tema algunos de estos estilos podrían ser anulados. Teniendo en cuenta ese hecho, si el formulario no se ve como era de esperarse en tu proyecto, asegúrate de revisar los estilos de tu tema y hacer los cambios necesarios.
Consejo: puedes usar etiquetas condicionales para cargar este archivo CSS solamente en las páginas que incluyan al formulario.
Por qué un enfoque que usa CSS solamente no funcionará
Antes de continuar, permíteme aclarar una cosa.
Probablemente has visto muchas implementaciones que usan solamente CSS para crear etiquetas flotantes en la web. Estos aprovechan principalmente la "técnica del truco con el checkbox en CSS". Ciertamente es una técnica muy útil que hemos discutido muchas veces en el pasado.
Desafortunadamente, en este caso no podemos usarla. Si inspeccionas el marcado generado por los códigos cortos de Contact Form 7, notarás que todos los controles del formulario están envueltos por un elemento span.
Como resultado, los controles y sus etiquetas asociadas no son hermanos, y un estilo como este no tendrá ningún efecto:
1 |
.form-with-animated-labels [type="text"]:focus + label { |
2 |
// styles for the animation here |
3 |
}
|
4. Agrega el código JavaScript
Como siguiente paso, pondremos en cola un nuevo archivo JavaScript en el archivo functions.php de nuestro proyecto, de esta forma (aunque tu carpeta destino puede diferir):
1 |
wp_enqueue_script( 'custom', get_template_directory_uri() . '/assets/js/custom.js', array(), '', true ); |
En su interior, llevaremos a cabo las siguientes acciones:
- Vamos a recorrer con un bucle todos los formularios
.form-with-animated-labels. - Para cada formulario, tomaremos sus controles destino (
inputs,textarea). En tu caso, estos podrían ser diferentes. - Después, para cada control, escucharemos los eventos
focusyblur. Estos eventos serán los responsables de animar las etiquetas cambiando la clasefocusedque definimos anteriormente. - Por último, usaremos uno de los eventos AJAX de CF7 para colocar de nuevo las etiquetas en sus posiciones iniciales. Siéntete libre de usar cualquier de esos eventos según tus necesidades.
Aquí puedes ver el código JavaScript correspondiente:
1 |
const formsWithAnimatedLabels = document.querySelectorAll( |
2 |
".form-with-animated-labels" |
3 |
);
|
4 |
const focusedClass = "focused"; |
5 |
|
6 |
for (const form of formsWithAnimatedLabels) { |
7 |
const formControls = form.querySelectorAll( |
8 |
'[type="text"], [type="email"], textarea' |
9 |
);
|
10 |
for (const formControl of formControls) { |
11 |
formControl.addEventListener("focus", function () { |
12 |
this.parentElement.nextElementSibling.classList.add(focusedClass); |
13 |
});
|
14 |
|
15 |
formControl.addEventListener("blur", function () { |
16 |
if (!this.value) { |
17 |
this.parentElement.nextElementSibling.classList.remove( |
18 |
focusedClass
|
19 |
);
|
20 |
}
|
21 |
});
|
22 |
}
|
23 |
|
24 |
|
25 |
form.parentElement.addEventListener("wpcf7mailsent", function () { |
26 |
const labels = document.querySelectorAll(".focused"); |
27 |
for (const label of labels) { |
28 |
label.classList.remove(focusedClass); |
29 |
}
|
30 |
});
|
31 |
}
|
Consejo: puedes usar etiquetas condicionales para cargar este archivo de JavaScript solamente en las páginas que incluyan al formulario.
5. Llama al formulario de contacto
Por último, pero no por eso menos importante, vamos a incluir el código corto generado por Contact Form 7 en la parte que deseemos en nuestro proyecto:
1 |
[contact-form-7 id="5" title="Contact Form With Animated Labels" html_class="form-with-animated-labels"] |
Observa la clase añadida a través del atributo html_class. Esta es nuestra conocida clase form-with-animated-labels.
Conclusión
¡Y hemos terminado, amigos! En este breve tutorial, discutimos un método sencillo para personalizar la apariencia de un formulario de Contact Form 7 agregando etiquetas flotantes. Estoy seguro de que también habrán otras soluciones eficaces, ¡pero esta parece hacer su trabajo! Con suerte la probarás en alguno de tus próximos proyectos de WordPress.
¿Alguna vez has creado un efecto así con Contact Form 7? ¿Has logrado encontrar una solución basada solamente en CSS? Comparte tus pensamientos en los comentarios a continuación.
Como siempre, ¡muchas gracias por leer!
Más personalización para Contact Form 7 y etiquetas flotantes
Si sientes la curiosidad de aprender cómo crear un formulario SVG responsivo hecho a mano con Contact Form 7, o si te gustaría profundizar en el tema de las etiquetas flotantes, echa un vistazo a estos tutoriales:
By
