Contact Form 7

< All Topics

Add Contact Form 7 to your website using this widget. You can fully customize the Forms to improve the UI/UX of the forms. Contact Form 7 has more than 120 customization options that are easy to use. You can add custom backgrounds to your forms.

Pro tip
Why not add Contact Form 7 to your website that will enhance the UX and UI of your website and forms. While making a complicated form, make sure you enter all details in place to get accurate data.

How to use the Contact form 7 Widget of The Plus Addons For Elementor

The Contact form 7 widget comes with different layouts. Let’s understand how to use this widget in the tutorial below. 

Table Of Contents

Adding Contact form 7 To WordPress

First, you need to download and activate the Contact Forms 7 plugin in WordPress Dashboard. To activate, follow the steps given below:

Once you have Installed the Contact Forms 7 to WordPress, then you need to follow the steps as shown in the video below. You can also create new forms the in Contact Form 7 forms section. After adding a new for, you just need to copy the shortcode and use it later on after adding the widget in Elementor.

General Steps

Search for the Contact Forms 7 element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Contact Forms 7 widget. First, click on the Content tab.

1. Content

Content

Select Form

Select your desired Contact form you want to display on the website.

Style

Select your desired style for the Contact Form you want to display on the website.

Alignment

Select the Alignment of the Contact form you want to display on the website.

Extra Options

Outer Section Styling

For Outer Section you can select styling option values to Label or to Custom class.

2. Style

The Style tab is used for customizing the appearance of all the Mega Menu widget components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Label

Set the inner padding, Typography, Margin, Label, Symbol with this option.

Input Fields Styling

Set the inner padding, Typography, Margin, Label, Symbol, box Shadow with this option.

Textarea Fields Styling

Set the inner padding, Typography, Margin, Label, Symbol, box Shadow with this option.

Checkbox/Radio Field

Set the inner padding, Typography, Margin, Label, Symbol, box Shadow, Box Border with this option.

File/Upload Field

Set the inner padding, Typography, Margin, Label, Symbol, box Shadow with this option.

Outer (Field) Styling

Set the inner padding, Typography, Margin, Label, Symbol with this option.

Submit/Send Button

Set the inner padding, Typography, Margin, Label, Symbol, box Shadow, Box Border with this option.

Response Message

Set the inner padding, Typography, Margin, Label, Symbol, box Shadow, Box Border with this option.

Extra Option

Set the inner padding, Typography, Margin, Label, Symbol, box Shadow, Box Border with this option.

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0.5 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 100%
How can we improve this article?
Need help?