There’s so much to talk about in this Divi 5 feature update!
We harmonized field options across all form-based modules, adding additional styling options for form elements such as radio buttons and checkboxes.
In addition to hover editing, we added new editing modes for field-based pseudo-classes, such as :checked and :focus, giving you full control over your form field design.
New input, checkbox, and radio groups now support presets, making it easy to style all your forms using Divi 5’s modular design system.
Finally, we added a new Contact Form 7 module that lets you render and style forms with Divi’s full design suite. It’s the first of many new modules to come!
There’s much to explore, so let me jump into the builder and give you the full tour. 👇
New Form Field Options
We updated all form-based modules, harmonizing the available design options and adding new options to customize different field types. We cleaned up the randomness and added hundreds of new options in the process.
New Input, Radio, and Checkbox Settings
Previously, Divi’s form-based modules had a single Field group for customizing form fields. The available settings were inconsistent and often applied to some input types but not others. You did not have full control over your form’s design.
Now, field design options have been split into Input, Checkbox, and Radio groups, allowing you to customize these field types individually.
Furthermore, additional options for label text and placeholder text have been added to each.
When combined with Composable Settings, you now have full control over your form design, including additional CSS.
Refactoring and Harmonizing Field Options
Divi has many form-based modules, but the form field settings were inconsistent. Some modules had one-off focus-related settings. Some had options to customize label text, while others didn’t. Furthermore, many options were missing; you could customize field background colors, but you couldn’t use Divi’s wide range of background settings (among other things).
Now, every form-based module comes with the same set of input, checkbox, and radio settings, and each benefits from Divi’s entire suite of design options. You can customize everything! No more limitations, and no more unpredictability.
New Pseudo Class Editing Modes
If you are a Divi user, you will know that Divi lets you customize the :hover state of any module. You can switch to hover editing and customize any of Divi’s design options. When a user hovers over an element, the design transitions to its hover style.
Now, you can customize additional pseudo-classes related to forms, including :focus and :checked.
Divi’s old focus-specific design options have been deprecated and migrated to focus mode.
Form Field Presets
Form field groups now support presets! You can create presets for inputs, radios, and checkboxes to keep your form design consistent across all modules.
Instead of customizing each form-based module individually, simply adjust your form field presets, and all modules will assume that base design.
Contact Form 7 Module
The new Contact Form 7 modules let you choose from any CF7 form and render it inside a Divi block. Then, you can customize every aspect of its design using Divi’s new form field settings and presets.
This is the first of many more integration-based modules to come, tightening Divi 5’s native compatibility with your favorite third-party plugins.
Modified Settings Dot
One more thing! You’ll notice a new blue dot in the settings panel, indicating that a setting has been modified and that an option group contains modified settings.
In addition to the modified settings search filter, this makes it easier to see at a glance which parts of an element have been modified.
It’s just a little dot, but it’s also a major quality-of-life improvement.
Try Divi 5 Today
Complete site editing is now available for Divi 5. Give it a try and let us know your thoughts.
We rebuilt Divi from the ground up and packed it full of dozens of your most requested features. Forget everything you thought you knew about Divi, because Divi 5 is an entirely different beast.
Have You Tried Composable Settings for Divi 5?
In case you missed it, we recently released Composable Settings for Divi 5.
Now, you can enable any of Divi’s design options for any module sub-element.
Composable Settings completely harmonizes the available settings for Divi modules, which means you’ll never have to use CSS to fill the gaps; enable sizing options for buttons, animation options for titles, and everything in between.
It opens up hundreds of new possibilities.
Watch this video for all the details. 👇
More Divi 5 Updates Are On The Way
The features keep coming, and we aren’t slowing down anytime soon!
If you are enjoying these updates, do us a huge favor and let us know by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.
Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. 😁
Great work i love it .. i wish to add submission forms on dashboard .. add read, update, delete forms operations with creating custom views as i want .. custom login, register and lost password forms with changing urls .. i think it will be great ideas.. but at all great work from ET team
Gravity forms next please!!!