Want to display and style your Gravity Forms directly within Elementor? The Gravity Forms widget in aThemes Addons lets you select any form built with Gravity Forms and fully customize its appearance to match your site design – all without writing any code.
In this guide, we’ll walk you through how to use the Gravity Forms 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 your WordPress admin dashboard and navigate to the aThemes Addons dashboard. Search for the Gravity Forms widget and toggle it on to activate it.
Exploring Widget Options
Configuring the Form Section
The Form section provides the following options:
- Form – Select the Gravity Forms form you want to display.
- Form Title – Toggle to show or hide the form title.
- Form Description – Toggle to show or hide the form description.
- AJAX – Toggle to enable AJAX submission for a smoother user experience without page reload.
- Form Alignment – Set the overall alignment of the form.
- Content Alignment – Adjust the alignment of the form content.
- Form Width – Control the width of the form.
- Stretch Button – Toggle to make the submit button span the full width of the form.
- 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 your Gravity Forms form.
Styling the Container
- Background – Set a solid color or gradient background for the form container.
- Padding – Adjust the inner spacing of the container.
- Border – Configure the border color, width, and radius.
- Box Shadow – Add a shadow effect to the container.
Styling the Title and Description
- Color – Set the text color for the title and description.
- Typography – Customize the font family, size, weight, and other typography settings.
Styling the Labels
- Color – Set the label text color.
- Typography – Adjust the label font settings.
Styling the Fields
- Background Color – Set the background color for input fields.
- Text Color – Change the text color inside input fields.
- Placeholder Color – Adjust the color of placeholder text.
- Border Radius – Round the corners of input fields.
- Border – Configure the border style for input fields.
- Padding – Set the inner spacing of input fields.
- Spacing – Control the space between individual fields.
- Typography – Customize the button text font settings.
- Text Color – Set the button text color.
- Background – Choose a background color or gradient for the button.
- Border – Configure the button border style.
- Border Radius – Round the corners of the button.
- Padding – Adjust the inner spacing of the button.
- Hover Effects – Set different colors and styles for the button hover state.
- Box Shadow – Add a shadow effect to the button.
Following Usage Tips
- Ensure the Gravity Forms plugin is installed and activated before using this widget.
- Enable AJAX submission for a better user experience without full page reloads.
- Style the form to match your overall site design for a cohesive look.
- Test the form on mobile devices to ensure it displays correctly on all screen sizes.
That’s it! You’ve successfully set up and styled the Gravity Forms widget using aThemes Addons for Elementor.
Next, would you like to create interactive image showcases? Check out our guide on using the Image Accordion widget to learn more.
