« Embedding Title & Description Meta Tags In WordPress Posts & Pages  |  Embed Online Video From YouTube To PowerPoint Easily »

Customizing Google Docs Form For Email Validation Using Free jQuery Script

Comments §

If you use Google Docs you can create forms that accept data from visitors and save them automatically in spreadsheets for future reference. You can think of many ways of using Google Docs forms, like for example doing an online survey that can be embedded directly in the emails that you send.

In this video article however we will look at creating a simple ‘contact us’ form where all the fields, especially the email address, are validated using a free jQuery validation plugin, courtesy Jörn Zaefferer of bassistance.de. Further, the form redirects the viewer to a custom thank-you page upon completion of form submission.

The steps followed are taken from the excellent how-to article written by Dillon at the website, Morning Copy. I have attempted an instructional screencast video below based on Dillon’s article. The video is followed by detailed step-by-step instructions to do it.

 

 

Before going to the detailed instructions let us first find out why it is a good idea to use Google Docs for creating the form, and what else can Google Docs do for your needs.

Why Google Docs?

After you create a free account in Google Docs you can easily create presentation, spreadsheet, and form among others (see the following image). One big reason why Google Docs is preferable is that whatever you create there can be easily shared real time with others, allowing them to add/modify what you’ve created.

Form, presentation, spreadsheet with Google Docs

With Google Docs easily create online from, presentation, spreadsheet, more..

 

Whether you’re working alone or in a group, Google Docs facilitates the continuity of your work in a smooth and efficient manner. Since all your information is securely stored online, you and your colleagues can access them anytime anywhere. You not only cut short the time and effort to do a collaborative work, you also do not need to carry any software application with you when on move.

There are many other advantages to use Google Docs. Find out more here.

Steps For Email Validation & Custom Redirect

Here are the detailed steps to create the form in Google Docs and use it with the free jQuery script for email validation. A small snippet of code will ensure that the viewer is taken to a custom redirect page after the form submission. Let’s begin.

  1. Create your Google Docs account, and log into it. If you have a Gmail account, use it to log in. After logging in, click New and choose Form from the drop down menu. Creating your form using the tools Google Docs gives isn’t difficult.

  2. After you complete creating the form, click the link at the bottom of the page that says, You can view the published form here. An example of what it is like can be seen clicking this link:
    http://spreadsheets.google.com/viewform?formkey=dEtZOU55T3VQazhOWnF5RVFqMDk4a1E6MQ

  3. Right-click anywhere on the form, and choose View Page Source to get the page HTML.

  4. Select all the code between the opening (<form>) and the closing </form>) form tags, and paste it in a plain text editor as part of the HTML code of a webpage. Here you can modify the code as required.

  5. In the head section, between <head> & </head>, insert the following code (take care while indicating the paths to the URLs):

    1
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js” type=”text/javascript”></script>

    2
    <script src=”jquery.validate.js” type=”text/javascript”></script>

    3
    <script type=”text/javascript”>
    $(document).ready(function() {
    $(“#GoogleForm”).validate({meta: “validate”});
    });
    </script>

    The first code calls the jQuery library from Google API site, while the second refers to the jQuery code for validation of the form fields. This second code can be downloaded from here. Finally, the third piece of code simply puts the validation code into action.

  6. The custom confirmation redirect to the desired page after form submission is done by the following piece of code. This comes just inside the opening body (<body>) tag. In the example below, my custom redirect page is ‘thankyou.html’.

    <script type=”text/javascript”>var submitted=false;</script>
    <iframe name=”hidden_iframe” id=”hidden_iframe” style=”display:none;” onload=”if(submitted){window.location=’thankyou.html’;}”></iframe>

  7. Ensure that the form action URL is the same as that of its Google spreadsheet. For the sake of validation of the form fields, ensure that the form ID is the same as the one mentioned in the validation script in the head section. The form is put to action by the following code:

    <form action=”http://spreadsheets.google.com/formResponse?formkey=dEtZOU55T3VQazhOWnF5RVFqMDk4a1E6MQ&ifq” method=”post” target=”hidden_iframe” id=”GoogleForm” onsubmit=”submitted=true;”>

  8. Lastly, add styles as you want to the form you’ve just created.

The HTML code used for our Contact Us form is given below. Feel free to use it for your needs.

HTML Code

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Contact 2WebVideo</title>

<meta name="description" content="Fill in the form to contact 2WebVideo.Com" />

<link type="text/css" rel="stylesheet" href="style.css">

<!--JQUERY--> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script> 

<script type="text/javascript">

$(document).ready(function() {
	$("#GoogleForm").validate({meta: "validate"});
});
</script> 

<!--END OF JQUERY-->

</head>

<body>

<!--CONFIRMATION PAGE REDIRECT--> 

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='thankyou.html';}"></iframe> 

<!--END OF CONFIRMATION PAGE REDIRECT-->

<!--GOOGLE FORM STARTS-->

<form action="YOUR-GOOGLE-DOCS-FORM-URL" method="post" target="hidden_iframe" id="GoogleForm" onsubmit="submitted=true;">

<!--Your Name-->

<div class="errorbox-good">
<div class="ss-form-entry"><label for="entry_0" class="ss-q-title">Your Name</label>
<div style="clear:both;"></div>
<label for="entry_0" class="ss-q-help"></label>
<input type="text" name="entry.0.single" value="" class="required" title="This field is required" id="entry_0">
</div></div>

<div style="margin-bottom:20px;clear:both;"></div>

<!--Your Email-->

<div class="errorbox-good">
<div class="ss-form-entry"><label for="entry_1" class="ss-q-title">Your Email</label>
<div style="clear:both;"></div>
<label class="ss-q-help" for="entry_1"></label>
<input type="text" name="entry.1.single" value="" id="required" class="required email" title="This field is required, e.g. you@yoursite.com" id="entry_1">
</div></div>

<div style="margin-bottom:20px;clear:both;"></div>

<!--Your Website-->

<div class="errorbox-good">
<div class="ss-form-entry"><label for="entry_2" class="ss-q-title">Your Website</label>
<div style="clear:both;"></div>
<label class="ss-q-help" for="entry_2"></label>
<input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2">
</div></div>

<div style="margin-bottom:20px;clear:both;"></div>

<!--Give Comments-->

<div class="errorbox-good">
<div class="ss-form-entry"><label for="entry_3" class="ss-q-title">Give Your Comments</label>
<div style="clear:both;"></div>
<label class="ss-q-help" for="entry_3"></label>
<textarea name="entry.3.single" rows="5" cols="60" value="" class="required" id="entry_3"></textarea>
</div></div>

<div style="margin-bottom:20px;clear:both;"></div>

<input type="hidden" name="pageNumber" value="0">
<input type="hidden" name="backupCache" value="">
<input class="special" type="submit" name="submit" value="Contact Now!">   <input class="special" type="reset" value="Reset">

</form>

<!--Goog Analytics -->

</body>

</html>

This article of May 9th, 2010 is authored by Partha Bhattacharya, who runs this website. Catering to the clients' video needs aside, Partha also writes guest articles for other web publications.
Enroll with our video production course

§ 8 Replies

  • Recent Articles

Get Adobe Flash playerPlugin by wpburn.com wordpress themes