How to add an image to a WordPress form

How to Add an Image to Your WordPress Forms (The Easy Way)

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.

Create Your WordPress Image Form Now

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:

There are a few different ways to add images to forms in WordPress. Let’s look at the easiest method first: adding an image to a form using HTML.

WPForms is the best WordPress Form Builder plugin. Get it for free!

How to Add an Image to Your WordPress Forms

Let’s walk through the process of adding an image to a form with some basic HTML. This is really easy and quick using the WPForms drag and drop builder.

Here are the steps we’ll work through:

  1. Install the WPForms Plugin
  2. Upload Your Image to WordPress
  3. Add Your Image to Your WordPress Form
  4. Publish Your Form

If you want to add images to multiple choice questions, we’ll help you out with that at the end of the article.

Step 1: Install the WPForms Plugin

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

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.

Click Media in WordPress to upload your form image

Now go ahead and click the Add New button.

Add New form image in WordPress

Drag your image file into the box, or click Select Files if you prefer to locate the image on your computer.

Upload your form image to WordPress

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.

Copy uploaded file URL

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.

Edit your WordPress image upload form

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:

Add an image field to a WordPress form

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:

WordPress image form HTML

Now click Save at the top of your form.

Save image form in WordPress

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.

Embed image form in WordPress

Next, let’s click Create New Page.

Create a new page for WordPress form with an image

And finally, type in a name for your page and click Let’s Go.

Create a new WordPress page for the image form

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.

Publish your form with an image in WordPress

And that’s it! Your form is live.

Here’s how our image looks on our finished form.

Published image form in WordPress

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.

Use image choices on a WordPress form

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.

Add images to form answers in WordPress

And here’s what the form looks like in the form builder once that’s done:

Image choices on WordPress form

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:

WPForms image choice in WordPress

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.

Create Your WordPress Image Form Now

Next Step: Style Your WordPress Forms

Great! Now you know the easy way to add an image to a WordPress form.

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.

If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

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.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.