Resumen de IA
¿Te gustaría añadir imágenes antes o después de las etiquetas de tu formulario? Añadir imágenes a las etiquetas puede hacer que estos elementos destaquen con un poco de estilo en tu formulario, y esto se puede lograr fácilmente con un poco de CSS.
En este tutorial, te guiaremos sobre cómo añadir imágenes antes y después de las etiquetas de los campos en WPForms.
Creación de su formulario
Para empezar, crea un nuevo formulario o edita uno existente para acceder al constructor de formularios. Para nuestro formulario, hemos añadido campos de formulario de Nombre, Email, Teléfono, URL, Carga de archivos y Párrafo.
Añadir tus imágenes de fondo antes de las etiquetas del formulario
Para este tutorial, ya hemos creado imágenes para cada una de estas etiquetas y las hemos subido a la Biblioteca de medios de WordPress.
Si necesitas ayuda para subir imágenes SVG a WordPress, por favor revisa este tutorial.
Añadir el CSS
Ahora, es el momento de añadir el CSS que unirá todo esto. Si necesitas ayuda para añadir CSS a tu sitio, por favor revisa este tutorial.
label[for="wpforms-1723-field_1"]::before,
label[for="wpforms-1723-field_2"]::before,
label[for="wpforms-1723-field_3"]::before,
label[for="wpforms-1723-field_4"]::before,
label[for="wpforms-1723-field_6"]::before,
label[for="wpforms-1723-field_5"]::before{
background-repeat: no-repeat;
background-size: 100%;
width: 18px;
height: 20px;
content: " ";
display: inline-block;
background-position: 0px 2px;
margin-right: 10px;
}
label[for="wpforms-1723-field_1"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/avatar.svg);
}
label[for="wpforms-1723-field_2"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/envelope.svg);
}
label[for="wpforms-1723-field_3"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/phone-call.svg);
}
label[for="wpforms-1723-field_4"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/link.svg);
}
label[for="wpforms-1723-field_6"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/upload.svg);
}
label[for="wpforms-1723-field_5"]::before {
background-image: url(http://yoursiteurl.com/url-path-to-your-image/chat.svg);
}
En el fragmento anterior, estamos apuntando al formulario con el ID 1723. Necesitarás actualizar este ID para que coincida con el formulario al que deseas añadir las imágenes. Estamos utilizando el elemento CSS ::before para apuntar al área antes de la etiqueta de cada campo.
El selector field_1 apunta al ID del campo. Por lo tanto, necesitarás actualizar estos valores para que coincidan con los IDs de los campos a los que deseas apuntar.
Nota: Cada etiqueta de formulario anterior en el CSS apunta a los IDs de los campos. Si necesitas ayuda para encontrar los IDs de tu formulario o campo, por favor consulta este tutorial.
Reemplaza las URLs de background-image con el enlace a las imágenes que subiste a tu sitio de WordPress. Una vez añadido el CSS, ahora podrás ver estas imágenes en tu formulario.
Usar una imagen basada en fuentes
Subir imágenes a tu sitio no es la única forma de mostrar imágenes antes o después de las etiquetas de los campos. También puedes añadir fácilmente un icono basado en fuentes a estas etiquetas.
Para este tutorial, ya hemos configurado la familia de fuentes que queremos usar para estos iconos.
Si necesitas ayuda para configurar este paso, por favor consulta este tutorial.
En este tutorial, utilizamos el plugin de WordPress para el plugin Font Awesome.
label[for="wpforms-1723-field_1"]::before, label[for="wpforms-1723-field_2"]::before, label[for="wpforms-1723-field_3"]::before, label[for="wpforms-1723-field_4"]::before, label[for="wpforms-1723-field_6"]::before,
label[for="wpforms-1723-field_5"]::before{
background-repeat: no-repeat;
background-size: 100%;
width: 18px;
height: 20px;
display: inline-block;
background-position: 0px 2px;
margin-right: 10px;
font-family:"Font Awesome 5 Free";
}
label[for="wpforms-1723-field_1"]::before {
content: "\f007";
}
label[for="wpforms-1723-field_2"]::before {
content: "\f199";
}
label[for="wpforms-1723-field_3"]::before {
content: "\f095";
}
label[for="wpforms-1723-field_4"]::before {
content: "\f35d";
}
label[for="wpforms-1723-field_6"]::before {
content: "\f382";
}
label[for="wpforms-1723-field_5"]::before {
content: "\f086";
}
Añadir las imágenes después de la etiqueta
Si deseas que los iconos aparezcan después de la etiqueta, el CSS sería ligeramente diferente.
label[for="wpforms-1723-field_1"]::after, label[for="wpforms-1723-field_2"]::after, label[for="wpforms-1723-field_3"]::after, label[for="wpforms-1723-field_4"]::after, label[for="wpforms-1723-field_6"]::after,
label[for="wpforms-1723-field_5"]::after{
background-repeat: no-repeat;
background-size: 100%;
width: 18px;
height: 20px;
display: inline-block;
background-position: 0px 2px;
margin-right: 10px;
font-family:"Font Awesome 5 Free";
margin: 0 0 0 5px;
}
label[for="wpforms-1723-field_1"]::after {
content: "\f007";
}
label[for="wpforms-1723-field_2"]::after {
content: "\f199";
}
label[for="wpforms-1723-field_3"]::after {
content: "\f095";
}
label[for="wpforms-1723-field_4"]::after {
content: "\f35d";
}
label[for="wpforms-1723-field_6"]::after {
content: "\f382";
}
label[for="wpforms-1723-field_5"]::after {
content: "\f086";
}
La única diferencia con este CSS es que estás usando ::after en lugar de ::before y hemos añadido un margen a la izquierda de la etiqueta para un pequeño espaciado.
¡Eso es todo! Ahora has aprendido a colocar imágenes antes o después de las etiquetas de tu formulario.
¿A continuación, te gustaría añadir una tabla de contenidos a tus formularios largos? Echa un vistazo al tutorial sobre Cómo añadir una tabla de contenidos para formularios largos.