5 Ways to Use an HTML Field in Your WordPress Form

Have you ever felt stuck while creating your WordPress form, wishing you could add something extra to make it truly unique and personalized? It can be frustrating when you’re searching through all the form fields but can’t find a way to inject that special touch.

The answer is the HTML field. With this versatile field type, you can easily integrate extra content into your WordPress form, offering you the flexibility you’ve been seeking.

In this article, we we’ll not only guide you through the process of adding an HTML field to your WordPress form, but we will also provide practical examples of when you can effectively use it. So, without further delay, let’s dive right in!

How to add an HTML field to your form

Before we get started, you should know that, unlike many other form builders, Ninja Forms’ HTML field is part of the free core plugin so you don’t need to have the premium version to take advantage of this form field.

Adding an HTML field to your WordPress form is super easy with our drag-and-drop form builder. All you need to do is click on, or drag-and-drop the HTML field located under the Layout Fields into your form builder.

Once you add this field to your form, this is when the fun starts! With so many options, you can spice up your forms to your liking using the Summernote WYSIWYG editor for WordPress. Additionally, under the Display setting, you have the option to style your HTML field even further with custom class names.

But not just that. You can even copy or write your own HTML or CSS. Your call!

Now that you know how to add an HTML field on your form, let’s take a look at 5 effective ways to use this field in the action!

5 Ways to incorporate an HTML field to your form

The HTML field allows you to include formatted text, introduce extra spacing, showcase links, or feature various media types. Regardless of your familiarity with HTML, you can tailor our HTML field using the built-in Summernote editor tool, or alternatively, you can insert your own code to customize it.

Now, let’s explore practical use cases for implementing the HTML field within your WordPress form.

1. Add your logo or image to a form header

This is probably one of the most popular ways to use HTML field in WordPress forms. Using authentic images or your brand’s logo adds a personal touch that goes beyond a plain form without any visual elements.

It is very easy to add an image to your WordPress form using Ninja Forms. Just add an HTML field to your form, and click on the image/sound icon in the HTML field settings using the Summernote WYSIWYG editor. (You can add a video the same way.)

After adding the image, you can make adjustments using the editor. You can center the image or resize it by clicking on it and dragging the bottom right corner.

If you need a specific size, you can click < > button and write your own CSS rule to resize the image. As an example, this is how you would specify the height and width in CSS:

<style>
img {
  width: 400px,
  height: 300px
}
</style> 

3. Add an additional text to your form

Want to add a headline to your form or include terms & conditions or privacy policy on your form? The HTML field fit this particular need. Imagine a situation where you want to inform users your GDPR-compliant form collects personal data.

While you can use a Single Line Text field and add something like “I agree with Terms & Conditions”, if you want your users to have a comprehensive understanding of your terms, it’s advisable to present all the essential information. Transparency is key to establishing trust with your website visitors.

An HTML field is the perfect solution to inform users about which personal data is being collected to notify users of such and to link to your privacy policy.

3. Display the total amount for your quote form using calculations

Did you know Ninja Forms core offers a free feature called Calculations? Combining the HTML field and calculation feature, you can build a WordPress quote request form and display the total amount for the services you offer before your visitors submit the form.

All you need to do is add the HTML field to your form and select merge tag to pull in the calculation in your Total field (we renamed the HTML field) to display the amount.

You can also use the HTML field to display the discount for the total if you are using coupon code to modify the final value. If you want to learn more about setting up the coupon codes in WordPress, make sure to check our guide Master Coupon Codes in WordPress Forms with These Simple Steps.

4. Add links to automatically download files from your form

Let’s say you are preparing a school assignment and you want to include a PDF workbook in the beginning of your form, so students can automatically download it and use it while working on the assignment using your WordPress form.

This can be easily done with the HTML field. Just add the field to your form and upload the file using the camera/note icon.

Once you upload the file, it should show in the text editor field as a link. Now click < > button to open the code editor. Next, you will want to insert the word download after the “HREF” attribute. It will look like this:

<a href="Your File URL" download>Name of Your Text File</a>

This is how it will look like in your code editor:

5. Show a preview/summary page for multi-step form

In some cases, you migh need to show your form submitter a preview of their form before they submit. This extra step prevents a lot of errors. It can even weed out the typos that could cost you money when they slip through.

This applies especially to mutli-step forms when you have a lot of data on each step of the form. The last thing you want is make user go back and forth between the form pages. Luckily, the HTML field gives you the power to create a review page with a custom message at the end of your form, so user can double-check their information before submission.

To create a confirmation page/summary page, add an HTML field to the form as an additional page (step) at the end of your multi-step form. Within the HTML field, you can use the merge tag button to insert the merge tags of all of the prior fields. The user could review their filled form clearly on one single page before submitting the form.

 

Congrats on mastering the HTML field!

You’ve just learned how to add an HTML field to your WordPress form and discovered some ideas to act on. Whether you need to spice up your form with a unique and compelling image, or need to add addtional content to your form, HTML field is here to assist you.

The best part is, unlike some other form builders, Ninja Forms provides access to this field for free. But our user-friendly WordPress form builder doesn’t stop there. We take pride in offering numerous free features that you don’t even need the premium version to build your forms.

If you haven’t tried our contact form plugin, we encourage you to give it a spin. You’ll immediately fall in love with our simple UI and powerful features that are essential for your form-building needs. Plus, it won’t cost you a thing!