Contact forms in {Theme} are created with the use of Contact Form 7 Plugin. Below you will find information how to recreate Contact forms used in our theme by adding the correct markup for the Form section of this plugin.
If you never before used this plugin I suggest you to check Getting Started with ContactForm 7.
Contact form
Contact form can be recreated by using this markup for contact form:
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 |
<div class="ct-contactForm validateIt"> <div class="row"> <div class="col-sm-4"> <div class="form-group">[text* your-name class:form-control placeholder "Name"]<label for="cf-name" class="sr-only">Name*</label></div> </div> <div class="col-sm-4"> <div class="form-group">[email* your-email class:form-control placeholder "Email Adress"]<label for="cf-email" class="sr-only">Email address*</label> </div> </div> <div class="col-sm-4"> <div class="form-group">[text website class:form-control placeholder "Website"]<label for="cf-website" class="sr-only">Website</label> </div> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="form-group">[text phone-no class:form-control placeholder "Phone No"]<label for="cf-phone" class="sr-only">Phone no</label></div> </div> <div class="col-sm-8"> <div class="form-group">[text* meeting-subject class:form-control placeholder "Meeting Subject*"]<label for="cf-subject" class="sr-only">Meetings subject*</label> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <div class="form-group">[textarea* message 10x1 class:form-control placeholder "Message*"]<div class="ct-contactForm-requiredMessage">*Marked fields are mandatory</div> <button type="submit" class="btn btn--withIcon">Send message<i class="fa fa-caret-right"></i></button> <label for="cf-message" class="sr-only">Message*</label> </div> </div> </div> </div> |
Footer – newsletter
To recreate this contact form please use:
1 2 3 4 5 |
<div class="form-group"> <label> JOIN OUR NEWSLETTER </label> <span class="inner">[email* your-email class:form-control placeholder "Email address"] <button type="submit"><i class="fa fa-plus-circle"></i></button></span> </div> |
In our demo this form is added to the Footer second column in first row widgets via adding this contatc form shortcode to text widget as you can see on the image below:
Promosection – newsletter
This contact form can be recreated by using PromoSection shortcode. More information about it, you will be able to find in the Disrupt custom shortcodes section by adding there Contact form ID.
To recreate this Newsletter form please use for the contact form:
1 2 3 |
<div class="form-group"> <span class="inner">[email* your-email class:form-control placeholder "Email address"]<button type="submit"><i class="fa fa-plus-circle"></i></button></span> </div> |