Forms Builder: Themes Designer Manual

The Theme Designer is another strong feature in Forms Builder, that lets you design your form in minutes, without the trouble of writing codes, and you can do it either by designing or using a ready built theme to be applied to your entire form using the Theme Manager, or you can design your form part by part using the Theme Designer.

A- Theme Manager

This feature lets you apply a ready made theme from the amazing ones in Forms Builder or create your own theme if you have the skill to design one using CSS coding. Once a Theme is applied to a Form, it changes its appearance, backgrounds, colors, text type, etc.

How To Create a Theme?

Go to the Theme Manager, by clicking on Themes in the navigation bar. To create a theme, you must:

1. Click on the Create Theme button
2. The form to create a theme have 5 fields:
   • Name: The theme name
   • Description: A very brief description of the theme
   • Main Color: The hexadecimal value of a color to identify your theme
   • Live Preview: You can select a Form in the Live Preview field to see how the theme applies to your form while you are editing the CSS field
   • CSS: Must be a valid CSS
3. Click Save and continue OR click Save if you still want to edit it.

How To Edit a Theme?

Go to the Theme Manager, by clicking on Themes in the navigation bar. To edit a theme, you must:

1. Click the Actions button of the Theme to edit
2. Click Update
3. Make the changes you need
4. Click Save

How To Apply a Theme To a Form?

To apply the theme you have created to a form, go to the Form Manager. Then, perform the following steps:

1. Click the “Actions” button of the form in which you are going to apply the theme
2. Click “Settings”
3. Click the “UI Settings” tab
4. Select a theme from the menu
5. Click “Save”

How To Assign a Theme to Another User?

You can assign a theme to another user using the Theme Editor. To assign a theme, you must:

1. Go to Themes -> Actions -> Update.
2. In the ‘Created by‘ field, choose the username to which you want to transfer the theme.
3. Click Save.

How To Share a Theme With Another User?

To share a theme that you created with another user(s) who maybe your teams to save time, then follow below steps:

1. Go to Themes -> Actions -> Update.
2. In the “Shared With” section, which will be selected as “None“, and choose “Specific User“
3. Click “Save“.

B- Theme Designer

With Theme Designer you can design each part of the form individually according to your needs while creating your form.

How To Access The Theme Designer?

To customize the look and feel of your form, just go to the Form Builder Interface right side where you will see the “Design” panel. From there, set the different properties you want for your form design, the form preview area will be updated in real-time.

Design Sections

The “Design” Panel has the following sections. Each section focuses on a form class that can be applied to multiple elements.

• Global: It’s the Form Container.
• Form: The form itself. By default it doesn’t have a padding, to keep compatibility when a form widget is displayed in an external website.
• Form Group: Group of Label, Input, Help Text and Validation Message.
• Form Control: Input Field.
• Button: Submit Button (Bootstrap Primary Button).
• Label: Label Field (Bootstrap Control Label)
• Placeholder
• Heading
• Paragraph
• Help Text
• Link
• Form Steps: Appears when a Page Break field has been added to the form.
• Form Alerts: Success or Error message that appears when a form has been submitted.
• Field Validation: To customize the error state of your fields.
• Other Components: Options for Custom Checkboxes, Custom Radio Buttons, reCAPTCHA, Signature Pad and Progress Bar are available, also.

Copy, Paste & Reset Design

If you’ve created a Form before, you know the process inherently includes a considerable amount of repetitive work. With the Copy Design & Paste Design features, you can copy and paste CSS styles from one form to another with a couple of clicks. Also, you can reset the design to the default styles with one click.

Main Tools and Features

The Theme Designer come with useful tools to make complex designs more easy.

– Google Fonts Selector

Select Google fonts with live preview from a drop down list.

– Stock Images

Thousands of stock images are now in the Form Builder. With our Unsplash integration you can search and add stock images to your form with a couple of clicks.

You don’t need to license Unsplash images. Under Unsplash’s license, you can copy, modify, download, and distribute any of their images for free, even for commercial purposes. You don’t need to ask permission from or provide attribution to the artist, but we recommend crediting them anyway.

– Web Gradient Selector

You can find the gradient selector to build your own gradient (linear, radial, choose your colors and stops and more) or choose between 100+ ready-to-use beautiful web gradients.

– Subtle Patterns

Choose between hundreds of Subtle Patterns selected to you by Toptal, beautiful textures for your forms.

Common Uses Cases

The Theme Designer is a flexible tool that let you customize different parts of the form to generate a style sheet. Some common use cases are:

– Hide Field Labels

If you want to hide a field label, just click the field and enter the following Label CSS Class: sr-only

But, if you’d like to remove the entire form labels all at once, simply follow the next steps:

1. In the Design panel -> Open the Label section
2. Scroll down until Extra sub-section
3. On Display choose None.

That’s it!

Note: Never leave a field without a label, as it will help you to identify your field within the entire system.

– Align Your Form to Center

If you want to show your form on a full page (Share Form -> Link without box) this tip will be very useful.

There are several ways to center a form, below we will describe the most common option:

1. In the Global Section, Select Text Align: Center
2. And In the Form Section, Select:
   • Text Align: Left     – Margin: Auto     – Width: 80%

That’s all You can expand or reduce the Form width according to your requirements.

– Design Full Width Buttons

If you want to show a specific button with full width, just click the field and enter the following CSS Class: btn-block

But, if you’d like to design the entire form buttons all at once, simply follow the next steps:

1. In the Design panel -> Open the Button section
2. Scroll down until Size sub-section
3. On Width choose 100%.

That’s it!