126 reads

Google Forms Customisation and The Irony of reCAPTCHA

by Suksant (Hui) Sae LorJuly 14th, 2020

Too Long; Didn't Read

Google Forms customisation is limited to the header image, theme colour, background colour, font style and font style. Google Forms Customisation can be used as a workaround to avoid bots filling public forms with CAPTCHA. Google's support for Google Forms is not natively support for reCAPTCHA yet (such an irony because Google owns reCAPCHCH) Google has not yet provided a better solution to this problem. The following approach is suggested to use Google Forms' default look and feel to avoid being filled by bots.

Companies Mentioned

featured image - Google Forms Customisation and The Irony of reCAPTCHA

Getting feedback from the audience has always been important to me. Luckily, there are plenty of form services available in the wild such as SurveyMonkey and TypeForm. Anyone can integrate these into their sites quite easily. For a few use cases, I choose Google Forms because 1) I already have an account, 2) It's easy to integrate, 3) The responses can be populated into Google Sheet natively, and 4) I trust Google with (some of) my data. However, the default look and feel don't go well with any non-material design websites.

Google Forms Customisation

Off the shelf, a Google Forms user can configure the theme options. The customisation, however, is limited to the header image, theme colour, background colour, and font style. Until Google provides a better integration, the following approach can be used as a workaround.

<form action="{{url}}">
    <label for="name">Name:</label>
    <input type="text" id="name" name="{{entry.name}}" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="{{entry.name}}" required>
    <label for="message">TextArea:</label>
    <textarea id="message" name="{{entry.name}}" required></textarea>
    <button type="submit">Submit</button>
</form>

The HTML snippet above should mirror the form created with Google Forms. To get the

{{url}}

and the

{{entry.name}}

for each field, inspect the form's HTML elements. Replace

{{url}}

with a path to formResponse.

This should look like

https://docs.google.com/forms/.../formResponse

. For each field, the

{{entry.name}}

can be found by inspecting each input element in the form. For most cases, the element name follows the convention of

entry.<number>

except for the required email address, which has a name of

emailAddress

With this in place, how beautiful you want the form to be is up to your imagination (and CSS skills). Keep in mind that not all HTML elements are supported and should Google update how the service is exposed, this approach may no longer work.

Here Comes the Bots

With or without the customisation, using Google Forms has one huge problem. Any public forms can end up being filled by bots as reCAPTCHA is not natively support yet (such an irony because Google owns reCAPTCHA).

Photo by iMattSmart on Unsplash

To overcome this challenge, there are a few options. For example, you can create a Google Apps Script and install it as an add-on to simulate a CAPTCHA using an input field. You can also integrate reCAPTCHA into your server code and restrict the form to accept responses only from a specific account. Unfortunately, I do not wish to run a server for this (yet). At present, I do not see a simple approach that completely prevents bots from spamming public forms that accept responses from anonymous users.

Into the Future

Out of curiosity, I enquired the support team about the reCAPTCHA logo at the bottom of the forms created using Google Forms. The response was:

...reCaptcha logo is just a logo for the new forms...

I believe that either the reCAPTCHA is running in the background for new forms or its support for Google Forms is coming soon. If it is the latter, I hope it will also allow users to inject their HTML snippet or else we will be back at square one.

Update #1 [10/06/20]: I reached out to the support team again as my new form does not have the reCAPTCHA logo. Therefore, the initial response is no longer valid. The agent apprised that the logo should not appear again but will get back to me in the next 24 hours with more information.

Update #2 [11/06/20]: Below is the response I received this morning.