Add an Image to Ninja Forms: Spice Up Your WordPress Form!

Sometimes you want sheik professional from your WordPress form. No nonsense, minimalist, cut, clean, and tidy. You’ll be able to pull that off effortlessly with your Ninja Forms as they inherit the styling of your theme with a chameleon’s grace. Other times though, you’re going to want to have fun with your WordPress forms! Make them hop up, jump out, grab a reader’s attention. Times like that are perfect for pictures, and we’ve had some questions recently from users about how to add an image to Ninja Forms. It’s easy. Follow along and let’s do this!

How to Add an Image to Ninja Forms

I’ll walk you through it by making a little demo of a newsletter signup. ‘Tis the season for all things pumpkin and such, so I’ve grabbed an image of a couple jack o’lanterns. I’ll assume you either already have a form in mind to add your image to, or have created one to experiment on. Pop that form open and let’s walk through this step by step.

Step 1: Add an HTML field

The HTML field is where images will live in Ninja Forms in version 3.0 and beyond. If you add an HTML field, do nothing to it, and preview the form you won’t even see it. The HTML field exists only for the purpose of displaying whatever you put into it.

Clicking on the HTML field opens its settings window. Here you have a rich text editor that you can add just about anything to- text, links, images, videos, merge tags, you name it.

Step 2: Add the Image in the HTML Field Settings Window

Adding an image is as simple as the click of a button. I’ve highlighted the one you’re looking for in the image below (2). Just click that little guy and the WordPress Media Library opens. Upload your image into the Media Library or choose one you already have there. It’s just like adding an image anywhere else in WordPress!

Here’s exactly what I’ve done to get the above:

1. Added text and made it larger by applying an h2 tag to it.
2. Added the image via the media button
3. Centered both text and image via the alignment button

The second step there is all you actually need to do to get an image. Forget the rest of it unless you want text accompanying it!

Step 3: Preview Your Work!

For this example I’ve added an email and submit field to the form. This is what it looks like in the form builder:

And this is what it looks like on a page:

Step 4 (optional): Spice Up Your WordPress Form!

I’ve lined up the email and submit fields in this form by dragging and dropping them next to each other via our Layout and Styles extension. If you want your email and submit field to line up in a single row like we have here but don’t have Layout and Styles, check this article out and you can learn how to approximate it manually!

If your goal is to make your form as eye catching as possible, there’s a lot more styling options you can take advantage of with Layout and Styles. You can style background colors, borders, text, and more by field or for the form as a whole. As a quick example, I’ve styled the background color of our form below via Advanced>Styles>Row Styles>background color:

Now you know how to add an image to Ninja Forms to spice up any WordPress form! Get creative and go to town!