File: /var/www/grapossconnect/grapossconnect/contactus.php
<?php include 'header.php'; ?>
<style>
.HeaderSection {
background: #eec9cb;
}
.TopHeaderSection .HeaderContact span {
color: #1f1f1f;
}
.TopHeaderSection h2 a {
color: #434343;
border-right: 1px solid #5c5c5c;
}
</style>
<!-- ALL PAGE HEADER SECTION -->
<section class="AllpageHeaderSection">
<div class="AllpageHeaderBg" style="background-image: url(/grapossconnect/images/page-banner-1.jpg);"></div>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<!-- <img class="wow fadeInUp" src="https://meriwebsite.in/wp-content/themes/meriwebsite/images/merilogonobg.png" alt=""> -->
<h2 class="wow fadeInUp">Contact Us
<span><a href="">Home</a> Contact Us</span>
</h2>
</div>
</div>
</div>
</section>
<section class="contactus-page-section">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="contactus-details">
<h6 class="wow fadeInLeft">CONTACT DETAILS</h6>
<h4 class="wow fadeInLeft">Get in Touch</h4>
<p class="wow fadeInLeft">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<ul>
<li class="wow fadeInLeft">
<div class="icon-ul">
<i class="fa fa-envelope"></i>
</div>
<div class="ul-details">
<h5>E-mail</h5>
<p>Mail: <span>info@grapossconnect.com</span></p>
<!-- <p>Gmail: <span>info@grapossconnect.com</span></p> -->
</div>
</li>
<li class="wow fadeInLeft">
<div class="icon-ul">
<i class="fa fa-mobile"></i>
</div>
<div class="ul-details">
<h5>Contact</h5>
<p>Mobile: <span>+91-8448553963</span></p>
<!-- <p>Phone: <span>+1-485-456-0102</span></p> -->
</div>
</li>
<li class="wow fadeInLeft">
<div class="icon-ul">
<i class="fab fa-chrome"></i>
</div>
<div class="ul-details">
<h5>Website</h5>
<p>Website: <span>grapossconnect.com</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="contactus-page-form wow fadeInRight">
<h3>Leave a message</h3>
<h5>Your email address will not be published.</h5>
<div class="sdetail-success" id="sdetail-success" style="display:none;"></div>
<div class="sdetail-error" id="sdetail-error" style="display:none;"></div>
<form action="" method="post">
<input type="text" id="user_name" name="user_name" placeholder="Your name">
<input type="text" id="user_email" name="user_email" placeholder="Your email address">
<textarea id="user_message" name="user_message" rows="4" maxlength="200" placeholder="Write your message..."></textarea>
<p class="err-msg"></p>
<script type="text/javascript" src="js/bootstrap-1.10.0-maxlength.min.js" ; ?>
</script>
<script type="text/javascript">
jQuery('textarea').maxlength({
alwaysShow: true,
threshold: 10,
warningClass: "label label-success",
limitReachedClass: "label label-danger",
separator: ' out of ',
preText: 'You Write ',
postText: ' chars.',
validate: true
});
</script>
<div class="captcha-box">
<div id="CaptchaImageCode" class="CaptchaImageCode">
<canvas id="CapCode" class="capcode" width="130" height="40"></canvas>
</div>
<i class="fa fa-refresh" onclick='CreateCaptcha()'></i>
<input type="text" placeholder="Enter Captcha" name="captcha" id="captcha" size="5" value="" />
</div>
<!-- <button class="contactus-btn">Send Message</button> -->
<input class="button contactus-btn" name="btn-submit" type="button" value="SEND" />
</form>
<style type="text/css">
div.sdetail-error {
color: #c6484e;
font-size: 12px;
border: 1px solid #f2b1b8;
padding: 7px 13px;
text-align: center;
width: 70%;
background-color: #fadde0;
margin: 0 auto 1em;
}
div.sdetail-success {
color: #004000;
font-size: 12px;
border: 1px solid #004000;
padding: 7px 14px;
text-align: left;
width: 430px;
background-color: #e0f1e0;
margin-bottom: 15px;
margin-top: 20px;
}
</style>
<script type="text/javascript">
jQuery(function($) {
jQuery('.contactus-btn').click(function() {
jQuery("#loading").css('display', 'block');
var user_name = jQuery('#user_name').val();
var user_email = jQuery('#user_email').val();
var user_message = jQuery('#user_message').val();
var name_regex = /^[a-zA-Z\s]+$/;
var atposition = user_email.indexOf("@");
var dotposition = user_email.lastIndexOf(".");
var Usercaptcha = cd;
var CreatedCaptcha = Usercaptcha.split(" ").join("");
var UserInputCaptcha = jQuery('#captcha').val();
if (user_name == "") {
jQuery("#sdetail-error").css('display', 'block');
jQuery("#sdetail-error").html("Enter Your Name.");
jQuery('#user_name').focus();
jQuery("#loading").css('display', 'none');
return false;
}
if (!user_name.match(name_regex)) {
jQuery("#sdetail-error").css('display', 'block');
jQuery("#sdetail-error").html("Only letters and white space allowed");
jQuery('#user_name').focus();
jQuery("#loading").css('display', 'none');
return false;
}
if (user_email == '') {
jQuery("#sdetail-error").css('display', 'block');
jQuery("#sdetail-error").html("Enter Your Email.");
jQuery('#user_email').focus();
jQuery("#loading").css('display', 'none');
return false;
}
if (atposition < 1 || dotposition < atposition + 2 || dotposition + 2 >= user_email.length) {
jQuery("#sdetail-error").css('display', 'block');
jQuery("#sdetail-error").html("Enter a valid E-mail address");
jQuery('#user_email').focus();
jQuery("#loading").css('display', 'none');
return false;
}
if (UserInputCaptcha == '') {
jQuery("#sdetail-error").css('display', 'block');
jQuery("#sdetail-error").html("Enter Captcha Code.");
jQuery('#captcha').focus();
jQuery("#loading").css('display', 'none');
return false;
} else if (UserInputCaptcha != CreatedCaptcha) {
jQuery("#sdetail-error").css('display', 'block');
jQuery("#sdetail-error").html("Captcha Code does not match.");
jQuery('#captcha').focus();
jQuery("#loading").css('display', 'none');
return false;
} else {
jQuery.ajax('https://grapossconnect.com/enquiry_data.php', {
type: 'POST',
data: {
dataType: 'contact',
uname: user_name,
uemail: user_email,
umessage: user_message
},
success: function(data) {
if (data.status == 1) {
var msgSuccess = data.msg;
jQuery("#sdetail-success").css('display', 'block');
jQuery("#sdetail-success").html(msgSuccess);
jQuery("#sdetail-error").css('display', 'none');
jQuery("#loading").css('display', 'none');
jQuery('#user_name').val('');
jQuery('#user_email').val('');
jQuery('#user_message').val('');
jQuery('#captcha').val('');
} else if (data.status == 0) {
var msgFail = data.msg;
jQuery("#sdetail-error").css('display', 'block');
jQuery("#sdetail-error").html(msgFail);
jQuery("#loading").css('display', 'none');
}
},
error: function(jqXhr, textStatus, errorMessage) {}
});
}
});
});
</script>
</div>
</div>
</div>
</div>
</section>
<!-- END CONTACT US SECTION -->
<?php include 'footer.php'; ?>