The Theme Designer is a tool that facilitates the quick and easy creation of your form design, eliminating the tedious and time-consuming task of repeatedly drafting custom CSS.

To alter the aesthetics of your form, navigate to the Form Builder. On the right-hand side, you will find the "Design" panel. Here, input your preferred properties for your form design, and the preview area of your form will dynamically update to reflect these changes in real time.

Design Sections

The "Design" Panel is comprised of the following sections. Each section is geared towards a particular form class that can be implemented across numerous elements.

• Global: Represents the Form Container.
• Form: This is the form itself. As a default, it lacks padding to ensure compatibility when a form widget is displayed on an external website.
• Form Group: This consists of a Label, Input, Help Text, and Validation Message.
• Form Control: This is the Input Field.
• Button: Corresponds to the Submit Button (Bootstrap's Primary Button).
• Label: Represents the Label Field (Bootstrap's Control Label).
• Placeholder
• Heading
• Paragraph
• Help Text
• Link
• Form Steps: This is visible when a PageBreak field has been integrated into the form.
• Form Alerts: These are the Success or Error messages that appear once a form has been submitted.
• Field Validation: This is meant to customize the error condition of your fields.
• Other Components: You can also access options for Custom Checkboxes, Custom Radio Buttons, reCAPTCHA, Signature Pad, and Progress Bar.

Copy, Paste & Reset Design

If you've previously built a Form, you'd know there's a lot of repetitive activity involved in the process. The Copy Design & Paste Design functionalities let you transition CSS styles from one form to another with just a few clicks, bringing a notable degree of convenience. Furthermore, should you need to, you can restore the default design styles with a singular 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 dropdown list.

- Stock Images

The Form Builder now comes equipped with thousands of stock images, thanks to our integration with Unsplash. This allows you to easily search and incorporate stock images into your form with just a few quick clicks.

Moreover, there's no necessity to acquire licenses for Unsplash images. According to Unsplash's licensing agreement, you're permitted to copy, modify, download, and distribute any of their images absolutely free, even for commercial use. While obtaining permission or giving credit to the artist isn't mandatory, it's still recommended to acknowledge their work.

- Web Gradient Selector

You have access to the gradient selector, which allows you to create a unique gradient. You can choose whether it's linear or radial, select your preferred colors, stops, and more. If you prefer a pre-made option, you can choose from over 100 elegantly designed web gradients that are ready for use.

- 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 an adaptable tool that allows you to modify various elements of your form to produce a stylesheet. Here are a few common applications:

- Concealing Field Labels

If you desire to hide a field label, simply select the field and enter the following Label CSS Class: sr-only.

However, if you wish to eliminate all the labels from your form at once, follow the steps below:

1. Go to the Design panel and open the Label section.
2. Scroll down to the Extra sub-section.
3. Under the Display option, select None.

And that's all!

Note:  As a best practice, avoid leaving a field without a label since labels aid in identifying fields within the entire system.

- Center-aligning Your Form

If you're looking to display your form on a full page (via Share Form -> Link without box), this helpful tip comes in handy.

There are numerous ways to center a form, but here's the most commonly used method:

1. In the Global Section, select Text Align: Center
2. In the Form Section, Select Text Align: Left - Margin: Auto - Width: _80%

That's all there is to it! You can adjust the Form's width as required.

- Designing Full-Width Buttons

Should you want a specific button to span the full width, click the field and enter the following CSS Class: btn-block.

However, if you wish to design all the buttons on your form simultaneously, simply follow these steps:

1. Inside the Design panel, open the Button section.
2. Scroll down to the Size sub-section.
3. For the Width option, select 100%.

And there you have it!

‍