WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

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

Last updated on Mar 23, 2017 by Courtney Robertson

Do you want to use multimedia to get more people to fill out your website forms? Graphics are a great way to grab your audience’s attention and get them engaged with your website. In this tutorial, we’ll show you how to add an image to a WordPress form so you can get more responses.

The Captivating Power of Graphics

Getting your website visitors to completely fill out your form is crucial. It doesn’t do you any good if they quit halfway through.

When your form is interesting, visitors are more likely to fill out it out entirely.  You can keep them engaged by using images that:

  • Summarize information with screenshots that make it easy to understand
  • Include call-to-action graphics that draw attention
  • Convey professionalism by keeping your form consistent with your site design
  • Match your brand by including your logo and company styles

With a well-designed form, you’ll see an increase in responses.  Let’s get started adding an image to a form.

Get Started Creating a Form in WordPress

First you need to install and activate the WPForms plugin. Here’s a step by step guide on how to install a WordPress plugin.

Also, you’ll need to have a form created. To do so, you can see our tutorial on How to Create a Simple Contact Form as an example to get started.

Adding an Image to a Post or Page

Next, you will upload the image to WordPress.

We’ll need to generate a bit of code to add to your form. The easiest way to do this is to create a temporary draft of a post, and add an image to it. We can delete the post right after we get the code we need.

Here’s how to do it:

  1. Create a post
  2. Upload and insert an image
  3. Switch to the Text tab
  4. Copy the code of the image

post editor how to add an image

For more help uploading an image to WordPress, see How to Add a New Post in WordPress and Utilize all the Features.

Adding an Image to a WordPress Form

Now that you’ve got the code for your image, go back to your form.  At the top of the form, add an HTML field.

how to add an html field to a form

Click on the field within the right side preview panel. Then on the left side within Field Options, paste your code from your temporary draft post.

add an image to a wordpress form

Publishing Your Form With a Graphic

Lastly, to add a form to a WordPress post or page, you first have to create or edit a post/page.

On the post editor, you will see the Add Form button just above the text editor. Clicking on the button will bring up a popup. Select the form you created from the drop down menu and then click on Add Form button.

How to insert a WordPress form containing a graphic image

Finally, you can view your form containing a graphic image live on your site. Here is our published form:

published form containing graphic

That’s it! We hope this tutorial helped you add an image to a WordPress form — and will help get you more responses by increasing your audience’s engagement.

Looking for more ways to get more form responses? You might also want to check out our guide on how to create a contact form popup in WordPress.

What are you waiting for? Get started with the most powerful WordPress forms plugin today.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Comments

  1. Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our new WordPress survey plugin that allows you to build interactive polls and surveys within minutes. You also get best-in-class reporting, so you can make data-driven decisions.

    You can get it 100% free when you purchase WPForms Pro plan.

    Get Started with WPForms Today and see why over 1 million websites choose WPForms as their preferred online form builder.

    Syed Balkhi
    CEO of WPForms

  2. Thank you, this was very helpful. However, I was wondering if there was a way to make the form overlay on top of the image, so that the image is just a background to the form. Can you give me any advice there?

    Thanks again!

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.