Online Form Themes Follow
Online form themes allow for an intuitive and flexible way to style forms that can be used on your website or as stand alone pages. A theme can be used with multiple forms which allows for the creation of the style once and then can easy be applied to any or all forms.
Theme Listing
From your Growth Dashboard, click on the forms icon and select Themes. From here you will see the list of themes that currently exist.
Create Theme
From the theme listing, click on the "New Theme" button on the top right to start the process of creating a new theme.
When creating a new theme, the first thing to needed will be a name and a description. It is recommended that the name is unique and is easily identifiable as it will be used when connecting a theme to a form. When you are done providing a name and a description, click Continue to move to styling the different elements.
Theme Elements
Everything about the form will be able to be styled and is organized into different categories. To edit a category, click on it from the right which will open the panel to change the various variables about the category.
1. Layout: The layout category comprises of the general styles for the entire form including the overall background color, the form content background color, and the border radius and width.
2. Font & Text: The Font & Text category refers to the "Styling" section of the form including the Section Break, the Paragraph Text and the Heading Text.
3. Input Fields: This category is targeted towards input, multi line input and select boxes. The Horizontal Padding, Border Radius, Border Width, Font Size, Text Color and Background Color can all be changed including styling.
4. Labels: This category is targeted towards the labels of inputs, the checkbox selections and radio button selections. the Font Size, Font Weight, Color, Top Margin and Bottom Margin can all be changed.
5. Errors: This category is targeted towards how inputs and surrounding labels should look when an error happens. This includes the Label Text Color, Input Text Color, Input Border Color, Input Background Color, Error Message Size, Error Message Font Weight, Error Message Color and Error Message Top Margin
6. Checkboxes: This category is targeted towards checkbox and radio button styling. This includes Width, Height, Border Width, Border Color, Border Radius along with the checked Background Color and Border Color.
7. Buttons: This category is targeted towards the button that are on the form. This includes the Height, Vertical Padding, Horizontal Padding, Border Radius, Border Width, Font Size, Text Color, Border Color, Background Color along with the Hover states of the button.
Clicking into each category will display color pickers, sliders, etc. Changing these values on the right will change the display on the left which acts as a visual indicator on what the specific style will look like on the form itself. After the display looks correct, click Save to save the Theme.
If you are unable to find the "Save" button, make sure you are not currently in a category. If you are in a category, click the back arrow that is in the header on the left of the category name. Then the "Save" button should show.
Add Theme To Form
A theme can be associated to multiple forms. In order to apply a theme to a form, go to the forms listing, select the form the theme should be applied to and then select "Form Fields" from the top right nav. (If creating a new form, select the "New Form" button from the form listing.
From the Form Fields screen, click on the "Edit" link in the header to the right of the form name
From the Edit modal, select the "Form Styling Theme" that was recently created.
If no theme is selected, a default theme that Growth has created will be used.