{"id":238,"date":"2026-10-17T14:16:40","date_gmt":"2026-10-17T14:16:40","guid":{"rendered":"http:\/\/plugin-docs.com\/?post_type=doc&#038;p=238"},"modified":"2026-10-18T18:09:54","modified_gmt":"2026-10-18T18:09:54","slug":"set-form-field-widths","status":"publish","type":"doc","link":"https:\/\/dragwyb.com\/docs\/set-form-field-widths\/","title":{"rendered":"Set Form Field Widths"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Use the field&#8217;s layout controls to adjust how much horizontal space it occupies. The editor provides a responsive <strong>Width<\/strong> control and a separate <strong>Grid Column Span<\/strong> control in the field&#8217;s <strong>Advance<\/strong> tab, under <strong>Layout &amp; ID<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Change the field width<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select the field on the canvas.<\/li>\n<li>Open its <strong>Advance<\/strong> tab and expand <strong>Layout &amp; ID<\/strong>.<\/li>\n<li>Find <strong>Width<\/strong> and adjust the value and unit.<\/li>\n<li>Choose from the supported units: <strong>px<\/strong>, <strong>%<\/strong>, <strong>em<\/strong>, or <strong>rem<\/strong>.<\/li>\n<li>Where the responsive control is available, review the setting for the relevant device size rather than assuming one value will suit every layout.<\/li>\n<li>Save the form and preview the result at desktop and mobile widths.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Understand Grid Column Span<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Grid Column Span<\/strong> is a separate responsive control with a range from 1 to 12 and a default value of 1. It controls the field&#8217;s grid span; it is not the same setting as the percentage or unit-based <strong>Width<\/strong> control. Adjust one control at a time and preview the result so you can tell which layout change produced the desired effect.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Arrange fields side by side<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Place related fields in the same row when you want them to share a horizontal layout.<\/li>\n<li>Adjust each field&#8217;s width only as needed; a 100% width can make a field occupy the full available line.<\/li>\n<li>Check narrow screens carefully, because a layout that fits on desktop may need different responsive values.<\/li>\n<li>If you need to change the order of fields or rows, follow <a href=\"https:\/\/dragwyb.com\/docs\/docs\/smart-form-builder\/reorder-form-fields\/\">Reorder Form Fields<\/a>.<\/li>\n<\/ul>\n\n\n\n\n<p class=\"wp-block-paragraph\">Screenshot to add: Advance tab with Layout &amp; ID expanded and the Width and Grid Column Span controls visible<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/dragwyb.com\/docs\/docs\/smart-form-builder\/fields-editor\/\">Back to Fields and Editor Controls<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adjust responsive Width and Grid Column Span settings in Smart Form Builder to control field sizing and row layouts.<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":233,"menu_order":0,"template":"","class_list":["post-238","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/238","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":1,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/238\/revisions"}],"predecessor-version":[{"id":1138,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/238\/revisions\/1138"}],"up":[{"embeddable":true,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/233"}],"wp:attachment":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/media?parent=238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}