Added reCAPTCHA to Formspree and support for Netlify forms

Carmine DiChiara

16.33.2021 5de4e5ea8b77b86e5635a39f6b6f450a8779425c

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
{{ $jquery := resources.Get "js/jquery.js" }}
<script type="text/javascript" src="{{ $jquery.Permalink }}"></script>
 
<div class="contact-form">
  <form id="contact-form" name="Contact Form" class="form-style" method="POST" action="{{ if eq .Site.Params.contactFormType "netlify" }}/{{ else }}{{ .Site.Params.contactFormAction }}{{ end }}"
    {{ with .Site.Params.contactFormReCaptchaSiteKey }} data-netlify-recaptcha="true"{{ end }}
    {{ if eq .Site.Params.contactFormType "netlify" }} data-netlify="true" netlify-honeypot="my-lovely-house"{{ end }}>
    <ul>
      <li>
        <input class="field-style field-full" type="text" name="username" id="username" placeholder="{{ i18n "name" }}" oninvalid="setCustomValidity('{{ i18n "name_error" }}')" oninput="setCustomValidity('')" required>
      </li>
      <li>
        <input class="field-style field-full" type="email" name="email" id="email" placeholder="{{ i18n "email" }}" pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" oninvalid="setCustomValidity('{{ i18n "email_error" }}')" oninput="setCustomValidity('')" required>
      </li>
      <li>
        <textarea class="field-style" name="message" id="message" rows="6" placeholder="{{ i18n "message" }}" oninvalid="setCustomValidity('{{ i18n "message_error" }}')" oninput="setCustomValidity('')" required></textarea>
      </li>
      <li>
        <input class="field-style" id="form-submit" type="submit" value="{{ i18n "send" }}">
      </li>
      <li>
        <div class="form-feedback" id="submit-feedback"></div>
      </li>
      {{ if eq .Site.Params.contactFormType "netlify"}}
        <input name="form-name" value="Contact Form" type="hidden">
        <input class="field-style" name="my-lovely-house" id="my-lovely-house" type="hidden">
      {{ end }}
      {{ with .Site.Params.contactFormReCaptchaSiteKey }}
      <li>
        <div id="g-recaptcha"></div>
      </li>
      {{ end }}
    </ul>
  </form>
</div>
 
<script>
  // Sets feedback message.
  function setFeedback(message = '', ok = true) {
    const feedback = $('#submit-feedback');
 
    feedback.attr('feedback-success', ok);
    feedback.text(message);
  }
 
  // This hanlder takes care of submission post-captcha.
  function onSubmit() {
    // Verify if we have a recaptcha at all before checking.
    if($('.g-recaptcha')[0] != null &&
      grecaptcha.getResponse().length == 0) { 
      setFeedback('{{ i18n "form_captcha_error" }}', false);
    } else {
      // Formspree requires json; ajax will do the conversion.
      const form = $('#contact-form');
      const message = form.serialize();
      const dataType = ('{{ .Site.Params.ContactFormType }}' === 'netlify')
        ? 'application/x-www-form-urlencoded' : 'json';
 
      $.ajax({
          url: form.prop('action'),
          method: 'POST',
          data: message,
          dataType,
          complete: (xhr, status) => {
            // Netlify asks for urlencoded data but sends back HTML. This causes a
            // data type mismatch that Ajax flags as an error ... I believe the solution is to just
            // screen for the false negative in this combined handler.
            // https://stackoverflow.com/questions/16230624/ajax-call-fires-error-event-but-returns-200-ok/16230794
            if (status === 'error' && xhr.status !== 200) {
              setFeedback('{{ i18n "form_error" }}', false);
            } else {
              setFeedback('{{ i18n "form_success" }}');
            }
          },
      });
 
      // Enable button.
      $('#form-submit').prop('disabled', false);
    }
  }
 
  // Initial contact form submit is disabled, and optionally kicks off captcha.
  $('#contact-form').submit((e) => {
    // We're doing the submission to avoid the redirect for free Formspree accounts.
    e.preventDefault();
    setFeedback('');
    // Disable submit button for the time being,
    $('#form-submit').prop('disabled', true);
  
    // Make sure we have a captcha to execute before trying to do so.
    if ($('.g-recaptcha')[0] !== null) {
      grecaptcha.execute();
    } else {
      onSubmit();
    }
  });
</script>
 
{{ with .Site.Params.contactFormReCaptchaSiteKey }}
  <script>
      // Captcha rendered dynamically to deal with some rendering issues with
      // theme and with animation.
      function captchaLoadCallback() {
        grecaptcha.render( 'g-recaptcha', {
          sitekey: '{{ . }}',
          callback: onSubmit,
          size: 'invisible',
          badge: 'bottomright',
          theme: $('html').attr('data-theme'),
        });
      }
  </script>
  <!-- Explicit rendering of recaptcha to deal with data-theme and animation issues -->
  <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=captchaLoadCallback&render=explicit" async defer></script>
{{ end }}