Adding an image is a great way to personalize your form, give users a feel for what the form is about, or feature a logo for your business.
Fortunately, it’s easy to do with WPForms. The content field in WPForms simplifies the process of uploading text and media, like images or logos, directly into your forms.
In this post, we’ll walk you through the process of using the content field to add a form header image in WordPress.
Why Should I Add a Header Image to a Form?
Personalizing your form with a custom header image is an easy way to complement your WordPress website with a consistent, cohesive design. Since our drag-and-drop form builder makes customizing forms a breeze, you’re able to use your images in a variety of styling.
Plus, using an image will give your website users a clear idea of what to expect from your site and form. Your header image may reflect the subject of the contents on your form, or it might be an image that represents your business or organization, such as a logo.
How to Add a Form Header Image or Logo in WordPress
We’ll show you how to add a header image to a WordPress form without any code. This tutorial is perfect for beginners and doesn’t require using custom CSS, a page builder, or the WordPress Customizer.
Just follow these steps:
In This Article
1. Install the WPForms Plugin
First, you need to install the WPForms Plugin. Check out all of the WPForms licenses here, or download the plugin from your WordPress dashboard.
In order to use the Content field upload functionality to add a form header image, you’ll need to select an upgraded license like Pro, Plus, or Elite.
Here’s a helpful tutorial on how to install a WordPress plugin.
2. Select the Simple Contact Form Template
Once you have the plugin setup on your site, navigate to WPForms on your WordPress dashboard, and click Add New.
From here, you’ll find a large selection of templates to choose from to create your form.
But first, let’s name the form. For this tutorial, we’ll name our form “Contact Us,” which will be displayed at the top of the form.
Now, we’ll select the Simple Contact Form.
This will take us to a new page, where we’ll use the easy-to-use form builder to customize this template.
3. Add the Content Field
Now that we’re in the form builder, we’ll add the content field from the selections in the Fields tab.
Simply click on Content, and drag-and-drop the field where you want it on your form.
We’re dragging the content field to the top of the page so that the uploaded media will act as a header image on our form.
When the content field is in place, we’ll click on it to access its Field Options and add our media and edit the text using the easy editor on the left-hand pane.
You can edit your content visually or use the Text editor to edit it using HTML.
Great! Now we’re ready to upload our image and enter some text on the form.
4. Upload Your Company Logo/Image
Next, we’ll click Add Media to upload our image to the content field.
You’ll be able to upload a new image or select one from you Media Library. JPG and PNG files are accepted.
With our custom logo in place, we can then edit customization options such as the image size, orientation, and other details.
To ensure our image acts as a form header, we’ve gone to the Advanced tab and set the Field Size to Large.
Then, back in the General tab, we made sure that the image is centered in the field using the formatting options within the text field.
We also have the ability to edit the text in the field. We edited the text here to be a short message for visitors and a prompt to fill out the contact form.
Like the media above it, you can format the text freely with the Content field. Click Expand Editor under the text box for even more editing options.
For our logo here, we’ve centered the text with the rest of the image.
You may want to customize the other fields on the form, too.
For example, we’ve increased the size of the name field to Large, to match the width of our header image above it.
There are many ways to customize the details of the fields on the form as you see fit, and you can preview your changes as you go.
Be sure to click on Update Preview to see the adjustments made to the Content field.
Excellent! We’re now ready to embed the form to any page we like!
5. Save & Embed the Form
Press the Save button on the top-right of the form to see the changes reflected in the page preview.
Whether you check out the page preview or not, you’ll need to click Save before you move on.
Now, we’ll click on the Embed button on the top to add this form on a new page of our WordPress website.
After clicking Embed, we’ll choose where to put the new form.
We have the option to Select Existing Page or Create New Page. For this tutorial, we’re creating a new page, so we’ll click Create New Page.
After that, we’re then prompted to name the new page.
We’ll call ours “Contact Us” since that’s what we named this form when we selected the template.
We can now see the form on a newly created page for our WordPress website. From here, we can preview the page, save the page as a draft, or publish it.
When you’re ready, click Publish to make this page live on your site.