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.

Create your form with the fields that you require.

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.

Upload the images you want to use for your form labels

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

Each of the form labels above in the CSS are targeting the field IDs. If you need help finding your field IDs, please see this tutorial.

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

Now you'll see your images on each of your form labels.

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.

You can also add images to the labels using a font based icon.

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.

You can also have the images appear after the label

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.