Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Show Headings, Dividers, Text, Images, Links, And More In An HTML Field In The Divi Contact Form

Nelson Miller Profile Orange
In this tutorial I will show you how to add any content like headings, text, dividers, links, images, or HTML in the Divi Contact Form module.

▶️ Please watch the video above to get all the exciting details! 👆

1. Install The Divi Contact Form Helper Plugin

The first step is to install the Divi Contact Form Helper plugin. Hopefully by now, most of my weekly blog post readers already use the plugin or are members of our all-access Divi Adventure Club, but if not, you can check it out to learn more. The plugin adds tons of settings and features directly to the existing Contact Form module, which will be used for this tutorial to add pretty much anything you want into the contact form.

Divi Contact Form Helper by Pee Aye Creative

2. Add The HTML Field

One of the things the plugin does is add new types of fields to the existing module, like a file upload field, datepicker, and of course this HTML field. Just open the Divi Contact Form module settings and go to the Field Options toggle and make sure to have the Type dropdown set to Input Field (this is not an input field, but this setting is replied for our plugin’s custom fields). Next, enable the setting called User As HTML Field. This will open a text editor for you to add anything you want 

enable the HTML field in the Divi Contact Form Helper plugin

3. Add Your Content To The Field

At this point you can start to add your content!

Keep in mind, this type of field does not submit any data, but rather it is only for the frontend visitor.

HTML free anything field in the Divi Contact Form Helper plugin

4. Adjust The design

We always try to include as many design settings as possible, and this field is no exception. In the screenshot below, you can see a wide range of design options related to different types of content that you add to the field. To find these, open the individual field where you have enabled the HTML field and click the Design tab, then look for the HTML Section toggle. (Note there is no main Design tab, but rather a separate Design tab within each HTML field.)

Wrapper

The Wrapper tab has design settings to style the entire field with spacing, background color, border setting, and box shadow settings.

HTML Field Wrapper Design Settings In The Divi Contact Form Helper

Heading

The Heading tab has the standard text and font design settings for styling any headers.

HTML Field Heading Text Design Settings In The Divi Contact Form Helper

Paragraph

The Paragraph tab has the standard text and font design settings for styling any paragraph text.

HTML Field Paragraph Text Design Settings In The Divi Contact Form Helper

Link

The Link tab has the standard text and font design settings for styling any links.

HTML Field Link Design Settings In The Divi Contact Form Helper

Image

The Image tab has design settings to style any images you may add with width, height, object fit options, spacing, border settings, and box shadow settings.

HTML Field Image Design Settings In The Divi Contact Form Helper

Divider

The Divider tab has all the design settings to make dividers like width, height, color, spacing, and shadow.

HTML Field Divider Design Settings In The Divi Contact Form Helper

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

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

Recent Posts

0

Your Cart