{"id":127,"date":"2020-01-30T08:39:18","date_gmt":"2020-01-30T13:39:18","guid":{"rendered":"https:\/\/docs.wpcreatorsclub.com\/?p=127"},"modified":"2020-01-30T08:39:19","modified_gmt":"2020-01-30T13:39:19","slug":"customizing-step-counter-in-divi-multistep-contact-form","status":"publish","type":"post","link":"https:\/\/docs.wpcreatorsclub.com\/customizing-step-counter-in-divi-multistep-contact-form\/","title":{"rendered":"Customizing Step Counter in Divi Multistep Contact Form"},"content":{"rendered":"\n<p>If you&#8217;d like to customize the step headers to more closely match the theme or design of your website, you&#8217;re in luck.<\/p>\n\n\n\n<p>The <a aria-label=\"Divi Multistep Contact form (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<\/a> has built in controls that allows you to customize these heading to suit your needs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"386\" src=\"https:\/\/docs.wpcreatorsclub.com\/wp-content\/uploads\/2020\/01\/divi-multistep-contact-form.jpg\" alt=\"Divi multistep contact form example\" class=\"wp-image-128\" srcset=\"https:\/\/docs.wpcreatorsclub.com\/wp-content\/uploads\/2020\/01\/divi-multistep-contact-form.jpg 800w, https:\/\/docs.wpcreatorsclub.com\/wp-content\/uploads\/2020\/01\/divi-multistep-contact-form-480x232.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw\" \/><\/figure>\n\n\n\n<p>Once you&#8217;ve enabled the Multistep Features for your contact form (<a aria-label=\"read this article for more information on enabling the Multistep Features (opens in a new tab)\" href=\"https:\/\/docs.wpcreatorsclub.com\/divi-multistep-contact-form-is-showing-all-steps-at-once\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"rank-math-link\">read this article for more information on enabling the Multistep Features<\/a>) head over the <strong>Design<\/strong> tab in the module and open the <strong>Text<\/strong> toggle.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"383\" src=\"https:\/\/docs.wpcreatorsclub.com\/wp-content\/uploads\/2020\/01\/divi-multistep-contact-form-text-toggle.jpg\" alt=\"Divi multistep contact form text toggle.\" class=\"wp-image-129\" srcset=\"https:\/\/docs.wpcreatorsclub.com\/wp-content\/uploads\/2020\/01\/divi-multistep-contact-form-text-toggle.jpg 800w, https:\/\/docs.wpcreatorsclub.com\/wp-content\/uploads\/2020\/01\/divi-multistep-contact-form-text-toggle-480x230.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw\" \/><\/figure>\n\n\n\n<p>Once in the Text toggle, if you scroll down you&#8217;ll see additional controls that give you the ability to customize many different aspects of the headers, including:<\/p>\n\n\n\n<ul><li><strong>Font Size<\/strong><\/li><li><strong>Step Text Color<\/strong><\/li><li><strong>Current Step Text Color<\/strong><\/li><li><strong>Completed Step Text Color<\/strong><\/li><li><strong>Step Title Font, Weight, Letter Spacing, Line Height and Style<\/strong><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"386\" src=\"https:\/\/docs.wpcreatorsclub.com\/wp-content\/uploads\/2020\/01\/divi-multistep-contact-form-editing-step-headings.jpg\" alt=\"Divi Multistep Contact Form step heading options\" class=\"wp-image-130\" srcset=\"https:\/\/docs.wpcreatorsclub.com\/wp-content\/uploads\/2020\/01\/divi-multistep-contact-form-editing-step-headings.jpg 800w, https:\/\/docs.wpcreatorsclub.com\/wp-content\/uploads\/2020\/01\/divi-multistep-contact-form-editing-step-headings-480x232.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw\" \/><\/figure><\/div>\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=\"127\" data-post-url=\"https:\/\/docs.wpcreatorsclub.com\/customizing-step-counter-in-divi-multistep-contact-form\/\" data-post-title=\"Customizing Step Counter in Divi Multistep Contact Form\" data-response=\"1\" href=\"#\" class=\"wth-green-btn icon-happy icon1-happy\">Yep!<\/a><a data-response=\"0\" data-post=\"127\" data-post-url=\"https:\/\/docs.wpcreatorsclub.com\/customizing-step-counter-in-divi-multistep-contact-form\/\" data-post-title=\"Customizing Step Counter in 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>If you&#8217;d like to customize the step headers to more closely match the theme or design of your website, you&#8217;re in luck. The Divi Multistep Contact form has built in controls that allows you to customize these heading to suit your needs. Once you&#8217;ve enabled the Multistep Features for your contact form (read this article [&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\/127"}],"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=127"}],"version-history":[{"count":0,"href":"https:\/\/docs.wpcreatorsclub.com\/wp-json\/wp\/v2\/posts\/127\/revisions"}],"wp:attachment":[{"href":"https:\/\/docs.wpcreatorsclub.com\/wp-json\/wp\/v2\/media?parent=127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.wpcreatorsclub.com\/wp-json\/wp\/v2\/categories?post=127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.wpcreatorsclub.com\/wp-json\/wp\/v2\/tags?post=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}