Form Designer

Introduction

The Theme Designer is a feature that lets you design your form in minutes, removing the friction related to creating a new design, like writing and rewriting custom CSS.

To customize the look and feel of your form, just go to the Form Builder, on the right side 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 PageBreak field is added to the form.
• Form Alerts: Success or Error message that appears when a form is 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.

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 dropdown list.

- 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 an stylesheet. 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!