How to add a header image to a WordPress form

How to Add a Header Image to a WordPress Form

Do you want to learn how to add a header image to your WordPress form?

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 header image to a WordPress form.

Add a Header Image to Your Form Now

Why Should I Add a Header Image to a Form?

Personalizing your form with a 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.

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

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 Header Image to a WordPress Form

We’ll show you how to add a header image to a WordPress form without any code. Just follow these steps:

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 to add a header image, you’ll need to select an upgraded license like Pro, Plus, or Elite.

WPForms pricing

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.

Adding a new form in WPForms

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 Fiel Options and add our media and edit the text using the easy text editor on the left-hand pane.

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.

With our image in place, we can then edit the size, orientation, and other details of the image or logo.

To ensure our image acts as a header image, 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.

WPForms update preview 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.

Create New page to Embed Form

 

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.

Fantastic!  You’ve now successfully added a header image to your WordPress form.

Add a Header Image to Your Form Now

Next, Stop Contact Form Spam in WordPress.

With an attractive new form customized with your choice of the header image, you’ll be inviting lots of website visitors to fill out your form.

But you don’t want to collect spam with your new form.

To keep spammers from filling out your forms, check out this article on how to prevent spam submissions in your WordPress forms.

Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes lots of free 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. Hi Stefan,

      The Content field allows you to add extra content to your forms, such as images, videos, headings, and text, without using code.

      For more details, be sure to check out our guide to using the Content field.

      Hope this helps 🙂

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.