# Contact Form 7

The **Contact Form 7** **Widget** is used to display the contact forms which is created using the [Contact Form 7 plugin](https://wordpress.org/plugins/contact-form-7/).

{% hint style="warning" %}
**Contact Form 7** plugin should be installed before using the widget. To download the Contact Form 7 plugin go here: [Download Contact Form](https://wordpress.org/plugins/contact-form-7/) 
{% endhint %}

### Using Contact Form 7 widget

Go to your site and start editing the page with Elementor.

### Step 1:

Select the **Contact Form 7** widget from the menu bar on the left-hand side of your screen then drag and drop it in the selected area.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F6SE1Tm2GLPPraETq2Gnl%2FCompanion%20-%20c7%20add.png?alt=media\&token=ef32f8c6-7fb9-4a3f-803a-fc949ea02e3a)

### Step 2:

You will get a window with the basic setting options under the **Content** tab. You need to choose the contact form which is available on your website:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FQbgGXdikvbDFyHDthUfp%2FCompanion%20-%20c7%20select.png?alt=media\&token=33cb5aa2-9871-421a-be3f-57e906cc6d9b)

{% hint style="success" %}
You can create a Contact form by following the documentation of the Contact 7 Plugin from [here](https://contactform7.com/editing-form-template/).
{% endhint %}

### Step 3:

Now, by clicking on the Style Tab you can customize the text color, typography, margin, padding, border, size, and many more for used fileds in the Contact form:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FILM1cdVI8ffr6ydRJeHX%2FCompanion%20-%20c7%20styles.png?alt=media\&token=ced7cb78-aa3f-41df-b1c3-9e5a987c292c)

### Step 4:

If you want to add motion effects, background, or make the page responsive, click on ‘Advanced**’** to explore those options. This **‘Advanced’** tab is a default feature of Elementor. Give a read to [this Document](https://docs.elementor.com/article/571-advanced-tab) to know more about Advanced features and their uses.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F7OHDxTtPTNOHvcqhDkm8%2FCompanion%20-%20c7%20adv.png?alt=media\&token=564d5227-8600-400f-9244-4ff018efc39d)

Finally, after completing all the customization click on ‘Publish’ to see your work live.

Great job! You have done it successfully.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FwoAh6o8k9kEtF1xNFrI4%2FContact%20us.gif?alt=media\&token=e2afca78-4147-46fd-befa-0a4fd2a0946c)