Max Addons Contact Form 7 Styler for Bricks Builder makes it easy to style and customize native contact forms created with the popular Contact Form 7 plugin. With this element, you don't need to dive into custom CSS to give your contact forms a unique look.
In this guide, we will walk you through how to use the Contact Form 7 Styler in Bricks Builder and explain each customization option in the element.
How To Customize Contact Form 7 With Bricks Builder?#
Getting Started#
Before using the Max Addons Contact Form 7 Styler, make sure you have the following plugins installed and activated on your WordPress site:
Once you have these plugins activated, you can create a new contact form with Contact Form 7. If you’re first time creating the contact form, check out the documentation for getting started with Contact Form 7.
Create a Page#
Next, either create a new page or edit an existing page in the Bricks Builder editor.
Add the Contact Form 7 Styler Element#
Once you’ve opened your page in Bricks Builder:
- Search for "Contact Form 7" in the element search bar.
- Add the Contact Form 7 Styler element onto your page.
- Make sure to check the “Max” tag in the top-right corner of the element.
Content Tab of the Contact Form 7 Styler#
Content Tab of the Contact Form 7 Styler is divided into five sections. Each section provides a variety of options to customize your form's appearance.
- CONTACT FORM
- INPUT FIELDS
- SPACING
- RADIO AND CHECKBOX
- SUBMIT BUTTON
Here's a breakdown of the available settings:
Contact Form#
- Select Form: Choose your desired Contact Form 7 form from the drop-down menu. Once selected, it will automatically display on the page.
- Show Custom Title: Toggle this option to display a custom title above your form. You can then customize the title’s typography to match your site's style.
Input Fields#
Customize the look of the input fields with the following options:
- Labels Typography: Adjust the font style for your form labels.
- Placeholder Typography: Set the typography for text inside placeholder fields.
- Fields Typography: Modify the font style for the text entered in the fields.
- Background: Choose a background color or image for the input fields.
- Border: Define the border style for the fields (color, thickness, and radius).
- Box Shadow: Add a subtle shadow effect around the input fields for depth.
- Input Width: Set the width of the input fields.
- Textarea Width: Set the width of any textarea fields (multi-line text).
- Padding: Adjust the inner space within the input fields.
- Text Align: Align the text inside the fields to the left, right, or center.
Spacing#
Control the space between the elements on your form:
- Labels Spacing: Set the vertical spacing between the label and its corresponding input field.
- Fields Spacing: Adjust the spacing between the form fields for better alignment and layout.
Radio and Checkboxes#
Customize the appearance of radio buttons and checkboxes:
- Enable Custom Styles: Toggle to enable custom styling for radio buttons and checkboxes.
- Size: Adjust the size of radio buttons and checkboxes.
- Color: Set a color for the radio buttons and checkboxes.
- Checkbox Border: Modify the border style (color, thickness) for checkboxes.
- Radio Border: Set the border style for the radio buttons.
Submit Button#
Style the submit button to make it stand out:
- Alignment: Set the alignment of the submit button (left, center, right).
- Typography: Adjust the font style for the submit button text.
- Background: Choose a background color or image for the submit button.
- Border: Define the border style for the submit button (color, thickness, and radius).
- Box Shadow: Add a shadow effect to make the submit button pop.
- Spacing from Top: Adjust the spacing between the submit button and the fields above it.
- Padding: Customize the padding inside the submit button to control its size.
Once you've made your customizations, simply save your changes and preview the page to see the styled contact form in action!
Hope this helps!