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.

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.

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).

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.

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:

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.

Developers can still implement reCAPTCHA if they want. Heroku's free dynos are also a good choice for hobbyists.