Contact- section
This layout shows contact information to show your web audience how they can reach you. Additionnaly, it comes with a built in AJAX contact form.
It is composed of two slide : the contact information and the message form.
CODE
Here is the HTML code to obtain it. Embed it within the main tag with class page-main.
HTML Navigation menu
<!-- Begin of contact section -->
<div class="section section-contact fp-auto-height-responsive no-slide-arrows " data-section="contact">
<div class="section-cover-tier right fit bg-img" data-image-src="./img/items/img-sample2-square.jpg">
</div>
<!-- begin of information slide -->
<div class="slide" id="information" data-anchor="information">
<!-- Begin of slide section wrapper -->
<div class="section-wrapper fullwidth fullheight center-lg-v with-margin margin-topbottom">
<!-- content -->
<div class="section-content fullwidth anim text-left">
<!-- main content -->
<div class="row justify-content-between">
<div class="col-12 col-md-8 col-lg-6 text-left center-v">
<div class="f-wrapper">
<!-- title and description -->
<div class="title-desc">
<div class="anim-2">
<h2 class="display-4 display-title display-decor">Contact</h2>
<p class="desc-decor">For questions about our company and products found on our stores.</p>
</div>
<div class="address-container anim-3">
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<h4>Contact</h4>
<p>Call: 01 234 567 89</p>
<p>Email: ouremail@domain.com</p>
</div>
<div class="col-12 col-md-6 col-lg-6">
<h4>Address</h4>
<p>
Company address
<br>12 Street Turning Place
<br>South Est, Antartica
</p>
</div>
</div>
</div>
</div>
<!-- Action button -->
<div class="btns-action anim-4">
<a href="//twitter.com/miradontsoa" class="btn btn-social">
<i class="icon fa fa-twitter"></i>
</a>
<a href="//linkedin.com/miradontsoa" class="btn btn-social">
<i class="icon fa fa-linkedin"></i>
</a>
<a class="btn btn-arrow btn-primary" href="#contact/message">
<span class="icon">
<span class="arrow-right"></span>
</span>
<span class="text">Send Message</span>
</a>
</div>
</div>
</div>
<div class="d-none d-md-block col-12 col-md-4 col-lg-4">
</div>
</div>
</div>
</div>
<!-- End of slide section wrapper -->
<!-- begin of slide footer -->
<div class="slide-footer section-footer footer-register">
<form class="send_email_form form-container form-container-transparent form-container-white" method="post" action="ajaxserver/serverfile.php">
<div class="form-desc">
<p class="invite">Register email to newsletter :</p>
</div>
<div class="form-input">
<div class="form-group form-success-gone">
<!-- <label for="reg-email">Email</label> -->
<div class="f-input">
<input id="reg-email" name="email" class="form-control form-control-outline form-control-white" type="email" required placeholder="your@email.address"
data-validation-type="email" />
<div class="btns-action">
<button id="submit-email" name="submit_email" class="btn btn-arrow btn-primary form-success-gone">
<span class="icon">
<i class="ion ion-checkmark"></i>
</span>
<span class="text">Subscribe</span>
</button>
</div>
</div>
</div>
<div class="form-group mb-0">
<div>
<p class="email-ok invisible form-text-feedback form-success-visible">Your email has been registred, thank you.</p>
</div>
</div>
</div>
</form>
</div>
<!-- end of slide footer -->
</div>
<!-- begin of message slide -->
<div class="slide" id="message" data-anchor="message">
<!-- Begin of slide section wrapper -->
<div class="section-wrapper fullwidth fullheight center-lg-v with-margin margin-topbottom">
<!-- main content -->
<div class="row justify-content-between">
<div class="col-12 col-md-12 col-lg-6">
<!-- content -->
<div class="section-content fullwidth anim text-left">
<!-- title and description -->
<div class="title-desc">
<div class="anim-2">
<h2 class="display-4 display-title display-decor">Email Us</h2>
<p class="desc-decor">For questions about our company and products found on our stores. Cras vitae neque molestie,
rhoncus ipsum sit amet, lobortis dui. Fusce in urna sem.</p>
</div>
</div>
<!-- begin of message container -->
<div class="message-form">
<div class="form-container form-container-card">
<!-- Message form container -->
<form class="send_message_form message form" method="post" action="ajaxserver/serverfile.php" id="message_form">
<div class="form-group name">
<input id="mes-name" name="name" type="text" placeholder="Name" class="form-control form-control-outline thick form-success-clean"
required>
</div>
<div class="form-group email">
<input id="mes-email" type="email" placeholder="Email" name="email" class="form-control form-control-outline thick form-success-clean"
required>
</div>
<div class="form-group no-border">
<textarea id="mes-text" placeholder="Message ..." name="message" class="form-control form-control-outline thick form-success-clean"
required></textarea>
<div>
<p class="message-ok invisible form-text-feedback form-success-visible">Your message has been sent, thank you.</p>
</div>
</div>
<div class="btns text-left d-flex justify-content-between">
<a class="btn btn-arrow" href="#contact/information">
<span class="icon">
<span class="arrow-left"></span>
</span>
<span class="text">Information</span>
</a>
<button id="submit-message" class="btn btn-outline email_b" name="submit_message">
<span class="txt">Send Now</span>
<span class="arrow-icon"></span>
</button>
</div>
</form>
</div>
</div>
<!-- end of message container -->
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
</div>
</div>
<!-- aside content -->
<div class="section-aside aside-bottom anim small-relative">
</div>
</div>
<!-- End of slide section wrapper -->
</div>
<!-- Arrows scroll down/up -->
<footer class="section-footer scrolldown">
<a class="up">
<span class="btn btn-arrow">
<span class="icon">
<span class="arrow-up"></span>
</span>
</span>
</a>
</footer>
</div>
<!-- End of contact section -->
Registration form at bottom
The form tag with class send_email_form, inside div with class slide-footer handles email registration. Here are the corresponding HTML code :
HTML Form
<!-- Registration form container-->
<form class="send_email_form form-container form-container-transparent form-container-white" method="post" action="ajaxserver/serverfile.php">
<div class="form-desc">
<p class="invite">Register email to newsletter :</p>
</div>
<div class="form-input">
<div class="form-group form-success-gone">
<!-- <label for="reg-email">Email</label> -->
<div class="f-input">
<input id="reg-email" name="email" class="form-control form-control-outline form-control-white" type="email" required placeholder="your@email.address"
data-validation-type="email" />
<div class="btns-action">
<button id="submit-email" name="submit_email" class="btn btn-arrow btn-primary form-success-gone">
<span class="icon">
<i class="ion ion-checkmark"></i>
</span>
<span class="text">Subscribe</span>
</button>
</div>
</div>
</div>
<div class="form-group mb-0">
<div>
<p class="email-ok invisible form-text-feedback form-success-visible">Your email has been registred, thank you.</p>
</div>
</div>
</div>
</form>
The p tag with class invite represents the default text which asks for a subscription. And tag with class email-ok will be the text which will be shown when the user registration is a success.
Sample server to handles email registration are provided with the template. Note that, they works only if you use a PHP based web server and require that it allows you to send email, and to write files. Check out here to learn more.
AJAX contact form
Send message section are located within the form with a class send_message_form (and id message_form). It handles the contact form.
It has the following structure :
HTML Navigation menu
<!-- Message form container -->
<form class="send_message_form message form" method="post" action="ajaxserver/serverfile.php" id="message_form">
<div class="form-group name">
<input id="mes-name" name="name" type="text" placeholder="Name" class="form-control form-control-outline thick form-success-clean"
required>
</div>
<div class="form-group email">
<input id="mes-email" type="email" placeholder="Email" name="email" class="form-control form-control-outline thick form-success-clean"
required>
</div>
<div class="form-group no-border">
<textarea id="mes-text" placeholder="Message ..." name="message" class="form-control form-control-outline thick form-success-clean"
required></textarea>
<div>
<p class="message-ok invisible form-text-feedback form-success-visible">Your message has been sent, thank you.</p>
</div>
</div>
<div class="btns text-right">
<button id="submit-message" class="btn btn-outline-white btn-round btn-fullNot email_b" name="submit_message">
<span class="txt">Send Now</span>
<span class="arrow-icon"></span>
</button>
</div>
</form>
Change texts by yours.
Point the action attribute of the form tag with class send_message_form to your desired server.
Sample server files based on PHP, which can act as server are provided under the ajaxserver folder.
Go to Configure PHP ajax form for more details.
Tag with class message-ok will be the text which will be shown when message was sent successfully.