How to add an image to a WordPress form

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

Updated:
LinkedIn

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.

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.

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

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

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.

Comments

  1. Hello.

    When i want to put an image in my form, it does not adapt to the size of the form, its always too big.

    How can I make it more “responsive”?

    Thanks!

    Reply

    1. Hey Guillaume- I apologize for the trouble with that! To make images responsive you could add image sizes in % and adjust the size, like

      However, in order to make sure we answer your question as thoroughly as possible, could you please contact our support team with some additional details about what you’re looking to do?

      Thanks! 🙂

      Reply

    1. Hey Sohaib– Good question! You can first store the image on your computer storage (includes the ones that were captured using a webcam) and then follow the instructions from Step 2 by referring to this same article.

      Hope this helps! 🙂

      Reply

  3. How can my CUSTOMERS post their pictures to my website through a form I created, say to sell a car or equipment?

    Reply

    1. Hi Carl! The easiest way to let your customers create their own ads would be through our Post Submissions addon, especially with our recently released Rich Text Field editor 🙂

      With those two combined, your users will pretty much be able to design their ad as they’d like, submit the form, and it would be added to your site directly (or pending your approval).

      I hope this helps to clarify 🙂 If you have any further questions about this, please contact us if you have an active subscription. If you do not, don’t hesitate to drop us some questions in our support forums.

      Reply

    1. Hi Cory! I apologize but I’m not sure I understood what you’re referring to.

      When you have a chance, could you please reach out to our team here if you have an active subscription.

      If you do not, don’t hesitate to reach out at our support forums.

      Thanks!

      Reply

  5. I have added the image in my form using the HTML, but it doesn’t fetch the image in email.

    I added a couple of images in header so that I can print the form entry along with the logos on top but had no success.

    Reply

    1. Hi Aman!

      Thank you for contacting us!

      The reason that we don’t pass HTML fields, Section Divider fields, or descriptions (the second two of which are essentially HTML fields) is that these areas allow full HTML, which means it will be common for them to contain things that will break email notifications or cause delivery problems.

      However, we do have a filter that will allow you to include non-input fields in your emails. Here’s our tutorial with all of the details, plus the code you’d need: https://wpforms.com/developers/include-page-break-section-divider-and-html-fields-in-notifications/.

      We also have a helpful tutorial with details on how to add custom code like this to your site: https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ (for an especially easy option, I recommend the Code Snippets plugin option).

      Or if you’d prefer to avoid PHP, you could consider modifying the body of your notifications to include the text you need. You could do this by building out the notification content in a more customized way using regular text, HTML, and Smart Tags. In case it helps, here’s a couple screenshots of an example:

      – Message Setup: https://a.supportally.com/klWvLo
      – Email Received: https://a.supportally.com/ywFhFb

      This option probably provides the most control, since you can pick and choose exactly which details you’d like included in your notification.

      I apologize if this isn’t quite what you were looking for, but hopefully one of these ideas could work for you. Could you please let me know if you have any other questions?

      Thanks!

      Reply

  6. Can I have a user use the camera on their device to take a picture and load it in one step as opposed to first take a picture, store it on their desktop and then load the picture. Ideally I would like the user to load a picture from a library if they have an existing picture but if the y prefer, they can just take a picture from the camera and load it in. Is there a way to do this in WPForms?

    Reply

    1. Hi Anil! The File Upload field when accessed by a mobile device can provide the option for users to upload an image directly from their camera. However, it depends on whether or not that user’s mobile has been configured to allow the browser to access their camera. If it doesn’t, then the option will not be available.

      I hope this helps to clarify 🙂 If you have any further questions about this, please contact us if you have an active subscription. If you do not, don’t hesitate to drop us some questions in our support forums.

      Reply

  7. Hi,

    Does WP-Forms handle user’s registration data the same way as woocommerce? If a user checks out of my ecommerce store and registers an account, does her data get duplicated, once in woocommerce, once in wp forms registration?

    Reply

    1. Hey Ann, our User Registration addon does not provide an interface to manage or edit existing users and focuses solely on the account creation process. However, we don’t we don’t support any integration with WooCommerce.

      Having said that, in order to make sure we answer your question as thoroughly as possible and avoid any confusion, could you please contact our team?

      If you have a WPForms license, you have access to our email support, so please submit a support ticket. Otherwise, we provide limited complimentary support in the WPForms Lite WordPress.org support forum.

      Thanks.

      Reply

  9. How do I add an image on submit button wpforms in WordPress?

    So far yu only show how to add icons. But I have a custom image I’d like to add.

    Reply

    1. Hey Aser – To add image to the submit button, you can consider using following CSS:

      .wpforms-submit-container .wpforms-submit {
      background-image: url('image_url');
      background-size: cover;
      padding-left: 40px;
      }

      And in case it helps, here’s a detailed tutorial on how to add custom CSS like this to your site.

      Reply

      1. My code looks something like this:

        .wpforms-submit-container .wpforms-submit {
        background-image: url(‘https://lhamosplane.world/wp-content/uploads/2023/07/th-1787430678.B.png’);
        background-size: cover;
        padding-left: 40px;
        }

        However, the URL is not picked up, meaning the image is not displaying. I’m unsure if you understand what I’m after, but I want a .png image to be visible next to the “Submit” text within the submit button to the left.

        I found this code from your tutorial that displays Fantastique icons and it almost does what I want, but I can’t add a URL to my image of choice.

        .wpforms-form button[type=submit]:hover {
        background-color: #ac2428 !important;
        }

        .wpforms-form button[type=submit]:before {
        content: ‘\f1d8’; /* Unicode for icon, be sure to keep the quotes and forward slash */
        margin-right: 10px !important; /* Distance between icon and button text */
        }

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.