Want to customize the look of your Contact Form 7 forms using Elementor? The Contact Form 7 widget in aThemes Addons lets you select any existing form, adjust its layout, and style every element including the container, labels, fields, and submit button.
In this guide, we’ll walk you through how to use the Contact Form 7 widget in aThemes Addons for Elementor.
Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor.
Activating the Widget
Go to the aThemes Addons dashboard in your WordPress admin area and search for the Contact Form 7 widget. Toggle the switch to activate it. Once activated, the widget is available in the Elementor editor.
Exploring Widget Options
Configuring the Form Section
The Form section includes the following settings:
- Title – Enter a title for the form and select the HTML tag (e.g., H1, H2, H3).
- Select Your Form – Choose an existing Contact Form 7 form from the dropdown.
- Form Alignment – Set the form alignment to left, center, or right.
- Content Alignment – Adjust the alignment of the form content.
- Form Width – Define the form width in pixels or percentage.
- Stretch Button – Toggle this option to stretch the submit button to fit the full form width.
- Button Max Width – Set a maximum width for the submit button.
- Button Alignment – Choose the alignment for the submit button.
Customizing the Style Tab
The Style tab lets you customize the visual appearance of the form container, title, labels, fields, and submit button. Adjust color, typography, padding, borders, and shadows to match your site design.
Styling the Container
- Background – Set a solid color or gradient background for the form container.
- Padding – Adjust the inner spacing of the container.
- Border – Add and customize borders around the container.
- Box Shadow – Apply a shadow effect to the container.
Styling the Title
- Color – Set the title text color.
- Typography – Customize the font family, size, weight, and other typography settings.
Styling the Labels
- Color – Set the label text color.
- Typography – Customize the label font settings.
- Margin Bottom – Adjust the spacing below each label.
Styling the Fields
- Background Color – Set the background color for input fields.
- Color – Choose the text color inside the fields.
- Placeholder Color – Set the color for placeholder text.
- Border – Customize the field borders.
- Border Radius – Round the corners of the input fields.
- Padding – Adjust the inner spacing of the fields.
- Spacing – Set the spacing between fields.
- Text Color – Set the submit button text color.
- Background – Choose a solid color or gradient background for the button.
- Border – Add and customize the button border.
- Border Radius – Round the corners of the button.
- Padding – Adjust the inner spacing of the button.
- Hover Effects – Customize the text color, background color, and border for the button hover state.
- Box Shadow – Apply a shadow effect to the button.
Following Usage Tips
- Make sure the Contact Form 7 plugin is installed and at least one form is created before using this widget.
- Use the style options to create a form design that is consistent with the rest of your site.
- Test your form on multiple devices to confirm it displays correctly on all screen sizes.
- Keep forms short and focused for better conversion rates.
That’s it! You’ve successfully styled your Contact Form 7 form with the Contact Form 7 widget in aThemes Addons.
Next, would you like to restrict access to specific content on your pages? Check out our guide on using the Content Protection widget to learn more.
