How to Create a CAPTCHA-enabled Custom Google Drive Form

On
Form response destination box in Google driveContact forms are found on almost every website and blog. Generally, website owners either use a dedicated plugin for the same or rely on an external form processing service to get things done. Today, we're going to learn about using Google drive forms that are free-to-use without any kind of limitations. But, the default form setup may not give you the required attributes and features you may be looking for. The following tutorial will help you add necessary bells and whistles to the default Google drive form. Working knowledge of HTML and CSS is required to implement this custom solution. You can also create multi-page contact forms very easily through Google drive which are very useful for hosting surveys. So let's create a custom Google drive form customized to your needs with lots of useful options.

The custom web-form we're going to create through this tutorial will have the following features.

  • Custom look 'n' feel for the entire form.
  • Automated data submission to a Google drive spreadsheet.
  • Automated instant form submission notification through an email.
  • Robust field validation system to restrict incorrect entries.
  • Simple yet effective CAPTCHA system to combat spam submissions.

Create a Default Google Drive Form

Start with a blank form and change it adding the relevant fields required in your form. You can easily start with a blank form in your Google Drive account by going to the red button on the top left: CREATE → Form.

Form creation menu option in Google drive Addition of fields and options within the form is fairly easy through a drag 'n' drop interface. You can give appropriate headings and labels to each field to complete the form.

Once the form design is complete, deselect the checkbox 'Show link to submit another response'. Give a proper name and description to the form so that you can easily recognize and edit it at a later stage if required.

Now click 'Choose response destination' to specify the Google drive spreadsheet that will host the submission data automatically. In simple words, whenever a visitor will submit the form, the data will be automatically saved in this spreadsheet within your Google drive account.

Form response destination box in Google drive Select the 'New spreadsheet' option and give a relevant name to the spreadsheet. This will ensure the automatic creation of spreadsheet if it does not exist. In case, a spreadsheet with that name already exists, the data will be stored in a new blank row within it, each time a visitor submits the contact form.

Now go back to your Google drive account and open the newly created spreadsheet created automatically by the drive service.

Google drive spreadsheet notification rules option Go to 'Tools → Notification rules...' to configure the automatic email notification every time a visitor submits the form.

Notification rules dialogue box in Google drive As you can see in the image above, a notification email will be triggered instantly for your Gmail inbox whenever a visitor will submit the form.

So, till now, following things have been configured:

  • A Google drive form with relevant fields.
  • Automatic data saving in a Google drive spreadsheet.
  • Automatic email notification on form submission.
Let's move on to the next step of correctly embedding it and stylizing it with custom CSS.

Embed and Stylize Your Google Drive Form

With default look 'n' feel, a typical Google drive form may not gel with a website or blog theme and it also includes extra links that need to be removed. So, first, we have to carefully embed this form in such a way such that all the unnecessary links within the form are stripped and it inherits your website's default look 'n' fool.

This will also facilitate further styling of the form through custom CSS code. Now, if you take the default form embedding code provided by Google for inserting it in your website, you won't get the flexibility to customize it as per your preference.

So, instead of taking the default embedding code, first click the 'View live form' button to open it in a new tab within the browser. Once the form is opened completely in the new tab, right-click on the page and select the 'View Page Source' option from the context menu. This will open the HTML source code of the contact form page in a separate window.

Now find the <form action... and </form> tags within the HTML source code. Now copy the entire code starting from the beginning <form> up to ending </form> tag.

<form action="https://docs.google.com/forms/d/xxxxxxx-form-key-code/formResponse" method="POST" id="ss-form" target="_self" onsubmit="">
[Additional form code between both opening and closing tags....]
</form>
Paste the selected code within the web page in HTML mode where you want the form to appear. Now you have the HTML code for all the labels, fields and buttons included within your contact form. This way you can easily reference each one of them in your CSS code to style them as per your needs.

For demo purpose, let me show you an example. I'm assuming you possess a working knowledge of HTML & CSS. Let's suppose you want to customize one of the input text field associated with an entry. A typical code for such entries within the form code will be as shown below.

<input type="text" name="entry.484093565" value="" class="ss-q-short" id="entry_484093565" dir="auto" aria-required="true">
To customize this text input field with your own CSS, you have to use its 'id' attribute. In our example given above, the value for 'id' is entry_484093565 which is surrounded by double quotes. So, to apply your custom CSS in this field, you can reference it as follows.

input#entry_484093565 { 
    width: 200px;
    margin-bottom: 15px;
    background-color: #dddddd;
    font-family: Georgia, serif;
}
This is just a sample CSS code to demonstrate how you can customize and target each form field with CSS code. You can use your own CSS customization code that matches with your website or blog theme. The value of attribute 'id' will be different in your form code. You simply have to copy that value in your CSS section to target the respective input field.

Configure Redirection to 'Thank You' Page

Normally, whenever a contact form is submitted by the visitor, we want him to redirect to a custom confirmation page to provide him thanks or custom message. By default, Google drive form doesn't provide this facility. To enable this functionality, we have to do two things.

The first step is fairly easy and involves a custom page with your message that you want to show the visitor after he submits the form. Once, your page is ready, move on to the next step of enabling automatic redirection to the custom page on form submission.

To enable that, simply replace the initial <form> tag code with a custom code given below. Replace...

<form action="https://docs.google.com/forms/d/xxxxxxx-form-key-code/formResponse" method="POST" id="ss-form" target="_self" onsubmit="">
with the following code...

<script type="text/javascript">
var submitted=false;
</script>
<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='URL-OF-CUSTOM-THANK-YOU-PAGE-HERE';}">
</iframe>
<form action="https://docs.google.com/forms/d/xxxxxxx-form-key-code/formResponse" method="POST" id="ss-form" target="hidden_iframe" onsubmit="submitted=true;">
After replacing the code, do not forget to insert the URL of your custom thank you page in the highlighted part of the code shown above. This way, whenever a visitor will submit the form, he will be automatically redirected to that page instantly.

Now that stylizing of the form and redirection towards a custom page has been completed, let's move to the next step of further customizing it with more useful features.

Apply Data Validation Logic for Input Fields

The next important feature, we're going to integrate into the form is custom data validation conditions to ensure correct entries by the visitor. For example, if a visitor is entering a value in a mandatory email input field, you can enforce validations for two things. First, the field cannot be left empty and second, one must provide a proper email address instead of punching in simple text.

We'll use a simple field validation solution that can be used on any website or blog no matter what kind of CMS is being used. Here's a powerful and easy-to-use JavaScript library called LiveValidation that can be used for client-side form validations.

You can use it in two simple steps. The first step involves including the library JavaScript file in your header. The second step involves, calling the relevant validation functions within your form code. Let's see how to do that.

To include the library file, upload it to your server and use the following code just before the closing </head> tag.

<script src='http://YOUR-SERVER-ADDRESS/livevalidation_standalone.compressed.js' type='text/javascript'></script>
Thereafter, you can start using the functions available in this powerful library. For demo purpose, let's consider two input text fields in the form that accepts name and email of the visitor. Let's see how we can apply data validation logic in both these fields. Let's further assume that both these fields are mandatory. This condition automatically requires that none of these fields should be empty.

So here's the sample field validation code that can be used for both the fields.

/* Demo name input field and corresponding validation JavaScript code right below it */
<input type="text" name="entry.652492996" value="" id="entry_652492996">
<script type="text/javascript">
var entry_652492996 = new LiveValidation('entry_652492996', { validMessage: "Thank you!", wait: 2000 });
entry_652492996.add( Validate.Presence );
</script>

/* Demo email input field and corresponding validation JavaScript code right below it */
<input type="text" name="entry.1804595772" value="" id="entry_1804595772"<
<script type="text/javascript">
var entry_1804595772 = new LiveValidation('entry_1804595772', { validMessage: "Thank you!", wait: 2000 });
entry_1804595772.add( Validate.Presence );
entry_1804595772.add( Validate.Email );
</script>
As you can notice in the sample code shown above, for applying data validation logic, you have to write a simple JavaScript snippet right below each input text field tag.

Start with declaring a variable whose name should match with the input field's 'id' attribute. The variable declaration also includes instantiation of a library object with relevant parameters. In the example shown above, I've supplied a custom message whenever a field is populated with valid data and the waiting period of two seconds before the data is checked for validity.

Thereafter, you can easily call add() function with relevant parameters like Validate.Presence and Validate.Email to ensure that input fields are not left blank and a valid email address is supplied in the respective field. You can find the entire list of functions and parameters on the library website that can be used to apply advanced field validation logic for your Google drive form.

Include Simple CAPTCHA to Prevent Spam Submissions

And, last but not least is a simple captcha that can help you prevent spam submissions. Remember, client-side captcha solutions are not a silver bullet and the example shown here is just for demo purpose to get you started. You can explore and can include a more powerful captcha to bulletproof your Google drive form from spambots.

The captcha is shown below randomly generates a number and asks the visitor to enter that number within the input field. If the number matches with the dynamically generated random number, form submission is allowed else visitor gets a pop-up message to enter the correct number again.

It requires two steps. First, you need to copy paste the JavaScript code shown below right above the closing </head> tag.

<script type='text/javascript'>//<![CDATA[
var formID = 'ss-form';
var formKey = 'xxxxxx-form-key-code-xxxxxx';
var labelName = 'ssTestLabel';
var testField = 'ssTestValue';
var submitted = false;

$(document).ready(function() {
 var ssForm = $('#'+formID);

 var randomInt = Math.floor((Math.random()*100)+1);
 $('#'+labelName).text('If you\'re human, type "' + randomInt + '" in the box given below');
  
 ssForm.submit(function(evt){
  if($('#'+testField).val() == randomInt){
   ssForm.attr({'action' : 'https://docs.google.com/forms/d/' + formKey + '/formResponse'});
   return true;
  }else{
   alert('You need to repeat the number "' + randomInt + '"');
    return false;
  }
 });
});
//]]></script>
This script code generates the number randomly and prompts the user to add it to the text input field. It also checks and validates the input to allow or disallow form submission. After pasting this script, you have to provide the form key code to the formKey variable. This form key code can be obtained from the opening <form> tag.

Next step is quite simple where you have to simply paste two lines of HTML code right above the submit button code within your Google drive form code. The code is as follows.

<label id="ssTestLabel" for="ssTestValue"></label>
<input type="text" name="ssTestValue" value="" id="ssTestValue" />
This captcha solution has been adapted from David Kutcher's post at Blogger Xpertise. You can also code a variant of this captcha that randomly generates two numbers and asks the user to enter the sum of both.

So that is it. Hope you find this tutorial helpful enough to create your very own custom Google drive form for your website.