Forms require a button to serve as the mechanism that submits information. Buttons are as important to the form as any field.
Buttons in forms can be modified to take on any number of different visual appearances. Ensuring that your forms are visually appealing and in line with the rest of your form's design is essential.
Article Contents
| Trial | ✓ | |
| Essential | ✓ | |
| Advanced | ✓ | |
| Ultimate | ✓ |
Forms| Administrators | ✓ | |
| Company Managers | ✓ | |
| Marketing Managers | ✓ | |
| Sales Managers | ||
| Salespersons | ||
| Jr. Salespersons |
Understanding Button Categories
|
Just like creating the rest of the form, you can see your button design changes in real time. As with the Visual Styler tab, the content in the Button tab is broken into different categories, each covering a specific portion of the button. The available categories are as follows: |
| Category | Description | |||
|
Button Colors |
This category modifies the general appearance a button. |
|||
|
Button Colors |
This category modifies the appearance of a button when the mouse cursor hovers over the button. | |||
|
Button |
This category modifies the vertical and horizontal position of a button on a form. | |||
|
General Styles |
This category provides settings that modify the displayed text for a button, as well as its overall dimensions. |
|||
|
Text Styles |
This category provides settings that modify the appearance of text on a button. |
Available Button Settings
The Form Styler offers different ways to customize your form buttons and impact the look and feel. Some settings modify the color of the button or its text, and others modify the overall spacing between the button and the rest of the form.
The following are settings that are available for each category:
| Setting | Categories | Description | ||||
|
Background Color |
|
Changes the button's background color of to a specific color. Color can be entered in hexadecimal format. It can also be selected from the color picker. |
||||
|
Border Color |
|
Changes the button's border color. Color can be entered in hexadecimal format. It can also be selected from the color picker. |
||||
|
Border Size |
|
Changes the button's border size. A border's size can be entered as a number ranging from 0 to 64. It can also be selected from the associated scale. |
||||
|
Border Style |
|
Changes the appearance of the button's border edges. Border styles are selected from the associated drop-down menu. |
||||
|
Border Radius |
|
Changes the sharpness of the button's border edges. A border's radius can be entered as a number ranging from 0 to 20. It can also be selected from the associated scale. |
||||
|
Button Text |
|
Changes the displayed text in the button. Text can be entered in the associated text field. |
||||
|
Font Color |
|
Changes button text to a specific color. Color can be entered in hexadecimal format. It can also be selected from the color picker. |
||||
|
Font Family |
|
Changes button text to a specific universal font. Font families are selected from the associated drop-down menu. |
||||
|
Font Size |
|
Changes button text to a specific size. A font's size can be entered as a number ranging from 4 to 64. It can also be selected from the associated scale. |
||||
|
Font Weight |
|
Sets button text as either normal or bold. Font weights are selected from the associated drop-down menu. |
||||
|
Height |
|
Changes the visual height of the button. Height can be entered as a number ranging from 0 to 100. It can also be selected from the associated scale. |
||||
|
Letter Spacing |
|
Changes the spacing between letters for button text. Letter spacing can be entered as a number ranging from 0.0 to 2.0. It can also be selected from the associated scale. |
||||
|
Line Height |
|
Changes the distance between lines of text around the button. Line height can be entered as a number ranging from 0.0 to 2.0. It can also be selected from the associated scale. |
||||
|
Margin Bottom |
|
Changes the distance between the button and form objects below it. Margins can be entered as a number ranging from 0 to 100. It can also be selected from the associated scale. |
||||
|
Margin Top |
|
Changes the distance between the button and form objects above it. Margins can be entered as a number ranging from 0 to 100. It can also be selected from the associated scale. |
||||
|
Transform |
|
Sets button text as either normal capitalization or ALL CAPITALS. Font weights are selected from the associated drop-down menu. |
||||
|
Width |
|
Changes the visual width of the button. Width can be entered as a number ranging from 0 to 100. It can also be selected from the associated scale. |
||||
|
X Padding |
|
Changes the amount of horizontal padding in buttons. Padding can be entered as a number ranging from 0 to 100. It can also be selected from the associated scale. |
||||
|
Y Padding |
|
Changes the amount of vertical padding in buttons. Padding can be entered as a number ranging from 0 to 100. It can also be selected from the associated scale. |
Configuring Button Content
To configure buttons that appear in your forms, create or edit a form:
|
Refer to the following help articles for information on further customizing form content:
Canvas Viewing Options
|
When customizing form content, your changes will be displayed in the Visual Form Styler canvas. The canvas also houses a select few options that help with the creation process.
Click to enlarge. The available options are as follows: |
| Option | Description | |||
|
Expand Canvas/ |
Expands the form's width in the canvas. Also returns the form's width to its default size. | |||
|
Revert Changes |
Reverts all changes made to form content. Changes will revert to the default state of the form preset. |
|||
|
Test This Form |
Opens the form in a new browser tab. The form's different components can be interacted with. Test information will be sent if submitted, but tracking will not be established. |