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:
- 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
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:
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
That’s it! You can now publish your post to see it live.
Here’s our blog post submission form with the 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.