Formidable Forms Styler element from Max Addons makes it easy to design and customize your contact forms built using Formidable Forms Styler directly inside Bricks Builder.
Instead of using custom CSS or editing form styles manually, you can visually control the appearance of your Formidable Forms.
This element helps you style important parts of your form, such as the form title and description, Input fields, Labels and placeholders, Radio buttons and checkboxes, the Submit button, and more!
Getting Started#
Before using the Formidable Forms Styler element, make sure the following plugins are installed and activated on your WordPress website:
Once all three tools are active, you can begin styling your forms using Bricks Builder and Max Addons.
Note: Before using the Formidable Forms Styler, you must first create a form inside the Formidable Forms plugin.
How to Add the Formidable Forms Styler Element#
Follow these steps to add the Formidable Forms Styler to your page.
- Open an existing page in Bricks Builder or create a new page.
- In the Bricks Builder search bar, type “Formidable”.
- Add the Formidable Forms Styler element to your page.
- After adding the element, check the MAX label in the top-left corner. This confirms that you are using the Formidable Forms Styler from Max Addons.
Formidable Forms Styler Tabs#
When you select the Formidable Forms Styler element, you will see two main tabs:
- Content Tab
- Style Tab
Content Tab#
The Content tab contains all the main sections required to configure and style your form.
The available sections include:
- Contact Form
- Title and Description
- Input Fields
- Spacing
- Field Description
- Radio and Checkbox
- Submit Button
- Errors
- Confirmation Message
Let’s explore each section in detail.
Contact Form#
The Contact Form section lets you connect to and display a Formidable Form.
- Select Form: Use this option to select the form you want to display. Click the dropdown menu and choose your preferred Formidable Form.
- Title Toggle: Enable this option to display the form title above the form.
- Description Toggle: Enable this option to display the form description.
Title and Description#
This section helps you customize the appearance of your form title and description.
- Alignment: You can choose the alignment of the title and description. Available options include: Left, Center, Right & Justify.
- Typography: Control the typography settings for both title and description. Typography options usually include: Font family, Font size, Font weight, Text transform, Letter spacing & more
- Margin: You can add spacing around the title and description using margin controls.
Input Fields#
The Input Fields section gives you control over the design of all form fields. This includes text fields, email fields, drop-downs, textareas, and other input elements.
- Labels Typography: Customize how field labels appear. You can change: Font size, Font weight, Font family, Text color & Line height.
- Placeholder Typography: Style placeholder text in input fields. [Placeholder text is the hint shown before users enter information.]
- Fields Typography: Customize the typography for the text entered inside form fields.
- Background: Set a background color for your input fields.
- Border: Add and customize borders for input fields.
- Box Shadow: Add shadow effects to your fields for a modern and layered appearance.
- Textarea Width: Control the width of textarea fields.
- Textarea Height: Control the height of textarea fields.
- Padding: Add spacing inside the input field.
- Text Align: Adjust text alignment within fields.
Spacing#
The Spacing section helps you manage the distance between different form elements.
- Labels Spacing: Control the spacing between labels and input fields.
- Fields Spacing: Add spacing between individual form fields.
- Help Message Top Spacing: Adjust the space above field help messages. Help messages are useful for providing additional guidance.
- Button Top Spacing: Control the space between the form fields and the submit button
Field Description#
The Field Description section allows you to style additional descriptions or helper text shown below fields.
- Typography: Customize field descriptions' typography.
Radio and Checkbox#
This section lets you customize radio buttons and checkboxes.
- Enable Custom Styles: Enable this option to apply custom styling to radio buttons and checkboxes.
Once enabled, additional styling options become available.
- Size: Adjust the size of radio buttons and checkboxes.
- Color: Choose the default color for radio buttons and checkboxes.
- Checked Color: Set the color displayed when the option is selected.
- Checkbox Border: Customize checkbox border settings. You can control border width, style, and color.
- Radio Border: Customize border settings for radio buttons.
Submit Button#
The Submit Button section helps you customize the appearance of the form submission button.
- Alignment: Choose where the button appears.
- Width: Adjust the width of the submit button.
- Typography: Customize the button's text style.
- Background: Change the background color of the submit button.
- Border: Customize the button's border.
- Box Shadow: Add shadow effects to make the button stand out.
- Padding: Control the internal spacing of the button.
Errors#
The Errors section helps you style validation messages shown when users submit incomplete or incorrect information.
This section includes settings for: Error Messages & Error Fields.
- Error Messages Typography: Customize how validation messages appear.
- Error Field Border: Customize the border style for fields with errors.
- Error Field Box Shadow: Add a shadow effect to highlight invalid fields.
Confirmation Message#
After a user successfully submits a form, a confirmation message may appear. This section helps you style that message.
- Typography: Customize the appearance of the confirmation text.
- Background Color: Set a background color for the confirmation message box.
- Border: Add a border around the confirmation message.
- Box Shadow: Add shadow effects for a highlighted appearance.
- Padding: Adjust internal spacing for better readability.
Wrapping Up!#
Formidable Forms Styler for Bricks Builder makes form customization simple and flexible.
Instead of relying on CSS or advanced styling methods, you can visually control your form design directly inside Bricks Builder.
With styling options for fields, spacing, buttons, validation messages, and confirmation messages, you can create professional-looking forms that match your website design perfectly.