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.
Please, note that you can not use the data-section value twice for a different section within an HTML page, as it will be the id
of the section later.
HTML Navigation menu
<div class="section section-contact fp-auto-height-responsive no-slide-arrows " data-section="contact">
<!-- begin of information slide -->
<div class="slide" id="information" data-anchor="information">
<!-- Begin of slide section wrapper -->
<div class="section-wrapper">
<!-- title -->
<div class="section-title text-center">
<h5 class="title-bg">Contact</h5>
</div>
<div class="row">
<div class="col-12 col-md-6">
<!-- content -->
<div class="section-content anim text-left">
<!-- title and description -->
<div class="title-desc">
<div>
<h5>Customer Service</h5>
<h2 class="display-4 display-title">Contact</h2>
<p>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 class="address-container">
<div class="row">
<div class="col-12 col-md-12 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-12 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">
<a class="btn btn-outline-white btn-round" href="#contact/message">
<span class="txt">Send Message</span>
</a>
</div>
</div>
</div>
<div class="col-12 col-md-6">
</div>
</div>
</div>
<!-- End of slide section wrapper -->
</div>
<!-- end of information slide -->
<!-- begin of message slide -->
<div class="slide" id="message" data-anchor="message">
<!-- Begin of slide section wrapper -->
<div class="section-wrapper">
<div class="row justify-content-between">
<div class="col-12 col-md-6 center-vh">
<!-- content -->
<div class="section-content anim text-left">
<!-- title and description -->
<div class="title-desc">
<div>
<h5>Customer Service</h5>
<h2 class="display-4 display-title">Email Us</h2>
<p>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>
<!-- Action button -->
<div class="btns-action">
<a class="btn btn-outline-white btn-round" href="#contact/information">
<span class="txt">Information</span>
</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-5">
<!-- content -->
<div class="section-content anim text-left">
<!-- title and description -->
<div class="">
<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">
<label for="mes-name">Name :</label>
<input id="mes-name" name="name" type="text" placeholder="" class="form-control-line" required>
</div>
<div class="form-group email">
<label for="mes-email">Email :</label>
<input id="mes-email" type="email" placeholder="" name="email" class="form-control-line" required>
</div>
<div class="form-group no-border">
<label for="mes-text">Message</label>
<textarea id="mes-text" placeholder="..." name="message" class="form-control form-control-outline thick" 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">
<button id="submit-message" class="btn btn-normal btn-white btn-round btn-full email_b" name="submit_message">
<span class="txt">Send</span>
<span class="arrow-icon"></span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of slide section wrapper -->
</div>
<!-- end of message slide -->
</div>
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">
<label for="mes-name">Name :</label>
<input id="mes-name" name="name" type="text" placeholder="" class="form-control-line form-success-clean" required>
</div>
<div class="form-group email">
<label for="mes-email">Email :</label>
<input id="mes-email" type="email" placeholder="" name="email" class="form-control-line form-success-clean" required>
</div>
<div class="form-group no-border">
<label for="mes-text">Message</label>
<textarea id="mes-text" placeholder="..." 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">
<button id="submit-message" class="btn btn-normal btn-white btn-round btn-full email_b" name="submit_message">
<span class="txt">Send</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.