Heads up! Make sure Contact Form 7 is installed first!
Please make sure you have Contact Form 7 installed and activated before creating your Contact Us page. If you haven’t already done so, you still can install this plugin before proceeding to the following steps.
Create a New Contact Form
The Contact Us page refers to the web page containing the contact form. First, you will first need to create new form and then add it to a new page.
To create a new contact form, visit Contact > Add New. Give your new contact form a title and under the Form tab, place the following code from our demo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
[response] <div class="form-group"> <label for="form-control-name">Your Name <span class="text-danger">*</span></label> [text* form-control-name class:form-control id:form-control-name] </div> <div class="form-group"> <label for="form-control-email">Your Email <span class="text-danger">*</span></label> [email* form-control-email class:form-control id:form-control-email] </div> <div class="form-group"> <label for="form-control-message">Your message <span class="text-danger">*</span></label> [textarea* form-control-message class:form-control id:form-control-message] </div> <div class="text-center"> [submit class:btn class:btn-primary class:btn-lg "Send message"] </div> |
You can also click each tab to reveal additional configuration options for your form.
When you have finished building your contact form, make sure you click the Save button. After saving, the page will reload and you will be able to copy the shortcode for your form.
|
1 |
[contact-form-7 id="##" title="Contact form"] |
Create a New Page
To create your Contact Us page, visit Pages > Add New. Give your new page a title and just place the shortcode into your content. Your theme offers an option to change the look and feel of the Contact Us page. You can select the Full Width Template in the Page Attributes panel box.
Finally, please make sure you click the Publish button.
