Do you want to add an image to a WordPress form? Adding graphics to a form can help to add your branding and make the form look more interesting.
In this tutorial, we’ll walk through the process of adding an image to a form. Towards the end, we’ll also explain how to use images in place of questions on your form.
How to Add a Picture to a Form
WPForms is the easiest form builder for WordPress. It lets you easily add images anywhere in your forms.
For example, you could:
- Add your company logo to a form
- Add product images to Authorize.Net payment forms to increase conversions
- Create more interesting newsletter signup forms
- Use images in multiple choice questions in place of text.
There are a few different ways to add images to forms in WordPress.
In this article, we’ll add an image to a form using HTML. If you want to add images to multiple choice questions, we’ll help you out with that at the end of the article.
Note: If you want to add a background image to a form, you can do that with CSS.
In This Article
How to Add an Image to Your WordPress Forms
Here are written instructions if you prefer to read along.
Step 1: Install the WPForms Plugin
Now, you have 2 choices:
- If you already have a form that you want to add a picture to, you can go ahead and skip to the next step.
- If you don’t have any forms in WPForms yet, now’s the perfect time to create one. You can create a simple contact form in less than 5 minutes.
Once you’re done making your form, switch back to this tutorial.
Step 2: Upload Your Image to WordPress
The easiest way to add an image to WordPress is to upload it to the Media Library. That way, it’ll be really easy to find it when you need to copy the link.
To start, open up your WordPress dashboard. Then click Media on the left-hand side.
Now go ahead and click the Add New button.
Drag your image file into the box, or click Select Files if you prefer to locate the image on your computer.
Once your image has been uploaded, go ahead and click on it to view the details. Click the button labeled Copy URL to copy the image URL to your clipboard.
You’ve now got the image URL on your clipboard ready to paste into your form.
Stay in the WordPress dashboard for the next part.
Step 3: Add Your Image to Your WordPress Form
Next up, we’re going to open the form that we want to add the image to.
From the left-hand navigation bar in the dashboard, click WPForms. Then click Edit under the form you created in Step 1.
When the form builder opens, drag an HTML field from the left-hand pane onto the right-hand pane and drop it where you want the image to appear:
Now click once on the field to open the settings on the left hand side.
Did you notice the Code field on the left? Just type in the HTML code to embed your image here.
You can copy this example. But remember: after
src=, you’ll want to paste in the URL to the image you uploaded in the last step:
Now click Save at the top of your form.
We’re done! All we need to do is publish the form.
Step 4: Publish Your Form
WPForms lets you quickly add your forms anywhere on your website, including:
In this example, we’re going to do it the easy way. Let’s use the Embed button to automatically make a page for the form.
Go ahead and click Embed now.
Next, let’s click Create New Page.
And finally, type in a name for your page and click Let’s Go.
WPForms will automatically create a new page and embed your form inside it. You’ll see the image in the preview here too.
Just click Publish so that the form is live on your website.
And that’s it! Your form is live.
Here’s how our image looks on our finished form.
You can edit the form and tweak the HTML if you need to change the size of the image. You can also add CSS classes to style your image if you want to.
How to Add Images to Form Fields
Before we quit, let’s quickly look at another neat feature in WPForms. You can add images as answers to multiple choice questions so that your visitors can click on them to make a choice.
Using images in questions is perfect for simple order forms, so let’s quickly look at how that’s done.
On this t-shirt order form, we’ve got a multiple choice field with 3 options. Let’s check the Use image choices checkbox underneath.
Now we can add an image for each choice in our multiple choice field. You’ll need to click the Upload Image text to upload each image.
And here’s what the form looks like in the form builder once that’s done:
Great! When you’re done, click the blue Publish button and take a look at your form. When you click on an image to select it, you’ll see a green tick in the center:
Using image choices is a great way to make surveys and polls more interesting, or show your visitors different designs or colors on an order form.
Next Step: Style Your WordPress Forms
Great! Now you know the easy way to add an image to a WordPress form. WPForms also makes it easy for your visitors to upload their own images to WordPress, so be sure to check that out next.
Are you looking for more ways to design and style your forms? Check out this article on beautiful contact form designs you can steal. The article contains lots of CSS examples that you can copy and paste into the WordPress Customizer to style your forms.
Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes 100+ free form templates and offers a 14-day money-back guarantee.