How do I create a custom theme?

Form themes allow you to fully customize the look and feel of your forms.  Nearly every aspect of your form can be personalized including colors, fonts, images, and more!

1. Adding a new theme

  1. From the Forms section, click the Themes button on the left sidebar.
  2. Then click the green "+ Add Theme" button to create a new theme

2. Add a theme name & description

The theme's name will be shown on the dropdown list of available themes on the "Set Up" page when creating or editing a form.

The theme's description is displayed on the "Themes" page in CloudStax and usually includes a brief summary of the theme's appearance. (colors, images, ext..)

3. Choose a background & button colors

1. To choose a background image, click the Choose File button, then select an image from your computer.

- The recommended image width is up to 825px.

2. To choose a background color, either click the Background Color field and choose a color from the picker or paste in a specific color's hex code.

3. If you would like to have the background image repeat to fill the entire screen, select the Repeat the Background Image button.

- Ensure the image you have selected is designed to be repeated before selecting this option, as some images do not look good when repeated.

4. To choose a primary button color, either click the Primary Button Color field and choose a color from the picker or paste in a specific color's hex code.

- Primary buttons include: Submit, Next Page, Previous Page, & Start A New Form

5. To choose a secondary button color, either click the Secondary Button Color field and choose a color from the picker or paste in a specific color's hex code.

- Secondary buttons include: Cancel

4. Custom CSS

The Custom CSS field is for advanced styling to form elements and requires knowledge of HTML & CSS.

*References to third-party resources such as Google Fonts or external images will not load in offline mode.

5. Add header & footer images

1. To choose a header image, click the Choose File button, then select an image from your computer.

- The header image will display above the form.

- The recommended image width is up to 825px.

2. To choose a footer image, click the Choose File button, then select an image from your computer.

- The footer image will display below the form.

- The recommended image width is up to 825px.

6. Choose a section background color

To choose a section background color, either click the Section Background Color field and choose a color from the picker or paste in a specific color's hex code.

7. Customize headings & body text

1. To choose a heading text color, either click the Heading Text Color field and choose a color from the picker or paste in a specific color's hex code.

2. To choose a heading font, click the Heading Font dropdown menu and select a font option.

- Fonts are limited to be compatible with different devices while offline.

3. To choose a heading font size, click the Heading Font Size dropdown menu and select a font size.

- The recommended font size is 25px.

4. To choose a body text color, either click the Text Color field and choose a color from the picker or paste in a specific color's hex code.

5. To choose a body text font, click the Text Font dropdown menu and select a font option.

- Fonts are limited to be compatible with different devices while offline.

6. To choose a body text font size, click the Text Font Size dropdown menu and select a font size.

- The recommended font size is 16px.

8. Customize form fields

1. To choose a field text color, either click the Field Text Color field and choose a color from the picker or paste in a specific color's hex code.

2. To choose a field border color, click the Field Border Color field and choose a color from the picker or paste in a specific color's hex code.

3. To choose a field background color, click the Field Background Color field and choose a color from the picker or paste in a specific color's hex code.

4. To choose a field font, click the Field Font dropdown menu and select a font option.

- Fonts are limited to be compatible with different devices while offline.

5. To choose a field font size, click the Field Font Size dropdown menu and select a font size.

- The recommended font size is 14px.

6. To customize the field interior padding, click the Field Interior Padding field and enter a number.

- Interior padding is the number of pixels between the field border and the text.

- The recommended number of pixels is 6.

9. Customize field hints and labels

1. To choose a hint color, either click the Field Hint Color field and choose a color from the picker or paste in a specific color's hex code.

2. To choose a label color, click the Label Color field and choose a color from the picker or paste in a specific color's hex code.

3. To choose a label font size, click the Label Font Size dropdown menu and select a font size.

- The recommended font size is 14px.

4. To choose a label font, click the Label Font dropdown menu and select a font option.

- Fonts are limited to be compatible with different devices while offline.

Customize field hints and labels

10. Click the green "Save Changes' button

0 Comments

Add your comment

E-Mail me when someone replies to this comment