The Divi Multistep Contact Form plugin was built to be highly customizable to match any theme or layout.
One important way to achieve this seamless look with your website is to customize the ‘next’ and ‘back’ buttons users see as they navigate through the steps of your form. This can be done right in the Divi Builder using the built in controls, here’s how.
Enable the custom buttons
To enable custom buttons, open your Divi Contact Form module, click the Design tab and open the Buttons toggle.
Note: these toggles will only be available if you’ve enabled the Multistep Features for the module, which can be found in the Content tab under the Elements toggle. See this article on enabling the Multistep Features for more information.
Inside the Buttons toggle, you will see 3 toggles:
- Use Custom Styles For Button. Controls the styling for the submit button.
- Enable Custom Styles for Multistep ‘Back’ Button. Enables controls to style the button used for the ‘back’ button.
- Enable Custom Styles for Multistep ‘Next’ Button. Enables controls to style the button used for the ‘next’ button.
Enabling the custom styles for either the ‘Back’ or ‘Next’ button will display additional controls you can use to adjust the styling of the button to match your theme or layout, including:
- background color
- border color
- border radius
- border width
- font weight
- text color
- text size
Having control over both the ‘Back’ and ‘Next’ buttons separately allows you to be creative in your design to really make your form stand out.
Be sure to clear any caches after changes
Because this plugin extends an existing, native Divi module, it’s recommended you clear any caching plugins active on the website (and your browser cache for good measure) after making any changes.
If your website is still in active development prior to launching, it’s considered best practice to leave all caching plugins disabled while working on the website to avoid any caching conflicts.