1. Home
  2. Docs
  3. Whal Documentation
  4. Pages
  5. How to create the Contact page?
Last updated 2268 days ago

How to create the Contact page?

The contact page is a page template in the Appland theme. So you must have to select the Contact page template from the Page Attributes meta-box.

Follow the following steps to create your full-featured contact page.

  • Navigate to Pages > Add New to create a new page
  • Select the Contact page template from the right-hand side’s Page Attributes meta-box.

  • Then navigate to Theme Settings > Contact Page to configure the contact page.

Note: In the contact form shortcode you have to add an additional attribute html_class  with the value of row m0 contact_form.  The full attribute with value is- html_class=”row m0 contact_form”

Contact Form Template:

Here is the contact form 7 template that we used in the Appland WordPress theme. Copy the full template code and paste it into your Contact Form.

<div class="row">
  <div class="col-sm-6 form-group">
    [text* text-754 class:form-control class:contact-fname placeholder "Name"]
  </div>
  <div class="col-sm-6 form-group">
    [email* email-506 class:form-control class:contact-mail placeholder "Email"]
  </div>
  <div class="col-sm-6 form-group">
    [tel tel-76 class:form-control class:contact-phone placeholder "Phone"]
  </div>
  <div class="col-sm-6 form-group">
    [text* text-754 class:form-control class:contact-subject placeholder "Subject"]
  </div>
  <div class="col-sm-12 form-group">
    [textarea* textarea-191 class:form-control class:contact-message placeholder "Message"]
  </div>
  <div class="col-sm-6 form-group">
    [cf7sr-simple-recaptcha]
  </div>
  <div class="col-sm-6 form-group">
    [submit class:btn class:thm-btn "Send Mail"]
    <span class="contact-submit-progress"></span>
    <p class="contact-submit-message"></p>
  </div>       
</div>

 

Was this article helpful to you? Yes No

How can we help?

Archives

Categories

  • No categories