Add edgecase handling to contact formdev

2 files changed, 38 insertions, 14 deletions

diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html
index 3a7f724..bd04407 100644
--- a/layouts/partials/contact.html
+++ b/layouts/partials/contact.html
@@ -19,22 +19,32 @@
       {{ with .Site.Params.contact.success }}
         {{ . | markdownify }}
       {{ else }}
-        "Thank you for contacting us."
+        Thank you for contacting us.
       {{ end }}
     </div>
     <div class="text-danger" id="error" style="display:none;">
       {{ if .Site.Params.contact.error }}
         {{ .Site.Params.contact.error | markdownify }}
       {{ else }}
-        "Message could not be send. Please contact us at " {{ .Site.Params.contact.email }}
+        Message could not be send. Please contact us at  {{ .Site.Params.contact.email }}.
       {{ end }}
     </div>
     <ul class="actions">
-      <li><button type="submit"
-        {{ if .Site.Params.contact.postURL }} 
-          {{ with .Site.Params.contact.captcha }} class="g-recaptcha"
-data-sitekey="{{ .sitekey }}" data-callback="onSubmit" data-badge="inline" {{ end }}
-        {{ end }}>{{ .Site.Params.contact.buttonText }}</button></li>
+      <noscript>
+        <div class="text-danger" id="js-error">
+          Message can not be send with javascript disabled. Please contact us at {{ .Site.Params.contact.email }}.
+        </div>
+      </noscript>
+      {{ if .Site.Params.contact.postURL }}
+        {{ with .Site.Params.contact.captcha }}
+          <div class="text-danger" id="val-error" style="display:none;">
+            There was an error with your validation. Please contact us at {{ $.Site.Params.contact.email }}.
+          </div>
+          <li><button type="submit" disabled="disabled" class="g-recaptcha" data-sitekey="{{ .sitekey }}" data-callback="onSubmit" data-badge="inline">{{ $.Site.Params.contact.buttonText }}</button></li>
+        {{ else }}
+          <li><button type="submit" disabled="disabled">{{ .Site.Params.contact.buttonText }}</button></li>
+        {{ end }}
+      {{ end }}
     </ul>
     {{ range .Site.Params.contact.fields.hidden }}
       {{ if eq .name "site" }}
diff --git a/static/assets/js/contact.js b/static/assets/js/contact.js
index cb2d3ad..61a5aad 100644
--- a/static/assets/js/contact.js
+++ b/static/assets/js/contact.js
@@ -12,10 +12,28 @@ $('form[id=contactForm]').change(function() {
   });
 });
 
-// Async contact form
-$('form[id=contactForm]').submit(function(){
-  $('form[id=contactForm] #success').hide();
+function clear() {
   $('form[id=contactForm] #error').hide();
+  $('form[id=contactForm] #success').hide();
+  $('form[id=contactForm] #val-error').hide();
+}
+
+// Async contact form
+$('form[id=contactForm]').submit(function(e){
+  e.preventDefault();
+  clear();
+
+  if ($('.g-recaptcha').length) {
+    if (typeof grecaptcha != "undefined") {
+      if (!grecaptcha.getResponse()) {
+        $('form[id=contactForm] #val-error').show();
+        return;
+      }
+    } else {
+      $('form[id=contactForm] #val-error').show();
+      return;
+    }
+  }
 
   // AJAX POST, with contact form data serialized, which expects a JSON response
   // Datatype must be set to 'json' to use formspree.io
@@ -24,13 +42,9 @@ $('form[id=contactForm]').submit(function(){
     }, 'json').fail(function(){
       $('form[id=contactForm] #error').show();
   });
-  return false;
 });
 
 // Callback function for captcha
 function onSubmit(token) {
-  if (!token) {
-     return;
-  }
   $('form[id=contactForm]').submit();
 }