Theme Designer ¶
The Theme Designer is a feature that lets you design your form in minutes.
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 wish to customise.
Design Sections ¶
The Design Panel has the following sections.
- Global: The Form Container.
- Form: The form. By default it doesn't have a padding.
- Form Group: Group of Labels, Inputs, Help Text and Validation Messages.
- Form Control: Input Field.
- Button: Submit Button.
- Label: Label Field
- Placeholder, Heading, Paragraph, Help Text
- 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.
Main Tools and Features ¶
- Fonts Selector ¶
Select fonts with live preview from a dropdown list.
- Gradients ¶
You can find the gradient selector to build your own gradient (linear, radial, choose your colors and stops and more) or choose the ready-to-use gradients.
- Patterns ¶
Common Uses ¶
- Hide Field Labels ¶
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:
- In the Design panel -> Open the Label section
- Scroll down until Extra sub-section
- On Display choose None.
- 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:
- In the Global Section, Select Text Align: Center
- And In the Form Section, Select:
- Text Align: Left - Margin: Auto - Width: 80%
- Design Full Width Buttons ¶
If you would like to show specific buttons at full width, just click the field and enter the following:
But, if you'd like to design the entire form buttons all at once, simply follow the next steps:
- In the Design panel -> Open the Button section
- Scroll down until Size sub-section
- On Width choose 100%.