How To Show Asterisks On Required Fields In The Divi Contact Form Tutorial by Pee Aye Creative

How To Show Asterisks On Required Fields In The Divi Contact Form

In this tutorial I will show you how to show asterisks on required fields in the Divi Contact Form module.

FYI: You can do this with a setting directly in the Divi Contact Form module with our popular Divi Contact Form Helper plugin! Take a look, it is so easy!

Divi Contact Form Helper by Pee Aye Creative

1. Add A Custom CSS Class To The Divi Contact Form

The first step in the tutorial is to add a custom CSS class to the Contact Form module. This is used to target the correct module with the code in order to only make this affect only a specific module. This selector is also used in step #2 with the jQuery, so this is important for the code to know which fields to affect.

To add the custom class, open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-contact-form-asterisks” in the CSS Class input field of the Contact Form module.

add CSS class to the Divi Contact form module to add asterisks to required fields

2. Add The Custom jQuery Code Snippet

The second step is to add the custom jQuery code to your website. This step is also very easy, and we are doing the work with only a few lines of code. Simply copy the jQuery snippet below and place it into your Divi website.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

<script>
jQuery(document).ready(function(){
    jQuery(".pa-contact-form-asterisks *").each(function(){
        if(jQuery(this).attr('data-required_mark') == 'required' && !jQuery(this).hasClass('et_pb_contact_captcha')){
            var x = jQuery(this).attr('placeholder');
            var x = jQuery(this).attr('placeholder',x + ' * ');
        }
    });
});
</script>

After adding and saving the code, exit the Divi Builder and view the form on the frontend (the code only takes effect on the frontend). You will see any fields that are set to required will now have an asterisk.

showing asterisks on required fields in the Divi Contact Form module

The code is checking for any field within the contact form with the custom class that has the attribute of “required” within the code. This attribute is visible in the code when the “Required Field” setting is enabled. Our code simply finds it, then finds the placeholder text of that field, and adds an asterisk symbol after the placeholder text.

required field setting in the Divi Contact Form module

Do It With A Setting!

Make life easier and use the Divi Contact Form Helper plugin instead, the ultimate Divi Contact Form upgrade with awesome features and settings!

Divi Contact Form Helper by Pee Aye Creative

The Divi Contact Form Helper plugin has a toggle setting to quickly add an asterisk to any required fields. If you are showing the field label text, it will place it there, or if not it will place it on the placeholder text. Using the plugin can save you loads of time and add lots of additional functionality. Be sure to check out all the other amazing features!

show asterisks on frontend setting for required fields in the Divi Contact Form Helper plugin

Last updated Dec 19, 2022 @ 4:35 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

6 Comments

  1. Steve

    Pschschschschsch … there is a secret third item in the list:
    “3. The no code and module way -> Fill in the title text and press * (it is the one key with the plus sign on the keyboard) and you are ready to go”

    You didn’t mention it in your article, there is nothing wrong with this method or have I made a mistake for the last 10 years? https://imgur.com/a/ucNOsKz

    Reply
  2. Rich

    Thanks Nelson, so what is the simplest way to add * Required field within the form? I feel the asterisks is great but really need some text below saying that.

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart