# Contact Page

**1. Create Contact Form.**

 Make sure you install and active Contact Form 7 plugin to continue reading.

 **Step 1** - Log in to your WordPress Dashboard, go to **Contact** > **Add New**

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LpBdJGhRUrc5B1koaqU%2F-LqonsXVgl6KIt1rDuCa%2F-Lqov1yW9HFP_vqu6pM8%2Fimage_2.jpg?alt=media\&token=af8dcdf3-8786-4e04-a6d4-a6397c334496)

**Step 2** - **Give a Name to your form** and **change Mail Info**

![](https://2049666827-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVpKJce_f0UEccen8sQ%2F-MWckEpFHWrF1Fdf-Db3%2F-MWckVYjvauYT5ZUoTv0%2Feditech24.png?alt=media\&token=1ed9366d-f5fa-4efe-8d90-ad3ad3e67260)

![](https://gblobscdn.gitbook.com/assets%2F-M-OdO0m_oTGOajNjueK%2F-M-xYvnWIBRBzIAHc2o1%2F-M-x__ULKirMth76dFlP%2FScreenshot_90.png?alt=media\&token=689d3399-aae1-4210-b407-35db008f8228)

**Step 3** - **Edit Messages field** to change the Form Layout

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LpBdJGhRUrc5B1koaqU%2F-LqonsXVgl6KIt1rDuCa%2F-LqowPdglWvSeMIzGzoa%2Fcontact1_001.jpg?alt=media\&token=f1a0cfca-5803-40fe-9d58-0bb4a7351661)

**2. Create Contact Page**

 **Step 1** - Log in to your WordPress Administration Panel (Dashboard). **Step 2** - Click on **Pages** > **Add New**. **Step 3** - Give your page a name then click button "Edit with Elementor " ( you need to have the Elementor plugin activated ). **Step 4** - Click on the Add Element button

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LpBdJGhRUrc5B1koaqU%2F-LqonsXVgl6KIt1rDuCa%2F-LqowYGVduJNRhyboao1%2Fimage_30.png?alt=media\&token=5c7716d2-b195-4024-84b4-05909240c4d7)

**Step 5** - Select the Contact Form 7 element.

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LpBdJGhRUrc5B1koaqU%2F-LqonsXVgl6KIt1rDuCa%2F-Lqowd6PGrdYde47NQLW%2Fimage_33.png?alt=media\&token=fce633fc-237a-4137-a9ca-6c0a94f12cf0)

**Step 6** - The **Contact Form 7 Settings** should appear. Select the Form you want to use you can also customize the Color and change the fields layout and button design **Step 7** - Update / Publish your page .

**Contact-form1:**

```
<div class="row">

<div class="col-md-6">
<p>
[text your-name id:form-name-2 akismet:author placeholder ="Your Name *"]
</p>
</div>

<div class="col-md-6">
<p>
[number your-phone id:form-phone-2 placeholder ="Phone Number *"]
</p>
</div>

<div class="col-md-6">
<p class="mb-4">
[email* your-email id:form-email-2 akismet:author_email placeholder ="Email Address *"]
</p>
</div>

<div class="col-md-6">
<p>
[text your-subject placeholder ="Subject"]
</p>
</div>

<div class="col-md-12">
<p>
[textarea* your-message x4 "Message *"]
</p>
</div>

</div>
<button type="submit" value="Submit"><span>send message</span><i class="opal-icon-arrow-right" aria-hidden="true"></i></button>
```