<div class='col-md-8'>
|
|
|
|
<!--Form with header-->
|
|
|
|
<form action="/contact" method="post">
|
|
<div class="card border-primary rounded-0">
|
|
<div class="card-header p-0">
|
|
<div class="bg-info text-white text-center py-2">
|
|
<h3><i class="fa fa-envelope"></i>Contact Me</h3>
|
|
<p class="m-0">I would love to hear from you.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-3">
|
|
|
|
<!--Body-->
|
|
<div class="form-group">
|
|
<div class="input-group mb-2">
|
|
<div class="input-group-prepend">
|
|
<div class="input-group-text"><i class="fa fa-user text-info"></i></div>
|
|
</div>
|
|
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-group mb-2">
|
|
<div class="input-group-prepend">
|
|
<div class="input-group-text"><i class="fa fa-envelope text-info"></i></div>
|
|
</div>
|
|
<input type="email" class="form-control" id="email" name="email" placeholder="example@gmail.com" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="input-group mb-2">
|
|
<div class="input-group-prepend">
|
|
<div class="input-group-text"><i class="fa fa-comment text-info"></i></div>
|
|
</div>
|
|
<textarea class="form-control" placeholder="Message" name="message" required></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="g-recaptcha" data-sitekey="6LceWF8UAAAAAIsd7F6iY_Pywt4fJsJlFNPtEgi9"></div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<input type="submit" value="Send" class="btn btn-info btn-block rounded-0 py-2">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script src='https://www.google.com/recaptcha/api.js'></script>
|
|
|
|
<script>
|
|
$("form").submit(function(event) {
|
|
|
|
var recaptcha = $("#g-recaptcha-response").val();
|
|
if (recaptcha === "") {
|
|
event.preventDefault();
|
|
alert("Please check the recaptcha");
|
|
}
|
|
});
|
|
</script>
|