How to Use the HTML Field in WPForms

Would you like to incorporate some custom HTML into your forms? The HTML field in WPForms lets you do so. This can be useful for adding text, links, and other elements to your forms.

In this tutorial, we’ll show you all the options available for the HTML field in WPForms, as well as some use cases for it.

Before you go any further, make sure WPForms is installed and activated on your WordPress site and that you’ve verified your license. Then you can create a new form or edit an existing one to access the form builder.

Adding an HTML Field to Your Form

Since the HTML field is an advanced feature, you’ll find it under Fancy Fields in the form builder.

The HTML field in the form builder

To add it to your form, click on it or drag and drop it into the preview area.

Adding an HTML field to a form

Apart from adding your HTML, the only field option you need to configure is the label. You can enter whatever text you like in the field provided.

Changing the label of an HTML field

Unlike other fields, the HTML field label is only visible in the form builder to help you identify it in the preview area. Users will not see it on the frontend, and the field will not be included in your form’s entries.

Using the HTML Field

The basics of using the HTML field are quite straightforward. Just enter your text or HTML in the field provided in the Field Options panel.

The HTML Code field

However, there are many different use cases for this field. It’s highly flexible and you can adapt it to many different situations.

Below, we’ve covered some of the most popular use cases in more detail.

Note: Want to add shortcodes to your form’s HTML fields? Check out our developer documentation for a complete tutorial on how to do so.

Adding Stylized Text to a Form

HTML fields are one of many ways you can add extra text to your forms, such as instructions for filling them out or important information you want users to see before they submit their entries.

However, the HTML field is unique because it lets you include stylized text, such as bold text or italics. You can add the appropriate HTML tags right in the Code field in the Field Options panel.

HTML field code with strong tags

Note: If you’re new to HTML, you can find complete lists of HTML elements and attributes on Mozilla Developer Network’s HTML references page.

On the frontend, the example above would look like this:

An example of bold text added with an HTML field

Additionally, you can use HTML tags to add headings, lists, and more to the extra text in your forms.

The HTML field also enables you to add links to your form. This can be useful if you want to enable users to quickly access another page while they’re filling out your form.

To add a link to your HTML field, you need to use the <a> tag. First, add opening and closing tags around the text you want to use to anchor your link.

Adding a tags to an HTML field

Then, in the opening tag, add the href attribute and set it to the URL you want to link to.

Adding an href attribute to a tags in an HTML field

On the frontend, this will appear as a clickable link in your form.

An example of a link created with an HTML field

Note: For more guidance on creating links with HTML, we recommend Mozilla Developer Network’s guide to creating hyperlinks.

Embedding an Image in a Form

You can also use <img> elements to add images to your form. To do so, add <img> to the Code field in the Field Options panel.

Then you’ll need to add the image’s src or source URL. If the image you’re adding to your form is in your WordPress Media Library, you can find its URL by looking at its Attachment Details.

The File URL is at the bottom of the window, and you can click the button to copy it to your clipboard.

Copying an image's File URL from the Media Library

Then add it to the <img> element in your HTML field.

Adding an image to an HTML field

You can also use HTML attributes to change the size of your image and add alt text to it. On the frontend, it might look something like this:

A form with an image embedded in it using the HTML field

Note: If you need more help adding an image to your form with HTML, we recommend Mozilla Developer Network’s tutorial on images in HTML.

Embedding a Video in a Form

The last use case we’ll cover in this article is embedding a video in a form. To accomplish this, you have to use an HTML element called an <iframe>.

Note: For more information on iframes and how they work, please see WPBeginner’s glossary entry for this term.

First, add the <iframe></iframe> element to the Code field in the Field Options panel.

Adding an iframe element to an HTML field

Then you need to add the src for the video you want to embed. If you’ve uploaded the video you’re using to your WordPress Media Library, you can find the File URL as we described in the previous section.

For YouTube videos, you can click on Share » Embed to copy the entire iframe and paste it into your HTML field.

Copying the embed code for a YoutTube video

Once you’ve added your src to your HTML field, you can use HTML attributes to change the iframe’s size and more. On the frontend, it might look something like this:

An example of a video embedded in a form using an HTML field

Note: For a complete tutorial on using iframes, check out Mozilla Developer Network’s article on the iframe element.

Setting Up Notifications and More

After you’ve added some HTML to your form, you use can these fields in form notifications. To learn more, you can read our article on setting up form notifications.

That’s it! Now you have some ideas of how to use the HTML field in WPForms.

Next, would you like to learn about adding custom CSS to your forms? Our beginner’s tutorial has everything you need to get started.