Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Formidable Team / Last Updated February 22, 2022

How to Insert Images in WordPress Forms to Increase Engagement

Adding images to your forms is now a piece of cake! See how to add form images without touching a line of HTML!

How to Add Forms Images in WordPress

Building forms is relatively simple if you have access to the right tools. However, getting users to fill out those forms is another matter entirely. For that to happen, you'll need to figure out ways to make your forms feel more engaging. One effective way to increase engagement and form conversion rates is by adding form images.

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

Most WordPress form plugins don't offer easy ways to add images to the forms that you create. However, using the right plugin for the job makes it easy to upload a photo to a form.

In this article, we'll talk about why you should use form images to increase user engagement. Then we'll show you how to insert an image in HTML using Formidable Forms. Let's get to it!

Why use images in WordPress forms

Creating user-friendly forms is simple if you have access to a drag-and-drop builder. The form editor enables you to customize every aspect of your contact forms and registration forms with almost any type of field that you can imagine.

The problem with forms is that they're fully text-based. That's not necessarily a bad thing, but plain text doesn't make for the most engaging website elements. Studies show that simply adding images can increase engagement with your posts and forms by 37 percent.

Adding images to a form can make it more visually appealing. That means you can add images wherever you want.

You can easily place images at the top of a survey to draw attention, throughout your form to break up blocks of text, or you could make images interactive to make your forms more enjoyable to complete. You could also consider adding them to an image carousel in WordPress to conserve space.

But that's not all. The types of form images you use can make a big difference. For instance, you can:

  • Include images that enhance your brand (such as a logo)
  • Add graphics that show users how to interact with the form
  • Enhance or point out the form's Call-To-Action (CTA)
  • Break up long forms into more manageable sections
  • Add clickable images to replace radio selection buttons
Image Selection
Choose your images intentionally. Images should always make sense in context and enhance the elements around them.

How do you upload a photo to a form?

Adding images to WordPress forms is easy if you're using the right plugin. For this tutorial, we'll show you how to add a form image using Formidable Forms. Let's get to it.

Step 1: Create a new form

Formidable Forms offers plenty of options when it comes to creating new forms. You can design forms from scratch or take advantage of one of the many form templates:

Creating a new form using Formidable Forms

During this step, we recommend that you start thinking about how best to incorporate form images. What image you use will depend on the type of form that you want to build and the fields that it contains.

Once you choose a type of form to create, select it and the editor will open. Now, let's see how you can upload a photo to a form.

Step 2: Upload a photo to a form

When you open the form editor, you'll either get access to a blank slate or a template, depending on what option you chose. To the left, you have a menu that enables you to add new fields and configure existing ones. To the right, you have a preview of your form:

Example of a Formidable Forms template

In that example, you can see a user information form template. That template already includes an HTML field, which is precisely what we need for adding form images. If you're starting from scratch or using a template that doesn't include an HTML field, go ahead and add one:

how to insert and image in HTML form field

After adding the HTML field, click on it to open the Field Options menu. On the left you'll see a small editor that includes an option for adding media files. To add an image, click on the Add Media button. At this point, you can upload a new image to WordPress or choose one from your library:

how do you upload a photo to a form

After you upload an image, you'll see it appear within the text editor to the left of the screen.

The HTML field to the right won't reflect that image yet. Before that can happen, you'll need to click on the Update button in the top-right corner of the screen. After you update the form, the HTML field will display the image. If you preview the form, that image will show up wherever you placed the HTML field:

Placing a contact page image in a form

Now, just add it to a page, like a contact page and you're done. Go to Pages and Add new to create a contact us page, or simply open one that's already been created.

Keep in mind that this is just an example. Formidable Forms enables you to place any image that you want anywhere within the forms that you create. You can even add multiple images inside a single form.

Or if you're looking for an images survey, check out our radio buttons images tutorial:

insert images as radio buttons

Conclusion

Most WordPress contact form plugins don't offer a simple way to add images to your forms. Usually, you need to use HTML to insert images manually. However, Formidable Forms simplifies that process by enabling you to add images using the form builder.

With Formidable Forms, you can upload new images or choose existing ones from your media library and add them to your forms. All you have to do is add an HTML field where you want the image to go and use the Add Media button to select a file.

We hope this step-by-step guide on how to add images to WordPress forms has helped you do more with your forms to increase engagement and conversions. Adding an image can be just the thing to draw the eye and encourage people to signup. And if you want to easily customize your forms even more, try adding a color picker field to make designing a breeze!

If you're ready to start creating forms that aren't just plain text, get started with Formidable Forms today. With Formidable Forms, you get access to dozens of templates. You can also add images to any of your forms!

Read more about great form design

  • How to Change the WordPress Block Background Color How To Change the WordPress Block Background Color
    Read More
    How to Change Contact Form Button Color in WordPress
    Read More
    Conversational Form Design Conversational Form Design: Everything You Need to Know
    Read More

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Comments

  1. rahuk says

    March 18, 2022 at 11:59 pm

    Now this one is really good and informative. I was creating a from and there need it so thanks

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Email Updates

Popular Resources

    • How to Create a Searchable Database on a WordPress Site
    • Create a WordPress Custom Calculator: Easy, Powerful Results
    • How to Create a Fitness Tracker in WordPress
    • Formidable Views: The Best WordPress Custom Application Plugin
    • How To Require Email To Download Files in WordPress
    • How to Create Conditional Drop Down Lists in WordPress Forms
    • Best Gravity Forms Alternative for WordPress: Formidable Forms vs. Gravity Forms
    • How to Make a Quiz in WordPress
    • WPForms Alternative: Formidable Forms vs. WPForms Compared

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews