Create A Contact Form With Google Docs?

While creating a client's website (using Blogger, of course), I decided to try using Google Docs to create a comprehensive contact form.

The form was wonderful: with a bit of tweaking, I was able to embed a CSS styled form (rather than use an iframe); validate required fields with jQuery; redirect to a custom "thank you" page, and even have the form submissions emailed directly to the client!

Feeling rather happy with the results, I created a similar contact form for the contact page and was in the process of writing up a tutorial when I realized my inbox was rapidly filling up with spam. Which was unfortunately delivered by my Google Docs-based contact form.

Sadly, I haven't (yet!) been able to find a Blogger-compatible solution to create a Google-based contact form with spam filtering and emailed submissions, so I've reverted back to my previous contact form.

I'm still hopeful that a method to prevent (most) spam submissions is still possible, so I've decided to publish a simple version of my Google Docs form tutorial for anyone who would like to use it.

A BASIC Contact form

To ensure this tutorial is easy to understand, I have simplified the process by creating a very basic contact form with three fields:

1. Name
2. Email Address
3. Message

If you're feeling confident, feel free to apply the same method to a more comprehensive form.

Create your form on Google Docs

Log into Google Docs using your Google Account. Click the "Create" button in the top of the left sidebar, and select "Form" from the drop down list.

You'll be presented with a page like this in which two form fields have already been placed:

Feel free to add a title and description for your form as you prefer. When creating a form, it is accessible as a web version hosted on Google Docs so these fields may be helpful to potential visitors. However, they won't be displayed on our embedded forms unless you choose to add them manually.

For the first form element, use the title "Name". Leave the help text section empty, and the question type as text. Do not make this a required question!

Follow the previous step for the second form field, using "Email" for the title instead.

Finally, add a "Paragraph Text" field from the "Add item" sajian with the title "Message". Again, no help text, not "required".

You should now have a form which looks like this:

Save your form at this point.

Find your "Form Key"

Before you can embed your Google Docs form in a Blogger page, you will need to make a note of your form key. This key is unique to your form; you'll need to paste this key into the code we'll use for our contact page.

Choose to view your published form using the link at the bottom of your form editing page, or by going to Form>Go To Live Form on the spreadsheet view.

The URL for your published form contains the form key as a string near the end, like this:

https://docs.google.com/spreadsheet/viewform?formkey=your-unique-form-key#gid=0

Copy this string to your clipboard and paste into a simple text editor for later use.

Embed a simple contact form in a Blogger page

For the purpose of this tutorial, I'm going to assume you will use the form in a static page. You could just as easily embed this in an HTML/Javascript gadget or a blog post.

Create your contact page (or edit your existing one) and type any introductory text or content you would like to use.

Now switch to the HTML editor for your page and paste the following code:

<span style="font-size: x-small;">* Required Field</span>.<br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript">
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript">
</script>

<script type="text/javascript">
$(document).ready(function() {
 $("#contactForm").validate({meta: "validate"});
});
</script>
<script type="text/javascript">
var submitted=false;
</script>
<iframe id="hidden_iframe" name="hidden_iframe" onload="if(submitted)
{window.location='url-of-thank-you-page';}" style="display: none;"></iframe>

<form action="https://docs.google.com/spreadsheet/formResponse?formkey=your-google-docs-formkey&amp;ifq" id="contactForm" method="POST" onsubmit="submitted=true;" target="hidden_iframe">

<div class="errorbox-good">
<div class="ss-item  ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_0">Name*
</label>
<label class="ss-q-help" for="entry_0"></label>
<input type="text" name="entry.0.single" value="" class="required" title="Create a contact form with Google Docs?" id="entry_0"></div></div></div>
<br> <div class="errorbox-good">
<div class="ss-item  ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_1">Email*
</label>

<label class="ss-q-help" for="entry_1"></label>
<input type="text" name="entry.1.single" value="" id="required" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}"/></div></div></div>
<br> <div class="errorbox-good">
<div class="ss-item  ss-paragraph-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_2">Message*
</label>
<label class="ss-q-help" for="entry_2"></label>
<textarea name="entry.2.single" rows="8" cols="75" class="required" title="Create a contact form with Google Docs?" id="entry_2"></textarea></div></div></div>
<br>
<input type="hidden" name="pageNumber" value="0">
<input type="hidden" name="backupCache" value="">


<div class="ss-item ss-navigate"><div class="ss-form-entry">
<input type="submit" name="submit" value="Submit"></div></div></form>

Before saving your page, you'll need to make two changes to the code.

First, replace your-google-docs-formkey with the form key you copied earlier.

Next, replace url-of-thank-you-page with the URL of a page you would like to send the visitor to once they have successfully submitted a form.

Once you've made these changes, preview and/or save your page. Then you can go ahead and test out your customized, validating Google Docs contact form, which will redirect to a custom confirmation page once submitted.

How the form code works

Here's a full explanation of the code I used for those who wish to take things a step further.

I've included scripts to run the Bassistance jQuery Validation plugin which checks for required fields on the form and validates them. This is achieved by adding the class name "required" to the relevant form fields (it also checks to see if a valid email address has been included).

By adding a "title" to each required field, we can generate an error message when a visitor tries to submit a form without filling in all required fields, or after entering an invalid email address.

Redirection to a custom confirmation page (rather than the default page hosted on Google Docs) is achieved through the following section, which creates an alternative action after submission:

<script type="text/javascript">
var submitted=false;
</script>
<iframe id="hidden_iframe" name="hidden_iframe" onload="if(submitted)
{window.location='url-of-thank-you-page';}" style="display: none;"></iframe>

<form action="https://docs.google.com/spreadsheet/formResponse?formkey=your-google-docs-formkey&amp;ifq" id="contactForm" method="POST" onsubmit="submitted=true;" target="hidden_iframe">

The form code is based on the source provided from the live form generated when we initially create a Google Docs form.

If you would like to create a form using this tutorial with more (or different) form fields, copy the form elements from the source code of your live form on Google Docs and paste in the relevant snippets from the example above.

Thanks to Morning Copy for the excellent instructions for using the Bassistance plugin!

Styling error text on your Google Docs form

When a visitor tries to submit your form without filling in required fields correctly, an error message will appear next to the relevant field.

To ensure these error messages stand out, go to Template>Customize in your Blogger dashboard. From here, go to the Advanced section and paste the following in the Add CSS section:

label.error { display: list-item; color: #cc0000; font-size: 12px; list-style-position: inside; padding: 5px 0 0;}

This displays error messages in red text with bulleted indentation. You can change the color #cc0000 to another hex value if this colour does not complement your template's design.

Be sure to save the change before leaving this page!

Have contact form submissions delivered to your email address

I chose to use the Contact Us Form Emailer script by Steegle to have submissions to my simple contact form delivered to my email address.

To add this function to your simple contact form, open up the spreadsheet for your contact form in Google Docs and select Tools>Script Gallery... from the menu.

In the Public section, search for "Contact Us Form Mailer". The script you need will be at the top of the results and is created by stephen.hind.

Click the Install button for this script and choose to Authorize the script on the pop-up page. Now the script will now show as installed on the list of public scripts, so use the Close button to return to your spreadsheet.

From your spreadsheet menu, go to Tools>Script Editor. In this window, locate the following line:

var recipient = "";

Add your email address between the quotation marks like this:

var recipient = "your-email-address@anymail.com"; 

Then save the script.

While still on the script editing page, go to Triggers>Current Script's Triggers in the menu.  In the Current Script's Triggers box use the No triggers set up. Click here to add one now link.

From the drop-down boxes make sure that contactUsMailer, From spreadsheet and On form submit are selected and save the changes.

You can now close the script editor and test out your form to ensure the email submissions are correctly set up.

That's it! After completing all steps above, you should now have a fully functional Google Docs powered contact form with validation for required fields which sends submissions to your email address.

Final thoughts

As I mentioned at the beginning of this post, I really like the customization and functions of this contact form solution but am unable to use it for due to the sheer amount of spam submissions I received.

Presently I haven't been able to find a method of eliminating spam submissions through the form - I will of course update this tutorial when I do!

In the meantime, feel free to use this tutorial to create a simple contact form for your own Blogger site, just be warned that it's vulnerable to spam!

Email icon by WebDesignerDepot