{"id":251,"date":"2026-10-17T14:16:41","date_gmt":"2026-10-17T14:16:41","guid":{"rendered":"http:\/\/plugin-docs.com\/?post_type=doc&#038;p=251"},"modified":"2026-10-18T19:09:49","modified_gmt":"2026-10-18T19:09:49","slug":"customize-form-buttons","status":"publish","type":"doc","link":"https:\/\/dragwyb.com\/docs\/customize-form-buttons\/","title":{"rendered":"Customize Form Buttons"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Button controls determine how the form&#8217;s main action buttons look and fit within the layout. Smart Form Builder by Dragwyb provides shared styling for the submit\/next button and separate settings for the previous-step button used in multi-step forms.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Open the Button controls<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open the form in the editor, select <strong>Style<\/strong>, and open the <strong>Button<\/strong> section. Make changes in small steps and inspect the preview after each group of settings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Set width and alignment<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Width Type<\/strong> \u2014 choose <strong>Auto<\/strong> to avoid setting a custom width, or <strong>Custom<\/strong> to specify one. The current default is <strong>Custom<\/strong>.<\/li>\n\n\n<li><strong>Width<\/strong> \u2014 when Custom is selected, set a responsive width using one of the available units: px, %, em, or rem. The configured default is 100%.<\/li>\n\n\n<li><strong>Alignment<\/strong> \u2014 choose <strong>Left<\/strong>, <strong>Center<\/strong>, or <strong>Right<\/strong> for the button area.<\/li>\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Style the submit and next button<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use <strong>Typography<\/strong> to adjust the button text presentation. In the <strong>Submit \/ Next Button<\/strong> controls, the <strong>Normal<\/strong> tab provides <strong>Text Color<\/strong> and <strong>Background Color<\/strong>. The <strong>Hover<\/strong> tab provides separate text and background colors for the pointer-hover state.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Style the previous button separately<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Previous Button<\/strong> section has its own <strong>Normal<\/strong> and <strong>Hover<\/strong> styling controls. The available settings include text color, background color, padding, border, and box shadow. These controls are useful when a multi-step form uses a secondary action that should be visually distinct from the main action.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Button styling does not change the button&#8217;s label or the step sequence. To configure the text shown on Next and Previous buttons or to add step breaks, see <a href=\"https:\/\/dragwyb.com\/docs\/docs\/smart-form-builder\/multi-step-form\/\">Build a Multi-Step Form<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Check accessibility and save<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>Keep button text readable against both normal and hover backgrounds.<\/li>\n\n\n<li>Check the width on mobile so buttons do not create awkward overflow or excessive empty space.<\/li>\n\n\n<li>Preview both main and previous-step buttons when the form has multiple steps.<\/li>\n\n\n<li>Click <strong>Save<\/strong> in the editor header, then open <strong>Frontend Preview<\/strong> to verify the rendered result.<\/li>\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">All controls in the Button section<\/h2>\n\n\n<p class=\"wp-block-paragraph\">The global <strong>Button<\/strong> section contains the following groups:<\/p>\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>Width Type<\/strong> \u2014 Auto or Custom (default). The responsive <strong>Width<\/strong> control appears for Custom and supports px, %, em, and rem; the configured default is 100%.<\/li>\n\n\n<li><strong>Alignment<\/strong> \u2014 Left, Center, or Right.<\/li>\n\n\n<li><strong>Typography<\/strong> \u2014 controls the button label&#8217;s text appearance.<\/li>\n\n\n<li><strong>Submit \/ Next Button<\/strong> \u2014 separate <strong>Normal<\/strong> and <strong>Hover<\/strong> tabs, each with <strong>Text Color<\/strong> and <strong>Background Color<\/strong>.<\/li>\n\n\n<li><strong>Previous Button<\/strong> \u2014 separate <strong>Normal<\/strong> and <strong>Hover<\/strong> text\/background colors for the previous-step button. These controls are conditional on step indicators being enabled.<\/li>\n\n\n<li><strong>Padding<\/strong> \u2014 adjust the inner spacing around button text; the control supports px and em.<\/li>\n\n\n<li><strong>Border<\/strong> and <strong>Box Shadow<\/strong> \u2014 configure the button outline and shadow.<\/li>\n\n<\/ul>\n\n\n<p class=\"wp-block-paragraph\">Button styles do not change the button label or the form&#8217;s step sequence. Configure those in the field\/step settings, then save the form and verify both the normal and hover states in <strong>Frontend Preview<\/strong>. For the full inventory of all global style sections, see <a href=\"https:\/\/dragwyb.com\/docs\/docs\/smart-form-builder\/design-templates\/\">Form Design and Templates<\/a>.<\/p>\n\n\n\n\n<p class=\"wp-block-paragraph\">Screenshot to add: Button section showing width, alignment, Normal, and Hover controls<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Set submit and navigation button width, alignment, typography, normal and hover colors, and separate previous-button styling.<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":247,"menu_order":0,"template":"","class_list":["post-251","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":2,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/251\/revisions"}],"predecessor-version":[{"id":1162,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/251\/revisions\/1162"}],"up":[{"embeddable":true,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/247"}],"wp:attachment":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/media?parent=251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}