NeilBrommer/Personal-Site
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Replace third party contact form with a custom one

Browse source 
php files are not included because they contain sensitive information
This commit is contained in:
Neil Brommer 2017-11-02 20:30:10 -07:00
parent 1aada12178
commit bcbc420675
4 changed files with 104 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.gitignore vendored
View file

@ -15,3 +15,7 @@ js/popper.js
!.vscode/tasks.json !.vscode/tasks.json
!.vscode/launch.json !.vscode/launch.json
!.vscode/extensions.json !.vscode/extensions.json
info\.php
contact\.php

55
contact.html
View file

@ -39,18 +39,17 @@
ga('send', 'pageview'); ga('send', 'pageview');
</script> </script>
</head> <!-- Bootstrap core JavaScript -->
<body>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-3.2.1.js"></script> <script src="js/jquery-3.2.1.js"></script>
<script src="js/popper.js"></script> <script src="js/popper.js"></script>
<script src="bootstrap/js/bootstrap.min.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 --> <!-- Fixed navbar -->
<nav id="topnav" class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <nav id="topnav" class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container"> <div class="container">
@ -81,24 +80,32 @@
<div class="container"> <div class="container">
<div class="jumbotron"> <div class="jumbotron">
<h1>Contact</h1> <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! --> <div id="successAlert" class="alert alert-success" role="alert" style="display: none;">Message sent successfully!</div>
<a id="foxyform_embed_link_892533" href="http://www.foxyform.com/">foxyform</a> <div id="errorAlert" class="alert alert-danger" role="alert" style="display: none"></div>
<script type="text/javascript">
(function(d, t){ <form id="contactForm">
var g = d.createElement(t), <div class="form-group">
s = d.getElementsByTagName(t)[0]; <label for="nameField">Name<span class="required">*</span></label>
g.src = "http://www.foxyform.com/js.php?id=892533&sec_hash=5fb57dab4a2&width=350px"; <input id="nameField" type="text" required="required" class="form-control">
s.parentNode.insertBefore(g, s); </div>
}(document, "script")); <div class="form-group">
</script> <label for="emailField">Email Address<span class="required">*</span></label>
<!-- Do not change the code! --> <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>
</div> </div>

9
css/main.css
View file

@ -30,11 +30,10 @@ li.col-md-6 {
height: 100%; height: 100%;
} }
iframe { .required {
width: 100%; color: red;
min-width: 325px;
} }
#foxyform_embed_link_892533 { .invalid-captcha {
width: auto !important; box-shadow: 0 0 1.5px 1px red;
} }

65
js/contact.js Normal file
View 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);
}