Skip to content

Recaptcha

Google's Recaptcha v3 has been implemented on several forms on the site. E.g https://www.tate.org.uk/schools/newsletter/signup

It's been set-up to so that using Recaptcha in a similar fashion on any new form, should be straightforward.

Broadly speaking the implementation works as follows

  • The Recatptcha js script is fetched in the page featuring the form.
  • The script fetch request includes our Recaptcha account site key and a callback that runs when the script is loaded
  • The callback adds a token to the form's 'input' values prior to submission
  • Once submitted, the token can used in the form processing logic to request a score from Recaptcha (via their API)
  • The score indicating perceived likelihood of the form user being a bot, is received.
  • It's important to note that the score can be acted on or not - in this 'invisible' mode, Recaptcha itself doesn't block form submission in any way. Acting on the score received is the responsibility of the author of the form processing logic

Re-using the current set-up

  • The newsletter signup in the footer uses Recaptcha. It's rendered by tate-wagtail/frontend/templates/base.html and is therefore used by almost every page on the site
  • The fetch request and callback, grecOnloadCallback, are therefore towards the end of tate-wagtail/frontend/templates/base.html
  • If the page of any new form that requires Recaptcha also includes the footer newsletter signup, the base page fetch/callback can be safely relied upon for use on the new form also. In other wordds, the set-up can be re-used.
  • To ensure a form uses Recaptcha, simply add an object to recaptchaForms in tate-wagtail/frontend/templates/base.html - as directed by the comment above it
  • The value used for 'tokenInputId' in the object will be the name of the value received in the form submission POST data.
  • In the form processing logic, tate.utils.recaptcha.get_evaluation() can be used to send the value (i.e the token) to the API to get a score - which can be acted on accordingly

Implementing Recaptcha on a form page that does not use base.html

  • A quick way would be to add the fetch/callback from base.html to the new form's template, ensuring recaptcha_site_key is available in the template context, then handle the token as above