 |
 |
« Embedding Title & Description Meta Tags In WordPress Posts & Pages | Embed Online Video From YouTube To PowerPoint Easily »
| Tweet |
|
|
|
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.
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.
- 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.
- 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
- Right-click anywhere on the form, and choose View Page Source to get the page HTML.
- 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.
- 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.
- 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>
- 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;”>
- 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>
Update
Jazz Witham of Jazzzerup.Com has created Google Docs form with php script. If php is more comfortable for you than jquery, then take a look at her tutorial here.
| Tweet |
|
|
|
This article of May 9th, 2010 is authored by Partha Bhattacharya, who runs this website. Partha also creates video-based e-learning course for clients, and when time permits, writes guest articles for selected sites.
Great, I was looking for something along the lines of this. What would you say would be the most effective way of marketing online (apart from) emailing, because that’s a given.
hi, could you help me out with a little problem, i’m trying to embed a form with Required fields and it seams that the redirect won’t work, the info gets into the spreadsheet but no redirect
made the redirect but it doesn’t shown an error if a req field isn’t filled out
@mihai,
Check the codes you’ve used. The full HTML code is given above, and if the codes are okay, it should work.
Partha
Fantastic!
Can the redirects be customized per field..such as email address entered and redirect to a page based on that?
Of course the field with the redirect link would be located in the form/spreadsheet.
Mike
@Mike,
Frankly I’m not sure of that. Guess you can get in touch with Morning Copy from where I did the whole thing..
Partha
thanks, I love the part with the glass
.. excellent
Hi,
I created a form first, and then embedded it into my google sites webpage.How can I add styles to this now? It is embedded as a gadget; and when I click on HTML, it does not show me any of the code similar to what u have shown above.
Any comments?
@Sindhu,
Do you have access to the HTML? If yes, you can include styles for the form.
If you follow the video, and if you have access to the HTML, you can do needful.
Cheers.
Partha
Hi Partha,
I managed to customize the look-and-feel of the form, however the custom redirect simply does not work.
Also, if the mandatory fields are left incomplete, the form reverts back to the default google format!!!!!
I AM REALLY STUCK….really looking forward to your help
-Sindhu
Hi,
thanks for the great video and article.
I’m a very poor html/css user unfortunately…
this is my google form url:
https://spreadsheets.google.com/viewform?formkey=dExrcGhSZ0NhN09XMS1nYnFnUVpka1E6MQ
I didn’t realize how to customize it.
all I want is to add a “reset” button and also change background color and after submission redirect to this url: http://rotemayalon.com/thank-you
what would be the full code that I would embed on my wordpress?
thanks a lot,
Rotem
@Sindhu/@Rotem,
I agree it’s frustrating if the codes don’t work. I suggest you do the following:
1
Create the Google form in a separate webpage. See the example in this page: http://www.2webvideo.com/video-production/contact/index.html. Check out the page source to see the HTML code, and the CSS code in the style.css file.
2
Embed the whole form in any webpage of yours using iframe tag, like this:
<iframe src=”http://www.2webvideo.com/video-production/contact/index.html” frameborder=”0″ scrolling=”no”></iframe>
3
Change the form URL and that of the confirmation page redirect to those of yours. The form fields will be as per the Google form you created. Also change the styles of the form, the fields, and the general appearance.
Hope this works. All the best.
Partha
Glad I found this information on bing when I was perusing the internet. Good STUFF!
Is this feature still working? Is google still allowing it, I mean?
I am receiving a “This content cannot be displayed in a frame”
Followed by:
To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame
I was SOOO excited to watch your video and try it out for myself. Doesn’t seem to be working though.
UPDATE – OK, I made a few minor tweaks and now the form does indeed redirect to the thankyou.html…..BUT it does not submit any data to the spreadsheet!
Any thoughts?
Here’s my form – http://bhfit.com/Races/Cold_Feet_5k/
@Matt,
Please follow all the codes given here. The form should work for you.
Cheers.
Partha
Partha, you have a great tutorial here, and I’m eager to try it.
Do you know if this will work in Google Sites? If I want to insert a styled, validated google form into a google gadget, would this work? I mainly just want to place form fields side by side, not all down in a column.
Thanks for any advice.
@James,
I haven’t used Google Sites thus far. So it will not be proper for me to comment. Please try searching appropriate terms for more info’.
Cheers.
After a long searching for the same…
When i tried this steps … & it worked.
Thanks a lot it’s fantastic solution.
– Dinesh
Thanks for the good words.
This is great for a new page. But how do I do this inside a page of Google Sites?
@Helder Dias,
Haven’t used Google Sites. I’m sorry I can’t offer help.
Partha
Liked your posting a lot. I’ll be browsing your web site regularly. I found it on google
Some genuinely nice stuff on this web site , I like it.
I followed your instructions – but, for some reason, I am still getting the google thank you page… am I doing something wrong?
The email validation is not working. Is it assumed that the second text box is email? I have Four fields: id number, First name, last name, email address. Does this program grabs the email and sends verification of registering? Please help.
Thanks
@Arman,
The email validation is working in my Contact Us form. The validation is mainly for the 2 characters, ‘@’ and ‘.’, in the email address. As long as these 2 are there, you can have any alphabets to make the form work.
All the best!
Hey you I’m a big fan of your site. Hope you keep posting to it regularly.
Folks, this is a great site and this particular post is extremely valuable. Thanks a ton for your help on getting verification and redirection working.
For those that couldn’t get verification & redirection working together on a page… The code just needs to be cleaned up. Here’s the deal:
Quotes can mess you up when you cut and paste. Make sure that you are using the right quotes: When I copied the code from this site, different quotes ended up in my code. I had to replace them with the regular quotes (single & double, where required). Not sure of the exact terminology to use here, but, that did the trick.
It works like a charm. Thanks a ton!
Todd
Thanks Todd for nice words!
i waz juz requiring the script to redirect my google form to a custom page upon submission, so i added the last part of the script right above my google forms starting script, but it dint work
what to do now?
well can u help?
Great Tutorial! I took a step further and rather than using jquery I added php code to process the form. With the php code you can add captcha, field validation, email confirmation messages, even attachments.
http://www.jazzerup.com/blog/item/googleforms
Thanks Jaz! I’ve watched your YouTube tutorial, and it’s great! Let me mention this here for the benefit of viewers:
http://www.youtube.com/watch?v=dZE4smq4nzw