How to Add Images Before or After Your Form Labels

Introduction

Would you like to add images before or after your form labels? Adding images to the labels can make these elements stand out with a little flare on your form and this can be easily achieved with a little CSS. In this tutorial, we’ll walk you through each step on how to achieve this.

Creating your form

To begin, we’re going to create a form with a Name, Email, Phone, URL, File Upload, and Paragraph form fields.

Adding your background images before the form labels

For the purpose of this documentation, we’ve already created images for each of these labels and uploaded them into the WordPress Media Library.

If you’d like some help on uploading SVG image into WordPress, please review this tutorial.

Adding the CSS

Now it’s time to add the CSS that will pull this all together. If you need help adding CSS to your site, please review this 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);
}

Once the CSS is added, you can now see these images on your form.

Using a font based image

Using images is not the only way to achieve this, you can easily add a font based icon to these labels as well.

For the purpose of this documentation, we’ve already set up the font-family we want to use for these icons.

If you’d like some help in setting up this step, please see this tutorial.

In this tutorial, we used the WordPress plugin for the Font Awesome plugin.

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";
}

Adding the images after the label

If you’d like to have the icons have appear after the label, the CSS would be slightly different.

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";
}

The only difference to this CSS is that you’re using the ::after instead of the ::before and we’ve added some margin to the left of the label for a little spacing.

And that’s all you need to place images to your form labels. Would you like to add a table of contents to your long forms? Take a look at the tutorial on How to Add a Table of Contents for Long Forms.