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 Google reCaptcha Plugin – Update 1.1
Divi Contact Google reCaptcha is now Divi Forms Google reCaptcha in the first update since the plugin’s release. Our sincerest thanks goes out to everyone who has purchased the plugin. From the start, we wanted to listen to your needs, which is why we’re...
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
Create a Custom Divi Hero / Header Section with Badge
Here’s a tutorial on creating a cool header section using... Read more
Here's a tutorial on creating a cool header section using the Divi Builder. In this tutorial, we create a different view for desktop and mobile. We add an image to look like a badge, make a button using the text module, and insert an Elegant Themes icon. If you like the layout, you can build it yourself by following along with the tutorial. Or you can skip to the end and download the importable Divi file for free by clicking this link.
Text:
- <h1>Stop Spammers</h1> <p style="font-size:26px;">The best FREE anti-spam plugin on WordPress entrusted by 60K sites.</p>
- Padding-left – Desktop: 8%
- Padding-left – Mobile: 25px
- Alignment – Desktop: Left
- Alignment – Mobile: Center
- Shrink header text on mobile
- Text: <p style="font-size:26px;"><strong><span class='et-pb-icon' style="font-size:20px;"> </span> Download</strong></p>
- Background: #eb4296
- Hover: #0F2540
- Padding: 15px
- Margin-left – Desktop: 8%
- Margin-left – Mobile: 0%
- Link: https://wordpress.org/plugins/stop-spammer-registrations-plugin/
- Open new tab
- Max-width: 450px
- Desktop
- Margin-top – Desktop: -77px
- Margin-bottom – Desktop: -50px
- Mobile
- Margin-bottom: 0px
- Padding-top: 50px
- Margin-top: 0px
- Desktop
- Background: Clear
- Margin-bottom: 50px
- Mobile
- Gradient 1: #0078be
- Gradient 2: rgba(255,255,255,0.1)
- Direction: 150deg
- Start and End Position: 65%
- Padding-bottom: 230px
- Margin-bottom: 50px
- Desktop
- Gradient 1: #0078be
- Gradient 2: rgba(255,255,255,0.1)
- Direction: 140deg
- Start and End Position: 60%
- Max-height: 350px
- Mobile
- Background: Clear
- Custom CSS: margin: auto;
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 Google reCaptcha Plugin – Update 1.1
Divi Contact Google reCaptcha is now Divi Forms Google reCaptcha... Read more
Divi Contact Google reCaptcha is now Divi Forms Google reCaptcha in the first update since the plugin's release. Our sincerest thanks goes out to everyone who has purchased the plugin. From the start, we wanted to listen to your needs, which is why we're happy to say that every update was based on client feedback.
Divi Forms Google reCaptcha Fixes
The reCaptcha box looked too big on mobile devices, sometimes going off the page. Now, the box is smaller for smaller screens. Another fix solves for the issue of 2 captchas displayed at one time. You no longer need to manually disable Divi core's math captcha on every form. Activating this plugin will disable it automatically.Divi Forms Google reCaptcha Additions
The plugin supports a couple extra features that Google offers. One is the dark skin theme. The second feature is Google's Invisible reCaptcha. Another update, and the reason for the plugin name change, is that the plugin supports inserting the reCaptcha box into Divi's Opt-in form module. Get the plugin here! Keep your eyes peeled for more announcements coming soon!
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.