### [Añadir imágenes antes o después de las etiquetas de tu formulario](https://wpforms.com/developers/how-to-add-images-before-or-after-your-form-labels/)
**Publicado:** 23 de noviembre de 2020
**Autor:** David Ozokoye
**Extracto:** Aprende a usar CSS para añadir imágenes antes y después de las etiquetas de tu formulario.
**Contenido:**
¿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 campo en WPForms.
---
## Creación de tu formulario
Para empezar, [crea un nuevo formulario](https://wpforms.com/docs/creating-first-form/ "Creación de tu primer formulario") o edita uno existente para acceder al constructor de formularios. Para nuestro formulario, hemos añadido campos de formulario **Nombre**, **Correo electrónico**, **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, [consulta este tutorial](https://www.wpbeginner.com/wp-tutorials/how-to-add-svg-in-wordpress/ "Cómo añadir SVG en WordPress (con 2 soluciones sencillas)").
## 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, [consulta este tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Cómo añadir estilos CSS personalizados para WPForms").
```
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 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, deberás actualizar estos valores para que coincidan con los IDs de campo a los que deseas apuntar.
**Nota:** Cada etiqueta de formulario anterior en el CSS apunta a los IDs de campo. Si necesitas ayuda para encontrar los IDs de tu formulario o campo, [consulta este tutorial](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).
Reemplaza las URL 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 campo. 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, [consulta este tutorial](https://www.wpbeginner.com/wp-themes/how-to-easily-add-icon-fonts-in-your-wordpress-theme/ "Cómo añadir fácilmente fuentes de iconos en tu tema de WordPress").
En este tutorial, utilizamos el plugin de WordPress para el [plugin Font Awesome](https://wordpress.org/plugins/font-awesome/ "Plugin Font Awesome para WordPress").
```
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 utilizando **::after** en lugar de **::before** y hemos añadido un margen a la izquierda de la etiqueta para un poco de espacio.
¡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](https://wpforms.com/developers/how-to-add-a-table-of-contents-for-long-forms/ "Cómo añadir una tabla de contenidos para formularios largos").
**Categorías:** Tutoriales
**Etiquetas:** CSS
---