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

Do you want to use images 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 that 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.

With a well-designed form, you’ll see an increase in responses. And one of the best ways to keep your visitors engaged is by using images.

Here are some of the reasons why you should use images in your forms:

WPForms is the best WordPress Form Builder plugin. Get it for free!
  • To summarize information with screenshots that make it easy to understand.
  • Include call-to-action graphics that draw attention.
  • Convey professionalism by keeping the form consistent with your site design.
  • Match your brand by including your logo and company styles.

So let’s get started with the step by step process of adding an image to a WordPress form.

Step 1: Get Started

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. You can add an image to any form of choice including a simple contact form or a user registration form.

However, we’ll be using a blog post submission form for this tutorial and add an image to it. You can check out our article on how to add a post submission form to your WordPress site.

Here’s our form before adding the image:

Blog Post Submission Form

Step 2: Upload Your Image to a Post or Page

Wait! Why would you upload your image to a post or page?

Actually, we’ll need to generate a bit of code for our image and then add that code to our form. The easiest way to do this is to create a temporary post or page and add an image to it. We can delete the page right after we get the code we need.

Now, after the WordPress 5.0 update, you may be either be using the Classic editor or the Gutenberg editor. So let’s show you how to get the code for your image on both the editors.

Not sure which one to follow? Here’s how to check which version of WordPress you’re using.

Gutenberg Editor (WordPress 5.0 or higher)

To create a temporary page, go to Pages » Add New from the left sidebar of your WordPress admin panel.

Next, you’ll need to upload an image to WordPress. And to do that, you’ll have to add an image block.

Add Image Block

Click on the Add Block (+) icon in the post editor and search for the image block under the common blocks. You can also type “image” in the search box to find it. Once you see the image block, click on it.

The image block allows you to upload a new image, select an existing image from the WordPress media library, or insert an image using an image link.

Upload Image to Gutenberg Editor

Let’s use the Upload button to upload a new image. Once done, you’ll see your image inside the image block.

You can also add the ALT text for this image. To do that, click on the image and then you’ll see a text box for adding the ALT text along with other image settings on the right side of your page.

Add ALT text to image

Let’s get the image code for our form now.

Click on the image again and a toolbar will appear at the top of your image. Next, click on the 3 vertical dots icon to open the block settings menu.

Once you see the Edit as HTML option, click on it to continue.

edit as HTML option

You’ll now find some code inside your image block. We don’t need the entire code. So copy the code between the <figure class=”wp-block-image”> and </figure>.

For example, if your code looks something like:

<figure class="wp-block-image"><img src="http://yourwebsite.com/wp-content/uploads/2019/04/your-image.jpg" alt="your name" class="wp-image-409"/></figure>

Then you’ve to just copy the code between <figure class=”wp-block-image”> and </figure>:

<img src="http://yourwebsite.com/wp-content/uploads/2019/04/your-image.jpg" alt="your name" class="wp-image-409"/>

Note: Your code will be different than the above one.

Classic Editor

If you’re using the Classic Editor, first go to Pages » Add New to create a temporary page. Now click on the Add Media button, present above the content editor, to upload and insert your image.

Once the image is added to the editor, switch to the Text tab and copy the code. As simple as that!

copy image code

Step 3: Add Your Image to a WordPress Form

Now that you’ve got the code for your image, go back to your form. Next, drag an HTML field present under the Fancy Fields section and drop it to your form.

how to add an html field to a form

Click on the HTML/Code Block present in the form to open the Field Options on the left panel. You can now paste your image code in the text area field named Code.

Paste code in HTML field

To save the changes, click on the Save button present in the top right corner of your screen.

Step 4: Publish Your Form With the Image

WPForms allows you to add your form to your post, page, or sidebar. Let’s go to Pages » Add New to create a new page to add our form.

In the Gutenberg Editor, you’ll have to first add the WPForms block. To do that, click on the Add Block icon and find the WPForms block under Widgets. You can also use the search box and type “WPForms” to find it.

WPForms block Gutenberg editor

Once you see the WPForms block, click on it to add the block. Now select your form from the dropdown to add the form to your page.

Add WPForms Gutenberg Editor

If you’re using the Classic Editor, then you’ll 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 dropdown menu and then click on the Add Form button.

classic editor add form

That’s it! You can now publish your post to see it live.

Here’s our blog post submission form with the image:

published form with image

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

Looking for 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.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

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 2 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.