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:
- 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
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.
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.
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.
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!
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! 🙂
How users can upload their image in form ? from their computer or by using webcam
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! 🙂
How can my CUSTOMERS post their pictures to my website through a form I created, say to sell a car or equipment?
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.
How can I change the widget form search logo?
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!
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.
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!
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?
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.
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?
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.
Does WPForms support gib media? Or embedding a short code from 3D viewer plugin?
Hey Melissa – We’d be happy to help! When you get a chance, please drop us a line in support so we can assist.
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 🙂
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.
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.
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 */
}
Hey Aser – We’d be happy to help! When you get a chance, please drop us a line in support so we can assist.
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 🙂
How to align an image to the left of a form?
Hey JM – If you’re looking to display image on left, and fields on right – you can consider using the layout field.