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

• Updated on: 2020-09-15
• Read original article here

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.

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.

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:

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

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:

Once you’re done making your form, switch back to this tutorial.

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.

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

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.

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.

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.

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.