Update Your Contact Form: Linked GDPR checkbox, Columns for Options, Success Message Styling – Divi Tuts
The Divi contact module is much more extendable than people give it credit for, but documentation is spread across several posts and support threads. Here are a few lesser known configurations and some of our own simple customizations that can enhance your contact...
Divi Contact Module Google reCaptcha Plugin
Symbiosis…it’s a beautiful thing! We saw several requests on a bunch of different forums for Google reCaptcha integration in Divi forms, and we took your request to heart. We began developing a plugin to support the integration. Now, two weeks have passed...Latest Posts
State and Country Fields – Create Forms with an Address Quickly with Divi Contact Extended
Ever tried to add a list of states or countries... Read more
Ever tried to add a list of states or countries to your Divi Contact form? It's a real pain. Countries and states / provinces are now available in Divi Contact Extended as two brand new field types called the State and Country fields. Rather than wasting time adding every state or more time adding all of the country options, you can create things like an Address field in seconds.
State Field - Divi Contact Extended
If you add the state field without the Country field, the US states will show in the dropdown selection. You can enable multi-select when you want your users to have the option of selecting more than one state.
Country Field - Divi Contact Extended
Like the state field, you can enable multi-select in the country field. If you add both the state and country fields, the state/province options will dynamically show based a user's country selection. You can also set a default country. If most visitors to your website from a certain country, you can show that country without them having to select it. Both the state and country fields can be set to required and full-width.
Seamless Integration
Like all our fields both core and custom, you can set them appear in the email notifications for both the site admin and the user submitting the form.
Update Your Contact Form: Linked GDPR checkbox, Columns for Options, Success Message Styling – Divi Tuts
The Divi contact module is much more extendable than people... Read more
The Divi contact module is much more extendable than people give it credit for, but documentation is spread across several posts and support threads. Here are a few lesser known configurations and some of our own simple customizations that can enhance your contact form.
Full Width Contact Fields
This question rears its ugly head on the regular in the support thread. By default, most field types are 50% width. Converting them to full-width so that they span the length of the column is an easy change in the field’s design tab.
Link to Privacy Policy (checkbox)
This nifty trick may help you achieve compliance with the GDPR. Here’s the big caveat. YOU MUST USE THE VISUAL BUILDER. I have never used the visual builder to create or update a page, so this was a learning moment.
So, if you need a link to your privacy policy, simply add a checkbox field type, add one option and enter the text you want. Then add the text you want linked by selecting the link icon and adding the text and hyperlink.
Style Success Message (div.et-pb-Contact-message)
We can personalize our success message content, but not the background, font family, etc. To do so, open up your theme customizer and add something like this: [css] div.et-pb-Contact-message { background: #000; color: #fff; text-size: 24px; } [/css]Style or Hide Field Titles
By default, checkbox and radio fields must display the title or label. If you don't enter anything in the title field, it will simply display "New Field". Here's a way to hide the title in the theme customizer. You could also modify the css below to increase the font size or weight. [css] .et_pb_contact_field_options_title { display: none; } [/css]Columns for Radio / Checkbox Options
Do you have checkbox or radio field with a long list of options? They display single file by default, which can lead to a lot of white space, especially if you have four or more options. You can create columns by adding the code below. Go to the checkbox/radio field settings, select the advanced tab and insert the css into the main element checkbox. Adjust the column-count to increase the number of columns. Adjust the column gap to get your desired spacing.
[css]
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
[/css]
Divi Contact Module Google reCaptcha Plugin
Symbiosis…it’s a beautiful thing! We saw several requests on a... Read more
Symbiosis...it's a beautiful thing! We saw several requests on a bunch of different forums for Google reCaptcha integration in Divi forms, and we took your request to heart. We began developing a plugin to support the integration. Now, two weeks have passed since we released our plugin that connects Divi's Contact Module with Google's reCaptcha. Our vision doesn't end at Google reCaptcha integration. Our commitment to you is the 100% of the plugin's cost will support future development. Everyone who purchases the current Contact Module Google reCaptcha Plugin will be rewarded. We'll send you a great coupon.
Divi Contact Extend
Our plan is build out the contact module's functionality as we gain customers. We'll call this plugin Divi Contact Extend. In addition to the plugin, we'll offer annual support, which will be included in the new plugin's price.Future Development List
In no particular order, here is our vision in an itemized list as of today (March 20, 2018)- Submit Button Align Left Option: Users should easily have the ability to align the captcha box and submit button to the left side of the contact form without adding CSS.
- Notification Email Enhancements: The notification you receive when a visitor submits a form on your website could use some love.
- Submit Location: Capture the page url where the form was submitted. You may display the same form on several pages. It would be nice to know where a visitor was when he or she submitted that form.
- Show field labels: If you have a longer form with multiple fields, it may be easier to read the email with the field labels/headers displayed.
- Email Routing: Who is notified of a form response sometimes depends on the field values. For example, if [field x] is [value a], email person a.
- File Upload Field: Allow visitors to upload a file or multiple files. Allow administrators to determine file size and type restrictions.