Removed jQuery from contact form, minor styling adjustments

layouts/partials/contact.html

@@ -2,7 +2,7 @@
 <section class="contact" id="contact">
  <div class="container">
 
- <div class="row center-xs">
+ <div class="row">
  <div class="col-xs-12">
  <h1>Let's Chat</h1>
  </div>
@@ -16,8 +16,10 @@ <h1>Let's Chat</h1>
  <div class="col-xs-12"><textarea name="message" placeholder="Message" required></textarea></div>
  <input type="text" name="_gotcha" style="display:none">
  <input type="hidden" name="_next" value="/">
- <div class="col-xs-6" id="form-submit"><input type="submit" value="Send"></div>
- <div class="col-xs-12" id="form-thankyou" style="display:none;">Thanks for your email!</div>
+ <div class="col-xs-12 contact-submit">
+ <input id="form-submit" type="submit" value="Send">
+ <span id="form-thankyou" style="visibility:hidden">Thanks for your email!</span>
+ </div>
  </div>
  </form>
 

static/scripts/src/contact.js

@@ -20,33 +20,44 @@ $('#form-contact').addEventListener('submit', function(e) {
  // Send to Formspree
  request.open('POST', 'https://formspree.io/{{ .Site.Params.email }}', true);
  request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
- request.send(JSON.stringify(data));
+ // Call function when the state changes
+ request.onreadystatechange = function() {
+ if (request.readyState == 4 && request.status == 200) {
+
+ // Reset form
+ $('#form-contact').reset();
+
+ var submit = $('#form-submit');
+ var thanks = $('#form-thankyou');
+
+ function thankYouFadeIn() {
+ // Fade out submit button
+ submit.style.visibility = 'hidden';
+ submit.classList.add('hide');
+ submit.classList.remove('show');
 
+ // Fade in thank you message
+ thanks.style.visibility = 'visible';
+ thanks.classList.add('show');
+ thanks.classList.remove('hide');
+ setTimeout(thankYouFadeOut, 6000);
+ };
 
- // $.ajax({
- // url:"https://formspree.io/{{ .Site.Params.email }}",
- // method:"POST",
- // data:{
- // name:name,
- // _replyto:email,
- // email:email,
- // _subject:subject,
- // message:message,
- // },
- // dataType:"json",
- // success:function() {
- // console.log("Form successfully sent");
- // // Reset form
- // $("#form-contact").get(0).reset();
- // // Fade out submit button, fade in thank you message, then fade out message and fade in submit button
- // $("#form-submit").fadeOut(function(){
- // $("#form-thankyou").fadeIn(function(){
- // $("#form-thankyou").delay(4000).fadeOut(function(){
- // $("#form-submit").fadeIn();
- // });
- // });
- // });
- // }
- // });
+ function thankYouFadeOut() {
+ // Fade out thank you message
+ thanks.style.visibility = 'hidden';
+ thanks.classList.add('hide');
+ thanks.classList.remove('show');
 
+ // Fade in submit button
+ submit.style.visibility = 'visible';
+ submit.classList.add('show');
+ submit.classList.remove('hide');
+ };
+
+ thankYouFadeIn();
+ }
+ }
+
+ request.send(JSON.stringify(data));
 });

static/styles/scss/_base.scss

@@ -153,5 +153,5 @@ ul li {
 
 
 // Show or hide elements
-.show { transition: opacity 400ms; }
+.show { transition: opacity 600ms; }
 .hide { opacity: 0; }

static/styles/scss/main.scss

@@ -34,6 +34,7 @@
  from, to { color: transparent; }
  50% { color: $black; }
 }
+
 nav {
  height: $vertical-rhythm * 2;
  width: 100%;
@@ -262,18 +263,34 @@ h1, h2, h3 {
  font-family: $font-body;
  }
 }
+
 .contact {
  width: 100%;
  background-color: $smoke;
  padding-bottom: $vertical-rhythm * 2;
+
  form {
  margin-top: $vertical-rhythm;
  }
+
+ .contact-submit {
+ position: relative;
+ }
+
+ #form-submit {
+ display: block;
+ margin: 0 auto;
+ width: 50%;
+ }
+
  #form-thankyou {
- margin: 8px 0;
- padding: 11px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
  }
 }
+
 input {
  background-color: #FFF;
  border-color: $smoke;