{"id":121,"date":"2020-01-30T07:51:57","date_gmt":"2020-01-30T12:51:57","guid":{"rendered":"https:\/\/docs.wpcreatorsclub.com\/?p=121"},"modified":"2020-01-30T08:21:53","modified_gmt":"2020-01-30T13:21:53","slug":"customizing-buttons-on-divi-multistep-contact-form","status":"publish","type":"post","link":"https:\/\/docs.wpcreatorsclub.com\/customizing-buttons-on-divi-multistep-contact-form\/","title":{"rendered":"Customizing Buttons on Divi Multistep Contact Form"},"content":{"rendered":"\n<p>The <a aria-label=\"Divi Multistep Contact Form plugin (opens in a new tab)\" href=\"https:\/\/wpcreatorsclub.com\/downloads\/divi-multistep-contact-form\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"rank-math-link\">Divi Multistep Contact Form plugin<\/a> was built to be highly customizable to match any theme or layout.<\/p>\n\n\n\n<p>One important way to achieve this seamless look with your website is to customize the &#8216;next&#8217; and &#8216;back&#8217; 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&#8217;s how.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Enable the custom buttons<\/h2>\n\n\n\n<p>To enable custom buttons, open your <strong>Divi Contact Form<\/strong> module, click the <strong>Design<\/strong> tab and open the <strong>Buttons<\/strong> toggle.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"388\" src=\"https:\/\/docs.wpcreatorsclub.com\/wp-content\/uploads\/2020\/01\/multistep-contact-form-buttons-toggle.jpg\" alt=\"Divi multistep contact form Design &gt; button options\" class=\"wp-image-122\" srcset=\"https:\/\/docs.wpcreatorsclub.com\/wp-content\/uploads\/2020\/01\/multistep-contact-form-buttons-toggle.jpg 800w, https:\/\/docs.wpcreatorsclub.com\/wp-content\/uploads\/2020\/01\/multistep-contact-form-buttons-toggle-480x233.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw\" \/><\/figure><\/div>\n\n\n\n<p><strong>Note<\/strong>: these toggles will only be available if you&#8217;ve <strong>enabled the Multistep Features<\/strong> for the module, which can be found in the <strong>Content<\/strong> tab under the <strong>Elements<\/strong> toggle. <a href=\"https:\/\/docs.wpcreatorsclub.com\/divi-multistep-contact-form-is-showing-all-steps-at-once\/\" class=\"rank-math-link\">See this article on enabling the Multistep Features<\/a> for more information.<\/p>\n\n\n\n<p>Inside the Buttons toggle, you will see 3 toggles:<\/p>\n\n\n\n<ul><li><strong>Use Custom Styles For Button<\/strong>. Controls the styling for the submit button.<\/li><li><strong>Enable Custom Styles for Multistep &#8216;Back&#8217; Button.<\/strong> Enables controls to style the button used for the &#8216;back&#8217; button.<\/li><li><strong>Enable Custom Styles for Multistep &#8216;Next&#8217; Button.<\/strong> Enables controls to style the button used for the &#8216;next&#8217; button.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"387\" src=\"https:\/\/docs.wpcreatorsclub.com\/wp-content\/uploads\/2020\/01\/divi-multistep-contact-form-custom-toggles.jpg\" alt=\"Divi multistep contact form custom button toggles\" class=\"wp-image-123\" srcset=\"https:\/\/docs.wpcreatorsclub.com\/wp-content\/uploads\/2020\/01\/divi-multistep-contact-form-custom-toggles.jpg 800w, https:\/\/docs.wpcreatorsclub.com\/wp-content\/uploads\/2020\/01\/divi-multistep-contact-form-custom-toggles-480x232.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw\" \/><\/figure><\/div>\n\n\n\n<p>Enabling the custom styles for either the &#8216;Back&#8217; or &#8216;Next&#8217; button will display additional controls you can use to adjust the styling of the button to match your theme or layout, including:<\/p>\n\n\n\n<ul><li><strong>background color<\/strong><\/li><li><strong>border color<\/strong><\/li><li><strong>border radius<\/strong><\/li><li><strong>border width<\/strong><\/li><li><strong>font weight<\/strong><\/li><li><strong>text color<\/strong><\/li><li><strong>text size<\/strong><\/li><\/ul>\n\n\n\n<p>Having control over both the &#8216;Back&#8217; and &#8216;Next&#8217; buttons separately allows you to be creative in your design to really make your form stand out.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Be sure to clear any caches after changes<\/h2>\n\n\n\n<p>Because this plugin extends an existing, native Divi module, it\u2019s recommended you clear any caching plugins active on the website (and your browser cache for good measure) after making any changes.<\/p>\n\n\n\n<p>If your website is still in active development prior to launching, it\u2019s considered best practice to leave all caching plugins disabled while working on the website to avoid any caching conflicts.<\/p>\n<div class=\"helpful-block-content wth-theme-faces\" data-title=\"\">\n<ul>\n<li><span class=\"wth-title\">Did this answer your question?<\/span><\/li>\n<li><a data-post=\"121\" data-post-url=\"https:\/\/docs.wpcreatorsclub.com\/customizing-buttons-on-divi-multistep-contact-form\/\" data-post-title=\"Customizing Buttons on Divi Multistep Contact Form\" data-response=\"1\" href=\"#\" class=\"wth-green-btn icon-happy icon1-happy\">Yep!<\/a><a data-response=\"0\" data-post=\"121\" data-post-url=\"https:\/\/docs.wpcreatorsclub.com\/customizing-buttons-on-divi-multistep-contact-form\/\" data-post-title=\"Customizing Buttons on Divi Multistep Contact Form\" href=\"#\" class=\"wth-red-btn icon-sad icon1-sad\">No<\/a><\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>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 &#8216;next&#8217; and &#8216;back&#8217; buttons users see as they navigate through the steps of your form. This can be done right in the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[9],"tags":[],"_links":{"self":[{"href":"https:\/\/docs.wpcreatorsclub.com\/wp-json\/wp\/v2\/posts\/121"}],"collection":[{"href":"https:\/\/docs.wpcreatorsclub.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.wpcreatorsclub.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpcreatorsclub.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpcreatorsclub.com\/wp-json\/wp\/v2\/comments?post=121"}],"version-history":[{"count":0,"href":"https:\/\/docs.wpcreatorsclub.com\/wp-json\/wp\/v2\/posts\/121\/revisions"}],"wp:attachment":[{"href":"https:\/\/docs.wpcreatorsclub.com\/wp-json\/wp\/v2\/media?parent=121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.wpcreatorsclub.com\/wp-json\/wp\/v2\/categories?post=121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.wpcreatorsclub.com\/wp-json\/wp\/v2\/tags?post=121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}