{"id":2587,"date":"2021-02-10T12:53:23","date_gmt":"2021-02-10T20:53:23","guid":{"rendered":"https:\/\/support.gwapps.com\/?post_type=ht_kb&p=2587"},"modified":"2022-06-01T14:47:09","modified_gmt":"2022-06-01T21:47:09","slug":"tabs-appearance","status":"publish","type":"ht_kb","link":"https:\/\/support.gwapps.com\/es\/knowledge-base\/tabs-appearance\/","title":{"rendered":"Form Editor: Form Layout & Appearance"},"content":{"rendered":"

You can create and edit multiple different form layouts, give your form a step-by-step or tabbed layout, and change the appearance of your forms and fields using the Form Layout & Appearance options. To access these options, open the Form Editor (Design tab) and select the paint roller icon in the top right corner.<\/p>\n\n\n\n

\"Form<\/figure><\/div>\n\n\n\n

Layout Properties: General<\/h2>\n\n\n\n

You can create multiple layouts for your form, and each can have a unique set of appearance settings. (Learn more about creating multiple layouts<\/a> below.)<\/p>\n\n\n\n

\"General<\/figure><\/div>\n\n\n\n
Property<\/strong><\/td>Descripci\u00f3n<\/strong><\/td><\/tr>
Layout Name<\/td>Set the name for this layout. Try to make it descriptive of what the layout is for or how it is different from other layouts, but also keep it a short as is practical.<\/td><\/tr>
Layout Visibility<\/td>Defines which form modes this layout will be visible in: Create, View, Edit. This allows you to have a different form layout used in View mode than in Edit mode, or when the record is first created (Create mode).<\/td><\/tr>
Form Type<\/td>Select either:
Form<\/strong> is a standard, single page form.
Tab<\/strong> allows you to break your form down into separate pages which a user can move easily between by clicking on the tab for each page.
Stepper<\/strong> gives your form a step-by-step or wizard usage style with multiple pages that the user moves between in a fixed linear order. If a page on he form has required fields, users can only move to the next page after successfully completing the current page.<\/td><\/tr>
Form Background Color<\/td>Changes the color of the outer rim of the form and the space between sections.<\/td><\/tr>
Field Gap<\/td>Allows setting the space between fields on your form (the padding). Default <\/strong>has the largest amount of space, then Comfortable<\/strong>, and Compact<\/strong> is the smallest.<\/td><\/tr>
Field Appearance<\/td>Sets how all of the individual fields will look. There are three options: Defsault, Fill and Outline.<\/td><\/tr>
<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\"Form
Form Background Color Setting<\/figcaption><\/figure><\/div>\n\n\n\n
\n
\n
\n
Default<\/strong><\/em>\"This<\/td>Fill<\/strong><\/em>\"This<\/td>Outline<\/strong><\/em>\"This<\/td><\/tr><\/tbody><\/table>
Field Appearance Options<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

Form Type: Tab<\/h2>\n\n\n\n

After selecting the ‘Tab<\/strong>‘ form type, a new section of properties will appear in the Layout Properties panel, beneath the General<\/strong> properties. These properties control the appearance of the tab bar (alignment, size, and color). <\/p>\n\n\n\n

\"Form<\/figure><\/div>\n\n\n\n

Create & Edit Tabs<\/h3>\n\n\n\n

After selecting the ‘Tab<\/strong>‘ form type, you will also see ‘Tab 1’ appear at the top of the form. To edit this tab and create additional tabs, select the ‘Tab Properties<\/strong>‘ icon at the right-hand end of the tab area at the top of the form, and the Tab Properties panel will appear.<\/p>\n\n\n\n

\"Tab<\/figure><\/div>\n\n\n\n

Here you can rename tabs, choose tab icons, move sections between tabs<\/a>, and create new tabs. <\/p>\n\n\n\n

\"Tabs<\/figure><\/div>\n\n\n\n

To create a new tab, click the ‘+ Add Tab<\/strong>‘ button at the bottom of the properties panel. When you add a tab, a new untitled section will automatically be created within that tab.<\/p>\n\n\n\n

\"Add<\/figure><\/div>\n\n\n\n

Manage Tab Sections<\/h3>\n\n\n\n

To move a section to a different tab, simply click the ‘move folder’ icon next to the right of the section and choose which tab to move it to. <\/p>\n\n\n\n

Alternatively, you can press the ‘+ Add<\/mark><\/strong>‘ button to add a section to the currently selected tab and remove it from it’s original tab. (Sections can only appear on a single tab in a layout.)<\/p>\n\n\n\n

\n
\n
\"Tab
Move section<\/em><\/figcaption><\/figure><\/div>\n<\/div>\n\n\n\n
\n
\"Tabs
Add section<\/em><\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n

Tambi\u00e9n puedes Hide<\/strong> sections completely using the Eye Icon. After hiding a section, the section can be added back to the desired tab using the ‘+ Add<\/mark><\/strong>‘ button.<\/p>\n\n\n\n

\"Hide
Hide section<\/figcaption><\/figure><\/div>\n\n\n\n

Rearrange and Delete Tabs<\/h3>\n\n\n\n

You can rearrange your tabs by clicking and dragging the six-dots icon to the left of the tab’s name in the Tab Properties panel. <\/p>\n\n\n\n

And you can delete a tab by hovering your mouse cursor over the tab in the Tab Properties panel and selecting the trashcan icon. If the tab has any sections, you will be asked if you want to delete the sections or transfer them to a different tab.<\/p>\n\n\n\n

\"Stepper
Rearrange & Delete work the same way for both Tabs and Steps (for the Stepper).<\/figcaption><\/figure>\n\n\n\n

Form Type: Stepper<\/h2>\n\n\n\n

After selecting the ‘Stepper<\/strong>‘ form type, a new section of properties will appear in the Layout Properties panel, beneath the General<\/strong> properties. These properties are identical to the Tab<\/strong> properties, and allow you to control the appearance of the stepper bar (alignment, size, and color).<\/p>\n\n\n\n

\"Stepper<\/figure><\/div>\n\n\n\n

Create & Edit Steps<\/h3>\n\n\n\n

Just like the Tab<\/strong> layout, after selecting the Stepper<\/strong> option you will see ‘Step 1’ appear at the top of your form. To create and edit steps, select the properties icon on the right side of the bar.<\/p>\n\n\n\n

To add a step select the ‘+ Add Step<\/strong><\/span>‘ button on the bottom of the properties panel. When you add a step, a new untitled section will be added to the step automatically.<\/p>\n\n\n\n

\"Form<\/figure><\/div>\n\n\n\n

Here you can change the Step Display Name<\/strong> (what users will see) and choose whether or not to Use Icons<\/strong> for the current step.<\/p>\n\n\n\n

Sections <\/strong>on your form can be moved between steps and\/or hidden in the exact same way as for Tabs<\/strong> (See Manage Tab Sections<\/a>).<\/p>\n\n\n\n

The Next Button<\/strong> y Previous Button <\/strong>names can be edited for each step (default “Next” and “Previous”).<\/p>\n\n\n\n

\"Step<\/figure><\/div>\n\n\n\n

The Next Button Action<\/strong> gives you a choice of the next step to show when the next button is selected:<\/p>\n\n\n\n

\"Next<\/figure><\/div>\n\n\n\n