@@ -81,24 +80,32 @@
Contact
-
- Be aware that the information entered here goes through a
- third party (foxyform).
- Once you send a message through this form, we can
- communicate directly over email.
-
-
-
foxyform
-
-
+
Message sent successfully!
+
+
+
diff --git a/css/main.css b/css/main.css
index 239b15c..25499dd 100644
--- a/css/main.css
+++ b/css/main.css
@@ -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;
}
diff --git a/js/contact.js b/js/contact.js
new file mode 100644
index 0000000..9666478
--- /dev/null
+++ b/js/contact.js
@@ -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);
+}