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.
Contact form markup added to Form
If you never before used this plugin I suggest you to check Getting Started with ContactForm 7.
Calculate Loan
This contact form come with two color versions, than can be achieved by adding custom css class to Inner column Settings in VisualComposer when creating page with form:
Adding custom class
- Dark version (with custom class ct-contact-claculatorFormContainer)
Calculator loan dark
- Light version (no custom class)
Calculator loan light
Calculator 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 |
<div class="ct-contact-form"> <h3 class="ct-formTitle ct-contactPage"> Calculate Loan </h3> <label> Property Price ($) [text* propertyprice] </label> <label> Percent Down [text* percentdown] </label> <label> Terms (Months) [text* terms] </label> <label> Interest Rate in % [text* Rate] </label> [submit "Calculate My Mortage"] </div> <script> document.addEventListener( 'wpcf7mailsent', function( event ) { location = location.href + '/calculate-loan/'; jQuery('.wpcf7-response-output').remove(); }, false ); </script> |
Feel Free to Contact Us
Feel free to contact us
To recreate this contact form please use:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="ct-contactForm-main"> <h3 class="ct-formTitle"> Feel Free To Contact Us </h3> <img class="ct-formImage" src="/wp-content/themes/estato/theme/assets/images/demo-content/questions.jpg"> <label> Name [text* your-name] </label> <label> Email [email* your-email] </label> <label> Phone [text phone] </label> <label> Message [textarea your-message class:ct-contactForm-main--message] </label> [submit "Send Message"] </div> |
Newsletter
Newsletter form
To recreate this Newsletter form please use:
|
1 2 3 4 5 6 7 8 9 |
<div class="ct-contact-form ct-newsletter ct-newsletter--page"> <h3 class="ct-formTitle ct-contactPage"> Join our newsletter </h3> <label><span class="sr-only"> Your Email (required)</span> [email* your-email placeholder "Your E-mail Address"] </label> <p class=text-right> [submit class:btn class:btn-primary class:btn-transparent--border class:ct-u-text--motive class:text-capitalize "Subscribe"] </p> </div> |
Newsletter-footer
This is a contatc form that will let you recived e-mails from user that want to Subscribe your site.
Footer contact form
To show your contatc form in footer, go to Appearance > Widgets by adn you can add there ContactForm7 shortcode to Text widget
Adding footer contact form
To recreate the look of this contact form please use this markup:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="ct-newsletter text-right"> <span class="text-uppercase ct-u-text--white ct-fw-600">Join our newsletter</span> <label><span class="sr-only"> Your Email (required)</span> [email* your-email placeholder "Your E-mail Address"] </label> [submit class:btn class:btn-primary class:btn-transparent--border class:ct-u-text--motive class:text-capitalize "Subscribe"] </div> |
Send us a Message
Contact form on map
Markup used for this contact form:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="ct-contact-form"> <h3 class="ct-formTitle ct-contactPage"> SEND US A MESSAGE </h3> <label> Name [text* your-name] </label> <label> Email [email* your-email] </label> <label> Phone [text phone] </label> <label> Message [textarea your-message] </label> [submit "Send Message"] </div> |
To display this contact form on a map, you need to create two Rows Like on the image below.
Creating section
and add :
- ct-contact-map–Container custom class for Google map Row
- ct-contact-formContainer ct-contact-multiPage custom class for Contact form Row
Adding custom CSS class