How to Add an Image to a WordPress Form to Increase Engagement

Are your WordPress forms not converting? We've got a really simple solution for you to try which will increase engagement in your forms.

Once you've built your forms, the next important step is to actually get people filling them in. This is the hardest part and many business owners find themselves wondering why no one is. If you're also wondering how to increase engagement and form conversion rates, we've got a really simple idea for you to try out.

One of the ways you can increase engagement to your contact or user registration forms is to make your forms more visually appealing.

The power of images in WordPress forms

Images catch people's attention far more effectively than plain text ever will. Anything you can do to catch the eye and persuade people to fill in your forms can only mean good things for your conversion rates.

Research from HubSpot found that when images are used, there is a 37% increase in engagement with your posts, forms, social media content and so on. They also found that 40% are more likely to give favorable responses too. This is definitely worth bearing in mind if you want to use surveys or customer feedback forms.

Besides improving the visual appearance of your forms, images can be used in many other ways.

Adding an image to WordPress Forms can:

• Enhance your brand image
• Summarize information through handy graphics or screenshots to improve user understanding
• Make Call-to-Action buttons more prominent
• Break up sections of your form into easy to manage chunks
• Be used in place of radio buttons to improve form styling

How to add images to your WordPress forms

Formidable Forms' online form builder is open to all kinds of customization to ensure that your forms are exactly how you want them to look.

That means you can add images wherever you want. It could be at the top of a survey to draw attention, you could images throughout your form to break up or you could make images interactive to make your forms more enjoyable to complete.

Now we’ve covered the reasons why images do so well in forms and on websites in general, let’s go through how to add an image to your Wordpress forms.

Step 1 – Get started with a WordPress form

First of all, you'll need to build the form you would like to upload the image to.

You can either choose one of our templates such as a contact form or registration form or build your own simple form from scratch.

If you've already got a form you'd like to add an image to, you can simply pull that up and start editing it.

Once you’re happy with your form so far, save your progress and move onto the next step.

Step 2 – Add a new page or post

Stepping away from your form for one minute, go to your WordPress dashboard and select either a post or a page and ‘Add new’.

Why do you have to create a page when you've already built a form?

This will only be a temporary page that you can delete afterwards. We'll show you what it's used for in the next step.

Simply upload the image to your WordPress media library and insert the image into the page or post. When you do this, you can also add in Alt text which will appear in the code.

Step 3 – Grab the image HTML

Now what?

The reason we’re asking you to do this is so we can pull the HTML code for this image and then use it in our form. This is the simplest way to do it and should only take a few minutes.

The next step depends on what editor you have, Classic or Gutenberg.

For the Classic editor, you'll want to open the 'Text' tab at the top right of your content box to view the HTML. This will show the image in HTML form rather than visual.

For the Gutenberg editor, you can click on the icon with 3 vertical dots in the block with your image in. Find the option to 'Edit as HTML' and you should get the code for it here.

In either case, you won't need to copy the whole piece of code. You’ll only have to copy the bit that looks something like the example below.

<img src=”[your website URL]/wp-content/uploads/2019/05/[your image].jpg” alt=”[your alt text]” class=”wp-image-500"/>

The bits in italics will instead show your own details so your code will look different to this, but it gives you an idea.

Step 4 – Add the image to your WordPress form

Once you’ve copied the code for your image, it’s time to head back over to your form. In the list of field types you can add to your form, you should see an option for 'HTML'.

Click to add or drag this to your form in whatever position you want it. Select the field and this should pull up the field options where you’ll find a space to paste your HTML into.

Click ‘Save’ once you’re happy with it.

Step 5 – Publish your form to on a page, post or widget

Now, all that’s left is to publish your form wherever you want it.

You can publish a form on a page, blog post or through the sidebar or footer. You can publish it in more than one place too.

To add it to a page, for example a contact page, follow the steps below.

Go to ‘Pages’ and ‘Add new’ to create a contact form page, or simply open the one you already have if you’ve previously made one.

If you’re using Gutenberg, you’ll need to add a new block as a widget. Click on Formidable Forms and this should give you a dropdown list of all the forms you have. Select the one you want, with the image in and your form will appear on the page.

For those using the Classic editor, all you need to do is click ‘Forms’ at the top of your content editor box. This will make a popup appear, where you can select the form you want and click ’Add Form’.

Happy? Now it’s ready to publish!

If you want to make better use of your new and improved contact or file upload form, you can also place it in a sidebar to improve visibility. Follow our simple steps on our post How to Add a Contact Form to a WordPress Sidebar.

We hope this step by step guide on how to add images to WordPress forms has helped you do more with your forms to increase engagement and conversions. Adding an image can be just the thing to draw the eye in a sidebar and encourage people to signup.

Not yet using Formidable Forms? Learn more about how we have the best online form builder features or let's go ahead and get started!