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.
The "Design" Panel has the following sections. Each section focuses on a form class that can be applied to multiple elements.
The Theme Designer come with useful tools to make complex designs more easy.
Select Google fonts with live preview from a dropdown list.
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.
Choose between hundreds of Subtle Patterns selected to you by Toptal, beautiful textures for your forms.
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:
If you want to hide a field label, just click the field and enter the following Label CSS Class:
But, if you'd like to remove the entire form labels all at once, simply follow the next steps:
Note: Never leave a field without a label, as it will help you to identify your field within the entire system.
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:
That's all You can expand or reduce the Form width according to your requirements.
If you want to show a specific button with full width, just click the field and enter the following CSS Class:
But, if you'd like to design the entire form buttons all at once, simply follow the next steps: