Basic Contact Form With reCAPTCHA

The following form is based on the Basic Contact Form - V.1 example, note that the code used does not use a chunk for the form.

If you prefer to use a chunk for the form, make sure you remember to add the "&parseDocumentSource" parameter to the Formlister call, as can be seen here.

Rendered form

As can be seen in the image, the Localhost Google keys were used for this tutorial.

reCAPTCHA API Script Call

Probably the most important piece of code that is forgotten is the api call, without the reCAPTCHA api the field won't work.

So we need to call the api javascript file from Google, the call can be added anywhere in your page template.

The file call can be added in the Formlister call (in the same place as the form), but, we suggest you add it to the page template where all your other javascript files are called.

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

If you want to be specific about the language you want reCAPTCHA to be displayed in, you can add an extra parameter to the javascript call:

?hl=en

So your call will end up looking something like this:

<script src="https://www.google.com/recaptcha/api.js?hl=en" async defer></script>

If you would like to know what your specific language code is, take a look at the language codes found in the reCAPTCHA documentaion here

Snippet call

[!FormLister?
&formid=`ContactForm`
&to=`name@domain.com`
&config=`default:core`
&isHtml=`0`
&protectSubmit=`1`
&rules=`{
"name":{
    "required":"Please enter your full name"
},
"email":{
    "required":"Please enter your email",
    "email":"Please enter a valid email"
},
"phone":{
    "required":"Please enter your phone number",
    "phone":"Please enter a valid phone number",
    "minLength":{
        "params":5,
        "message":"Please enter a valid phone number"
    }
},
"subject":{
    "required":"Please enter your subject"
},
"message":{
    "required":"Please enter your message",
    "minLength":{
        "params":100,
        "message":"Your message must have at least 100 characters"
    }
}
}`
&allowedFields=`name,email,phone,subject,message`
&messagesTpl=`@CODE:<div><ul>[+required+][+errors+][+messages+]</ul></div>`
&messagesOuterTpl=`@CODE:<li>[+messages+]</li>`
&messagesRequiredOuterTpl=`@CODE:<li>[+messages+]</li>`
&messagesErrorOuterTpl=`@CODE:<li>[+messages+]</li>`
&messagesSplitter=`</li><li>`
&messagesRequiredSplitter=`</li><li>`
&messagesErrorSplitter=`</li><li>`
&errorClass=`error`
&requiredClass=`required`
&captcha=`reCaptcha`
&captchaParams=`{
	"siteKey":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "secretKey":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "errorCodeFailed":"A reCAPTCHA validation error occured",
    "theme":"light"
}`
&captchaField=`g-recaptcha-response`
&formTpl=`@CODE:
[+form.messages+]
<form action="[~[*id*]~]" method="post">
  <input type="hidden" name="formid" value="ContactForm">
  <!-- Name -->
  <div class="[+name.errorClass+][+name.requiredClass+]">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" placeholder="Name" value="[+name.value+]">
  </div>
  <!-- Email -->
  <div class="[+email.errorClass+][+email.requiredClass+]">
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="Email" value="[+email.value+]">
  </div>
  <!-- Phone Number -->
  <div class="[+phone.errorClass+][+phone.requiredClass+]">
    <label for="phone">Phone</label>
    <input type="tel" name="phone" id="phone" placeholder="Only Enter Digits" value="[+phone.value+]">
  </div>
  <!-- Subject -->
  <div class="[+subject.errorClass+][+subject.requiredClass+]">
    <label for="subject">Subject</label>
    <input type="text" name="subject" id="subject" placeholder="Subject" value="[+subject.value+]">
  </div>
  <!-- Message -->
  <div class="[+message.errorClass+][+message.requiredClass+]">
    <label for="message">Message</label>
    <textarea rows="10" name="message" id="message" placeholder="Type your message here">[+message.value+]</textarea>
  </div>
  <!-- reCAPTCHA -->
  [+captcha+]
  <!-- Submit Button -->
  <button type="submit">Submit</button>
</form>`
&successTpl=`@CODE:<div>Thank you, we will get back to you ASAP.</div>`
&reportTpl=`ContactFormReport`
!]

Additional reCAPTCHA Parameters

The following code shows you what has been added to the Formlister call to make reCAPTCHA work, it is broken down into its specific elements:

Code added to the Formlister call

&captcha=`reCaptcha`
&captchaParams=`{
	"siteKey":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "secretKey":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "errorCodeFailed":"A reCAPTCHA validation error occured",
    "theme":"light"
}`
&captchaField=`g-recaptcha-response`

You must obviously replace the "X's" used in this examples "siteKey" and "secretKey" with your keys.

Please read the documentation found here for more information about the parameters used in this example

Code added to the Form

<!-- reCAPTCHA -->
[+captcha+]

Testing on Localhost

If you wish to test your form on your localhost setup, you must either add localhost to your list of domains in your Google reCAPTCHA account, or you can use the following keys.

"siteKey":"6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI",
"secretKey":"6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe",

For more information about using reCAPTCHA on your local machine please read the official documentation found here and here.

Suggest an edit to this page.