Getting feedback from the audience has always been important to me. Luckily, there are plenty of form services available in the wild such as and . Anyone can integrate these into their sites quite easily. For a few use cases, I choose 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- websites. SurveyMonkey TypeForm Google Forms material design 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. Name: Email: TextArea: Submit < = > form action "{{url}}" < = > label for "name" </ > label < = = = > input type "text" id "name" name "{{entry.name}}" required < = > label for "email" </ > label < = = = > input type "email" id "email" name "{{entry.name}}" required < = > label for "message" </ > label < = = > textarea id "message" name "{{entry.name}}" required </ > textarea < = > button type "submit" </ > button </ > form The HTML snippet above should mirror the form created with Google Forms. To get the and the for each field, inspect the form's HTML elements. Replace with a path to formResponse. {{url}} {{entry.name}} {{url}} This should look like . For each field, the can be found by inspecting each input element in the form. For most cases, the element name follows the convention of except for the required email address, which has a name of . https://docs.google.com/forms/.../formResponse {{entry.name}} entry.<number> 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 is not natively support yet (such an irony because Google owns reCAPTCHA). 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. 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 #1 [10/06/20]: Below is the response I received this morning. Update #2 [11/06/20]: ...the reCaptcha should no longer be available in Google Forms... Developers can still implement reCAPTCHA if they want. are also a good choice for hobbyists. Heroku's free dynos Previously published at https://www.suksant.com/forms-customisation-and-recaptcha/

Google

Heroku

How to Define Data Analytics Capabilities

Debezium Introduction: Another Change Data Capture Tool

suksant.com

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Google Forms Customisation and The Irony of reCAPTCHA

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Data Analytics is a Journey

3 eCommerce Tech Trends to Keep an Eye On

Customize Your VS Code Icon

How to Choose a WordPress Theme for Your Website

How to Choose the Best CMS Architecture for Your Business

Data Analytics is a Journey

3 eCommerce Tech Trends to Keep an Eye On

Customize Your VS Code Icon

How to Choose a WordPress Theme for Your Website

How to Choose the Best CMS Architecture for Your Business

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps