Please follow the steps below to make your contact page like our live preview:

  1. Make sure ‘Contact Form 7’ plugin is installed.
  2. Go to ‘Contact –> Contact Forms’ page, and in the ‘Form’ textarea field copy and paste or write the following html:
    <div class=”row”>
    <div class=”col-lg-6 formmargin”>
    <div class=”form-group”>
    [text* text-895 class:form-control placeholder “Name”]
    </div><div class=”form-group”>
    [email* email-980 class:form-control placeholder “Email”]
    </div><div class=”form-group”>
    [text* text-995 class:form-control placeholder “Subject”]
    </div>
    </div><div class=”col-lg-6″>
    <div class=”form-group”>
    [textarea* textarea-688 40×8 class:form-control placeholder “Message…”]
    </div>
    </div><div class=”col-lg-12″>
    [submit id:yes class:btn class:btn-primary “Send Message”]
    </div>
    </div>

    You can edit the field ids (given in bold font). For example: you can put text-9999 in place of text-895. You just need to make sure that, you are using the correct ids in the Mail fields of your Contact Form.

  3. After that, copy the given shortcode by the form. Then create a new page and choose ‘Contact us’ as the page template. You will find a ‘Form Shortcode’ field below the text editor of the page. Paste the shortcode you just copied there and publish the page. You will see, the form is ready at the front-end.
  4. If you want to use map, you can get your map iframe code from your google map, and paste that in the ‘Map’ field.
  5. You can populate the right sidebar of the contact page by filling in the required fields you see below the ‘Editor’ of your wp contact page.

About The Author