Replace third party contact form with a custom one
php files are not included because they contain sensitive information
This commit is contained in:
Neil Brommer
parent
1aada12178
commit
bcbc420675
4
.gitignore
vendored
4
.gitignore
vendored
|
|
@ -15,3 +15,7 @@ js/popper.js
|
|||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
|
||||
info\.php
|
||||
|
||||
contact\.php
|
||||
|
|
|
|||
55
contact.html
55
contact.html
|
|
@ -39,18 +39,17 @@
|
|||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script src="js/jquery-3.2.1.js"></script>
|
||||
<script src="js/popper.js"></script>
|
||||
<script src="bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="js/contact.js"></script>
|
||||
|
||||
<!-- Google reCAPTCHA -->
|
||||
<script src='https://www.google.com/recaptcha/api.js'></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Fixed navbar -->
|
||||
<nav id="topnav" class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<div class="container">
|
||||
|
|
@ -81,24 +80,32 @@
|
|||
<div class="container">
|
||||
<div class="jumbotron">
|
||||
<h1>Contact</h1>
|
||||
<p>
|
||||
Be aware that the information entered here goes through a
|
||||
third party (<a href="http://www.foxyform.com/">foxyform</a>).
|
||||
Once you send a message through this form, we can
|
||||
communicate directly over email.
|
||||
</p>
|
||||
|
||||
<!-- Do not change the code! -->
|
||||
<a id="foxyform_embed_link_892533" href="http://www.foxyform.com/">foxyform</a>
|
||||
<script type="text/javascript">
|
||||
(function(d, t){
|
||||
var g = d.createElement(t),
|
||||
s = d.getElementsByTagName(t)[0];
|
||||
g.src = "http://www.foxyform.com/js.php?id=892533&sec_hash=5fb57dab4a2&width=350px";
|
||||
s.parentNode.insertBefore(g, s);
|
||||
}(document, "script"));
|
||||
</script>
|
||||
<!-- Do not change the code! -->
|
||||
<div id="successAlert" class="alert alert-success" role="alert" style="display: none;">Message sent successfully!</div>
|
||||
<div id="errorAlert" class="alert alert-danger" role="alert" style="display: none"></div>
|
||||
|
||||
<form id="contactForm">
|
||||
<div class="form-group">
|
||||
<label for="nameField">Name<span class="required">*</span></label>
|
||||
<input id="nameField" type="text" required="required" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="emailField">Email Address<span class="required">*</span></label>
|
||||
<input id="emailField" type="email" required="required" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="subjectField">Subject</label>
|
||||
<input id="subjectField" type="text" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="messageField">Message<span class="required">*</span></label>
|
||||
<textarea id="messageField" rows="5" required="required" class="form-control"></textarea>
|
||||
</div>
|
||||
<div class="form-group captcha">
|
||||
<div class="g-recaptcha" data-size="compact" data-sitekey="6LfFATcUAAAAAJ_YZ3qvYWqrtOUHmCItq-azzV3x"></div>
|
||||
</div>
|
||||
<button id="contactSubmit" type="submit" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -30,11 +30,10 @@ li.col-md-6 {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
min-width: 325px;
|
||||
.required {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#foxyform_embed_link_892533 {
|
||||
width: auto !important;
|
||||
.invalid-captcha {
|
||||
box-shadow: 0 0 1.5px 1px red;
|
||||
}
|
||||
|
|
|
|||
65
js/contact.js
Normal file
65
js/contact.js
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
$(document).ready(function() {
|
||||
$("#contactForm").on("submit", sendForm);
|
||||
});
|
||||
|
||||
function sendForm(e) {
|
||||
e.preventDefault(); // prevent the page from refreshing
|
||||
|
||||
$("#contactSubmit").prop("disabled", true);
|
||||
|
||||
if ($("#successAlert")[0].style.display != 'none') {
|
||||
$("#successAlert").slideUp(250);
|
||||
}
|
||||
if ($("#errorAlert")[0].style.display != 'none') {
|
||||
$("#errorAlert").slideUp(250);
|
||||
}
|
||||
|
||||
var captcha = grecaptcha.getResponse();
|
||||
if (captcha.length == 0) {
|
||||
$(".captcha").addClass("invalid-captcha");
|
||||
} else {
|
||||
$(".captcha").removeClass("invalid-captcha");
|
||||
|
||||
var name = $("#nameField").val();
|
||||
var email = $("#emailField").val();
|
||||
var subject = $("#subjectField").val();
|
||||
var message = $("#messageField").val();
|
||||
|
||||
$.ajax({
|
||||
url: "contact.php",
|
||||
type: "POST",
|
||||
data: {
|
||||
"name": name,
|
||||
"email": email,
|
||||
"subject": subject,
|
||||
"message": message,
|
||||
"captcha": captcha
|
||||
},
|
||||
success: messageSuccess,
|
||||
error: messageError,
|
||||
complete: doneSending
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function messageSuccess(result) {
|
||||
$("#successAlert").slideDown(500);
|
||||
}
|
||||
|
||||
function messageError(result) {
|
||||
var alert = $("#errorAlert");
|
||||
alert.empty();
|
||||
$(document.createTextNode("Error: " + result.responseText)).appendTo(alert);
|
||||
alert.slideDown(500);
|
||||
}
|
||||
|
||||
function doneSending() {
|
||||
var html = $("html");
|
||||
var top = html.scrollTop() + $("body").scrollTop() // Get position of the body
|
||||
|
||||
if(top != 0) {
|
||||
$("html,body").animate({scrollTop:0}, '500');
|
||||
}
|
||||
|
||||
$("#contactSubmit").prop("disabled", false);
|
||||
}
|
||||
Loading…
Reference in a new issue