7 Tips For Better Divi Forms in WordPress

✏️ 2019-03-22 | Divi | 26 comments

Tired of grey and boring forms that only spammers bother to submit? Here's som tips & tricks on how to create better Divi forms.
Skribent: Victor Duse
By Victor Duse

Most people associate WordPress forms with something grey and uninspiring. At the same time, new business connections and  opportunities often starts with a form being submitted. There are lots of powerful WordPress form plugins, but they are often difficult to work with and require lots of custom CSS code to even look decent.

For basic contact forms, the built-in Divi Form module works perfect. Here are 7 tricks and hidden features that will optimize your Divi forms.

Use Divi Forms if you want to ...
  • create beautiful forms with Divi Builder
  • use conditional logic
  • create basic contact forms.
  • avoid custom CSS code and shortcodes
  • avoid heavy third-party plugins.
Use a form plugin if you need ...
  • calendars with date pickers
  • file upload in the form
  • automated confirmations to the sender
  • advanced forms.

Tip! Caldera Forms is a good alternative for more advanced forms. A guide for Styling Caldera Forms to Look Like the Divi Contact Form.

1. Make sure the sender’s email and name are visible in the form replies

The form responses are automatically sent via e-mail to the site administrator (or to the recipient you entered in the form module in Content > Email). But what should you do if the sender’s contact information is missing in the Divi form email?

In order for all the information to appear in the email message, you need to click on the form module’s cogwheel icon and navigate to Content > Email and add the following dynamic text in the field Message Pattern:

%%name%%

%%email%%

%%message%%

This force the field IDs name, email and message to be displayed in email messages generated by your Divis form.

If you’ve added more custom fields to your form (eg Phone or Company), then you should also enter these field IDs between %% and %% in the Message Pattern field.

You can also add any random text in the Message Pattern, like “Good morning” or “This is an email from my awesome website!

Display from email address and from name in Divi form emails
Message Pattern in Divi module

Example of a form response with a custom Message Pattern:

Divi form Message Pattern explained

Example of a form response with no custom Message Pattern:

When Name and Email does not display in Divi forms emails

2. Make sure that your Divi form replies arrive in your email inbox

Whether you use Divis forms or a third party plugin such as the Caldera Forms, Contact Form 7 or Gravity Forms, you should always enter your email server information. This will increase the chances of that your form response actually will go all the way to your email inbox.

Install the free plugin WP Mail SMTP (+1 million active installations) and enter your SMTP Host, STMP Port etc. You should encrypt the emails with SSL or TLS for better security. Contact your web host if you don’t know where to find your SMTP credentials.

Always test send a message from your forms afterwards so that you know that everything works as intended.

Add SMTP fields to your Divi form

3. Save Divi form messages in your WordPress database

E-mail in all respects but they have a tendency to disappear in crowded inboxes. Is it possible to save messages from a Divi form in a database per default?

Yes you can, but you’ll need to install a plugin called Divi Form DB. Once you have activated this neat little plugin, every submitted form response is automatically saved and stored in your WordPress database.

You can list the sender, who has read the message and when, which page the message was sent from and the date it was sent.

Save Divi forms messages in a database

The plugins costs $10 for unlimited amount of Divi websites. A pretty good investment, right?

Purchase Divi Form DB at Elegant Marketplace (no affiliate link)

Ps. A nice bonus feature in the Divi Form DB plugin is that you can publish form responses directly as public posts on your WordPress website. But don’t forget that you need the sender’s consent for this.

 

Divi Forms DB plugin

4. Add multiple email recipients to your Divi form

The fact that you can add multiple recipients to your Divis form is a bit of a hidden feature that hardly the Divi support knows about. But it is actually very simple.

Open the form module settings by clicking the cogwheel icon. Navigate to Email > Content and add as many email addresses as you want.

Separate the email addresses with commas (,) and without any spaces.

Example: john.doe@gmail.com,jane.doe@gmail.com

Add multiple recipients to your Divi form

5. Create intelligent Divi forms with Conditional Logic

Conditional logic means that you can show and hide fields, based on what the user has previously answered in the form. It’s a perfect way to reduce noise and create relevant forms.

If a visitor indicates that they are interested in product X, you can choose to display just the fields that are relevant for X and not for Y and Z.

As usual when it comes to the Divi Builder, it is easy and user-friendly to create conditional logic. Create your conditional logic by clicking the cogwheel for each field that you want to edit.

6. Stop spam with the invisible reCAPTCHA v3

Since Divi version 4.0.7 you can add reCAPTCHA v3 spam protection for your Forms modules (and Email Optin modules). So what does this mean? reCAPTCHA v3 is free service from Google that will keep the spammers away from your forms. And the best thing is that your visitor wont even be bothered with bizarre “I am human” checkboxes or “Click all images with a car” since the validation is made in the background.

All you have to to is to login to your Google account, register a new website and paste your new keys in your Forms module settings. Say good bye to spam and tacky math fields.

Pro tip: Start with Minimum score: 0.7 and increase the score step by step, until the spam emails stop coming. The higher score, the tougher gate keeper. But beware, a score over 0.8 increases the risk that you are blocking real users

7. Create beautiful and user-friendly forms with Divi

Last but not least: the greatest advantage with the built-in Divi form module is that you can quickly and easily create really stylish and user-friendly forms – by just using the user-friendly Divi Builder.

Sync the design with the rest of your website. Make sure that readability is good and that the forms look good on large and small screens.

Add your forms to the Divi Library to reycle them on your webite. Or why not export the forms into a json file and import them to your other Divi websites. The sky is the limit!

Read more:

Related posts

26 Comments
  1. Hi
    Is there in Divi3 Form Modul any possibility to add hidden fields?
    That can stop a lot of spam that comes from robots, they fill-out any fields. With a roule you can block sending the form, if this hidden field is filled out. The normal user can see the field and do not fill it out.
    Perhaps this mechanism is a good idea to integrate in the Divi3 Form Module.

    Greetings – Mathias

    Reply
  2. Hi there, is there any way to make the field ID a hyperlink? So, for example, when someone enters a phone number and I receive that via email, I can click straight on the phone number and call them back. Currently, using the message pattern to pull it in only presents it to me as plain text.

    Many many thanks in advance

    Reply
  3. When there are two forms on the one page. Post submitting on the second form, replaces the second form with the first, no matter where in the page it’s positioned. Does any one know how to deal with issue?

    Regards,

    Reply
  4. Hi,
    I would like to ask if there is any possibility to customise validation messages. In my form I have two fields that are required and I want to translate information into my native language as well as style the information. Can I do it from the Divi Builder panel?

    Greetings,
    Marzena

    Reply
  5. Hi Marzena,

    If you change the default website language in WordPress at Settings > General > Site Language, it should affect all your Divi modules. If your language is not already translated in Divi, you could try to use a free plugin like Loco Translate to translate/customize the strings in the Divi Form module.

    You need to do some custom CSS in order to style the error message text. Use the class .et-pb-contact-message, for example:

    .et-pb-contact-message {
    font-size:2em;
    font-weight:900;
    color:#999;
    }

    Please note that this will also affect the “Thank you” message, that has the same class.

    Reply
  6. Hi there
    Is there a way to add the name of the page or post that the form was submitted on, into the message pattern?
    thanks

    Reply
    • Hi Katie,

      Nope, not by default. But you can add a custom page name in the Message Pattern. But if you use the same form on multiple pages (via hooks or Divi 4 global features), that will not work.

      The neat plugin Divi Form DB displays from what page the form was submitted (only in WP backend, not in the emails though).

      Hopefully, Elegant Themes will release an update with this feature + date picker, file uploads and more nice features soon.

      Reply
  7. Thank you for the post, I was transferring from Weebly to WordPress so this info is exactly what I need!

    Reply
    • Welcome to the WordPress family, Angie. 🙂

      Reply
  8. Hi,
    Do you have any idea how to add a dynamic field (e.g. in a message pattern) that will include a post title?
    I need a form that will appear on many pages after clicking a button and popup shows a form.
    And I need to know from what post the message is.

    I have used the dynamic text for CF7 but it stopped to work correctly 🙁

    Regards,
    Dominik

    Reply
  9. One issue I found with a hosting company that may cause your problem is the hosting plan.
    My hosting play is 512MB and 1 processor.
    As soon as I upgraded to 1G ram and 2 processors, the problem went away.
    It was not a plugin this time.

    If you host with godaddy you have to get the ultimate hosting, the economy and deluxe are not enough and I keep running into this problem.
    So, make sure you have at least 1G of ram and 2 processors if you plan to run the divi theme.
    Here is the the error I get

    Load of global defaults has failed
    An error has occurred while loading the Global History States. Various problems can cause a save to fail, such as a lack of server resources, firewall blockages or plugin conflicts or server misconfiguration. You can try loading again by clicking Try Again.

    This is because you only have 512MB of ram and 1 processor.
    Check this before you go with a hosting plan.

    This is one solution

    Reply
  10. For most recent information you have to pay a visit internet and on internet I found this website as a finest website for newest
    updates.

    Reply
  11. Thanks for the information . It is very helpful !! Thanks !!

    Reply
    • Thanks Wuhan, I’m glad to hear that! 🙂

      Reply
  12. Nicely written! Thx guys! Lots of useful things found here.

    Reply
    • Thanks and cheers! 🙂

      Reply
  13. Is it possible to have the user get a copy of their form?

    Reply
    • Hi Kelsey! No, that’s not possible with the Divi form. If you need that feature, I would recommend the plugin Caldera Forms.

      Reply
  14. How do I change the font color on divi form when the submit button is clicked and the error message is shown above the form showing the empty fields to be filled.
    The “missing” field text color is what I want to change so it’s visible on specific backgrounds. Thank you

    Reply
    • Hi Konrad! Just add this CSS:

      .et-pb-contact-message {

      color:#333;
      }

      You can also use this class to change for example font-size and font-style. However, notice that the success message uses the same class, so that text will be affected too.

      Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.