7 Tips For Better Divi Forms in WordPress

2019-03-22 | Divi, Divi Forms | 44 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.

Free course: Crearte a Stunning Contact Page with Divi

Related post: How to Style the Divi Form Success Message

Related post: How to add a Privacy Policy link in your Divi Form

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.

A good alternative for more advanced forms is the plugin Ninja Forms.

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

Video tutorial on how to create a contact form with Divi

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

Purchase Divi Form DB at Elegant Marketplace » (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 Content Email and add as many email addresses as you want.

Separate the email addresses with commas (,) with or without spaces in between.

Example: [email protected], [email protected]

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

Video tutorial on how to add Google reCaptcha V3 to your Divi forms

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

44 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
  15. Hi! Is it possible to change the input text color (when someone begins typing) to black?

    Reply
    • Hi Matt! Sure you can. Just click the cogwheel to open the settings for the Divi Form Module and open the Design tab. Expand the “Fields” tab and change the “Fields Text Color” value to #000

      Reply
    • Hi again. Just a short correction: To change the input color, you should go to the same tab and change “Fields Focus Text Color” to #000. The “Fields Text Color” refers to the lead text that is visible when the field is inactive. Sorry about the mixup!

      Reply
  16. Regards, I want your contact form details. I could display it. On that page. What I set up on the Contact form to redirect you there. I also create that page with Divi editor.

    So the user enters his name eg “Laszlo” in the contact form. I will then redirect you to a specified page. Where I write his name is “Dear Laszlo ….”

    Reply
    • Hi Balk,

      You can redirect the visitor to a thank you page by activating “Enable Redirect URL” under the Redirect tab in the Form module. This page can be made with the Divi Builder, but I’m afraid that you can’t display the visitors name data here.

      You can actually display some dynamic data in the default Success Message field by clicking the + icon to the right in the Success Message field. But, sadly, the form fields is not available here. The most exciting you can do is to add current date, for example: “Thanks! Your message was sent June 18:th” or the Page Author name, for example: “Thanks! Balk will contact you soon.”

      Maybe the plugin Caldera Forms have the feature that you are looking for.

      Reply
  17. Thanks for this! Very useful. I also found a free plugin called Divi Supreme on the wordpress plugin repo that does the styling of contact form 7 with visual builder. In other words you don t have to do custom CSS coding at all. Maybe could be helpful for others. Cheers.

    Reply
    • Thanks for sharing! I actually have a review post about Divi Supreme coming up later this year. 🙂

      Reply
  18. I cant add my email address, to which i want the contact form to send the emails to. can anyone help?

    Reply
    • Hi Shaurya! Just open the form settings and go the the tab Content > Email. Add your email address in the field “Email Address” and hit save. That should do it for you!

      If you are using an SMTP plugin, please check your settings there as well since they could override the settings in your Divi Form module.

      Reply
  19. hi,

    I have a message form at the bottom of my blogpost, would I be able to add the blogpost title in the field Message Pattern as well? I tried %%title%% or %%Post Title%% but it gives me the title of the message form or nothing.

    thank you!

    Reply
    • I’m afraid that’s not possible with the current Divi form without extensive coding. The %%fields%% only refers to data inside of the forms, not from the surrounding page.

      If ET adds a Dynamic Content option in, for example, the ID field (which could be set to “Current page title”) it would be possible to make a work around with an invisible field. But there’s no such option for Dynamic Content in the form fields, yet. :-/

      The only option right now is to use the plugin Divi Form DB (see screenshots in this post) that displays “Submitted from” in a nice way.

      Reply
  20. Thanks for your awesome post. I understand everything but i have a question. Can I make conditional recipients email from the contact form? Is it possible that postal code wise recipients receive the email?

    Reply
  21. Hi CueHacks! I’m afraid that’s not possible with the Divi form as of today.

    Reply
  22. Hi Vector,

    Thank you this is really helpful. You solved two problems success message styling and the validation message color.

    My question to you, Is it difficult for Divi developers to include these two simple things in the contact form property? To me, they are very basic (styling a message) options and we shouldn’t be spending time looking for solutions or coding since we are using their builders and it’s made for non coders?

    Reply
    • Hi Ayman! I’m glad that the article helped you!

      I agree that these settings should be available in the visual builder design settings (and they’ll probably be one day) but I think ET is focused on the upcoming page speed updates right now.

      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.