Contact Form 7

The Contact Form 7 Widget allows you to select a contact form created with Contact Form 7 and style it using Elementor. This widget is ideal for adding customized contact forms to your WordPress site.

Activate the widget

This widget is part of the aThemes Addons for Elementor plugin. To activate it, go to your admin area, visit the aThemes Addons dashboard, search for the widget, and click on the switch to activate it. It will now be available in your Elementor interface.

Widget options

Form Section

  • Title: Add a title to your form. You can set the text and choose the HTML tag (e.g., H1, H2, etc.).
  • Select your form: Choose the Contact Form 7 form you want to display.
  • Form alignment: Align the form to the left, center, or right.
  • Content alignment: Align the form’s content (text and fields) to the left, center, or right.
  • Form width: Adjust the width of the form in pixels or percentage.
  • Stretch button?: Toggle to stretch the submit button to fit the form width.
  • Button max. width: Set the maximum width for the submit button.
  • Button alignment: Align the submit button to the left, center, or right.

Style tab

Customize the appearance of your contact form under the Style tab. You can style the form container, title, labels, fields, and submit button to match your website’s design. Adjust settings like color, typography, padding, borders, and shadows to achieve the desired look.

Container Style

  • Background: Set the background color or gradient for the form container.
  • Padding: Adjust the padding inside the container.
  • Border: Add and style the border around the container.
  • Box Shadow: Add shadow effects to the container.

Title Style

  • Color: Set the color of the form title.
  • Typography: Adjust the font settings for the title.

Labels Style

  • Color: Set the color of the form labels.
  • Typography: Adjust the font settings for the labels.
  • Margin bottom: Set the space below each label.

Fields Style

  • Background color: Set the background color of the form fields.
  • Color: Adjust the text color inside the fields.
  • Placeholder color: Set the color for placeholder text.
  • Border: Style the border of the fields.
  • Border radius: Adjust the roundness of the field borders.
  • Padding: Set the padding inside the fields.
  • Spacing: Adjust the space between fields.

Button Style

  • Text Color: Set the color of the submit button text.
  • Background: Adjust the background color or gradient of the button.
  • Border: Style the border of the button.
  • Border radius: Adjust the roundness of the button borders.
  • Padding: Set the padding inside the button.
  • Hover Effects: Customize the button’s hover state with different colors, backgrounds, and borders.
  • Box Shadow: Add shadow effects to the button.

These style options ensure your contact form integrates seamlessly with your site’s design.

Usage tips

  • Ensure your Contact Form 7 plugin is installed and activated to use this widget.
  • Utilize the styling options to make the form match your site’s branding.
  • Test your form after making changes to ensure it functions as expected.

Conclusion

The Contact Form 7 Widget provides a user-friendly way to integrate and style Contact Form 7 forms within your Elementor-built pages. With various customization options, you can ensure the form looks and performs well, enhancing the overall user experience on your site.