Contact Form 7

The Contact Form 7 Widget in Animation Addons for Elementor is a free feature. To access this widget, ensure the plugin is installed and activated on your site. You can easily integrate and customize Contact Form 7 forms on your pages with this widget.

Introduction

Contact Form 7 is a customizable WordPress plugin for creating forms with email notifications and spam protection.

Key Use Cases for Contact Form 7 Widgets:

• Create and manage custom forms for seamless user interaction.
• Integrate email notifications and spam protection for secure communication.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Contact Form 7 Widget:

• Go to Contact Form 7 in your WordPress dashboard.
• Find the Contact Form 7 Widget in the list of available widgets.
• Drag and drop the widget into your desired widget area.
• Customize the form settings and save changes.

How to Add Contact Form 7 Widget in Elementor:

• Open the page where you want to add the Contact Form 7 Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Contact Form 7”.
• Drag the widget to your desired section.
• Select the form you want to display and customize the widget settings.

How to Configure Contact Form 7 Widgets 

• Ensure the Contact Form 7 plugin is activated in your WordPress settings.
• Open a new page in WordPress.
• Add a page title and choose the Elementor Full Width template.
• Click Publish to save your changes.
• In the Elementor panel, search for “Contact Form 7 Widget” and drag it onto the page.

Configuring Contact Form 7 Widgets : A Step-by-Step Guide

Once the Contact Form 7 Widgets is added to your page, you can configure its settings under different tabs: Content,Style and Advanced.

Content Settings

In the Content section, there is only one customization option.  Before selecting any option from the contact section, make sure to customize it first from the Contact Dashboard in the backend.

After customizing it from the Contact Dashboard in the backend, you can select any option from your creation.

Style Settings

• Style – Overall customization for the form’s appearance, including layout and general design.
• Input – Allows customization of the input fields, such as font, background, border, and padding.
• Textarea – Customizes the appearance of larger text areas, such as height, width, and font style.

• Label – Customizes the styling of form labels, such as font size, color, and spacing.
  Button – Customizes the submit button’s design, including color, size, shape, and hover effects.
  Message – Customizes the appearance of success or error messages that appear after form submission.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Contact Form 7 Widget in Elementor to create and manage custom contact forms effortlessly.

For any further assistance or inquiries, feel free to contact our support.