Setting up contact form with reCAPTCHA

[Monklite]

Hello,

I am setting up getform.io with this which is possible per the documentation; however, I would like to know the best way to implement reCAPTCHA. There is documentation on this but it involves modifying HTML for the website, so I would like to know the best practice for implementing that into this template.

@razonyang Any insight? Thanks again for all you do, this template is stellar.

[razonyang]

Currently, you'll need to customize the layout by creating the layouts/contact.html layouts/_default/contact.html to your project root.
I'll improve this by adding new hooks in next release.

[Monklite]

Currently, you'll need to customize the layout by creating the layouts/contact.html to your project root. I'll improve this by adding new hooks in next release.

So just copy it from the default folder and paste it to the layouts directory root, then modify it as described in the getform.io docs?

[razonyang]

Yes, but there is a typo of my answer, it should be layouts/_default/contact.html.

[Monklite]

Yes, but there is a typo of my answer, it should be layouts/_default/contact.html.

Project root in this case being layouts/ right? Or do you literally mean the root of the whole project where the content directory is?

[razonyang]

Yes, but there is a typo of my answer, it should be layouts/_default/contact.html.

Project root in this case being layouts/ right? Or do you literally mean the root of the whole project where the content directory is?

The project root is the Hugo site root, the parent folder of layouts, static and content. According to the Hugo Look Up Order, if you want to replace the default layouts or partials, just creating it to your site root with the same path/filename.

[razonyang]

Implemented by #564, but those changes won't be merged into master branch too soon #547 .

[Monklite]

Implemented by #564, but those changes won't be merged into master branch too soon #547 .

How is this handled in the starter template? I'm not finding a layouts directory anywhere. I'm trying to implement it into my build based on the commits in this PR.

[razonyang]

Hi, You'll need to create the layouts directory yourself.

All those files are relative to site root, that is, your starter template root.

1. Create the layouts/_default/contact.html:

{{ define "content" }}
<div class="col-lg-8">
    {{- partial "breadcrumb" . -}}
    <div class="contact row component card">
      <div class="card-header">
        <h1 class="card-title">{{ .Title }}</h1>
      </div>
      <div class="card-body">
            <form class="needs-validation" name="contact" method="POST" enctype="multipart/form-data" 
              {{ with $.Site.Params.contact.endpoint }}{{ printf "action=%q" . | safeHTMLAttr }}{{ else }}data-netlify="true"{{ end }} novalidate>
                <div class="mb-3">
                  <label for="contactName" class="form-label">{{ "contact_name" | i18n }}</label>
                  <input name="name" class="form-control" id="contactName" required>
                </div>
                <div class="mb-3">
                  <label for="contactEmail" class="form-label">{{ "contact_email" | i18n }}</label>
                  <input type="email" name="email" class="form-control" id="contactEmail" aria-describedby="emailHelp" required>
                  <div id="emailHelp" class="form-text">{{ "contact_email_help" | i18n }}</div>
                </div>
                <div class="mb-3">
                  <label for="contactSubject" class="form-label">{{ "contact_subject" | i18n }}</label>
                  <input class="form-control" name="subject" id="contactSubject" required>
                </div>
                <div class="mb-3">
                  <label for="contactMessage" class="form-label">{{ "contact_message" | i18n }}</label>
                  <textarea class="form-control" name="message" id="contactMessage"></textarea>
                </div>
                {{- if $.Site.Params.contact.file -}}
                {{- $fileField := default "file" $.Site.Params.contact.fileField -}}
                <div class="mb-3">
                  <label for="file" class="form-label">{{ "contact_file" | i18n }}</label>
                  <input class="form-control" type="file" id="{{ $fileField }}" name="{{ $fileField }}">
                </div>
                {{- end -}}
                {{- partial "contact/recaptcha" . -}}
                <button type="submit" class="btn btn-outline-primary">{{ "button_submit" | i18n }}</button>
              </form>
        </div>
    </div>
</div>
{{- partial "sidebar" . -}}
{{ end }}

2. Create the layouts/partials/contact/recaptcha.html:

{{- with $.Site.Params.contact.reCaptcha -}}
<div class="mb-3">
    <label for="g-recaptcha-response" id="reCaptchaLabel" class="form-label text-danger">reCAPTCHA</label>
    <div class="g-recaptcha" data-sitekey="{{ .siteKey }}" data-callback="reCaptchaCallback"
        data-expired-callback="reCaptchaExpiredCallback"></div>
</div>
<script text="javascript">
    var reCaptchaLabel = document.querySelector('#reCaptchaLabel');
    var reCaptchaOnload = function () {
        document.querySelector('#g-recaptcha-response').setAttribute("required", true);
    }
    var reCaptchaCallback = function() {
        reCaptchaLabel.classList.remove('text-danger');
        reCaptchaLabel.classList.add('text-success');
    }

    var reCaptchaExpiredCallback = function() {
        reCaptchaLabel.classList.remove('text-success');
        reCaptchaLabel.classList.add('text-danger');
    }
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=reCaptchaOnload"></script>
{{- end -}}

3. And then add the contact.reCaptcha.siteKey parameter(params.toml):

[contact]
  # ...
  [contact.reCaptcha]
    siteKey = "YOUR RECAPTCHA SITE KEY"

4. Configure reCaptcha secret on your backend(https://docs.getform.io/features/spam-filtering/recaptcha-v2/).

[Monklite]

Hi, You'll need to create the layouts directory yourself.

All those files are relative to site root, that is, your starter template root.

1. Create the `layouts/_default/contact.html`:

{{ define "content" }}
<div class="col-lg-8">
    {{- partial "breadcrumb" . -}}
    <div class="contact row component card">
      <div class="card-header">
        <h1 class="card-title">{{ .Title }}</h1>
      </div>
      <div class="card-body">
            <form class="needs-validation" name="contact" method="POST" enctype="multipart/form-data" 
              {{ with $.Site.Params.contact.endpoint }}{{ printf "action=%q" . | safeHTMLAttr }}{{ else }}data-netlify="true"{{ end }} novalidate>
                <div class="mb-3">
                  <label for="contactName" class="form-label">{{ "contact_name" | i18n }}</label>
                  <input name="name" class="form-control" id="contactName" required>
                </div>
                <div class="mb-3">
                  <label for="contactEmail" class="form-label">{{ "contact_email" | i18n }}</label>
                  <input type="email" name="email" class="form-control" id="contactEmail" aria-describedby="emailHelp" required>
                  <div id="emailHelp" class="form-text">{{ "contact_email_help" | i18n }}</div>
                </div>
                <div class="mb-3">
                  <label for="contactSubject" class="form-label">{{ "contact_subject" | i18n }}</label>
                  <input class="form-control" name="subject" id="contactSubject" required>
                </div>
                <div class="mb-3">
                  <label for="contactMessage" class="form-label">{{ "contact_message" | i18n }}</label>
                  <textarea class="form-control" name="message" id="contactMessage"></textarea>
                </div>
                {{- if $.Site.Params.contact.file -}}
                {{- $fileField := default "file" $.Site.Params.contact.fileField -}}
                <div class="mb-3">
                  <label for="file" class="form-label">{{ "contact_file" | i18n }}</label>
                  <input class="form-control" type="file" id="{{ $fileField }}" name="{{ $fileField }}">
                </div>
                {{- end -}}
                {{- partial "contact/recaptcha" . -}}
                <button type="submit" class="btn btn-outline-primary">{{ "button_submit" | i18n }}</button>
              </form>
        </div>
    </div>
</div>
{{- partial "sidebar" . -}}
{{ end }}

2. Create the `layouts/partials/contact/recaptcha.html`:

{{- with $.Site.Params.contact.reCaptcha -}}
<div class="mb-3">
    <label for="g-recaptcha-response" id="reCaptchaLabel" class="form-label text-danger">reCAPTCHA</label>
    <div class="g-recaptcha" data-sitekey="{{ .siteKey }}" data-callback="reCaptchaCallback"
        data-expired-callback="reCaptchaExpiredCallback"></div>
</div>
<script text="javascript">
    var reCaptchaLabel = document.querySelector('#reCaptchaLabel');
    var reCaptchaOnload = function () {
        document.querySelector('#g-recaptcha-response').setAttribute("required", true);
    }
    var reCaptchaCallback = function() {
        reCaptchaLabel.classList.remove('text-danger');
        reCaptchaLabel.classList.add('text-success');
    }

    var reCaptchaExpiredCallback = function() {
        reCaptchaLabel.classList.remove('text-success');
        reCaptchaLabel.classList.add('text-danger');
    }
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=reCaptchaOnload"></script>
{{- end -}}

3. And then add the `contact.reCaptcha.siteKey` parameter(`params.toml`):

[contact]
  # ...
  [contact.reCaptcha]
    siteKey = "YOUR RECAPTCHA SITE KEY"

4. Configure reCaptcha secret on your backend(https://docs.getform.io/features/spam-filtering/recaptcha-v2/).

It works! Much appreciated.

[razonyang]

@Monklite You're welcome.