Create A Contact Form With Google Docs?

In simple terms a contact form can be defined as a best way to get connected with your readers which facilitates them to get connected with you and post their comments regarding what they feel about your blog. An interesting feature of contact form is that it is helpful in increasing fame of your blog, which can be witnessed from comments received on your blog.  Therefore I decided to create a contact form for blog by making use of Google Docs. For this instead of following any lengthy procedure I decided to work on some simple process which is easy to understand and easy to perform. Let me now start this tutorial.




Basics requirements of Contact Form:



According to me every form requires some common information which is to be provided by every person filling that form. Keeping that point in concern I decided to create a contact form with three necessary variables, these are Name, Email Address and Message. This according to me is the simplest way to create a form rather than creating a lengthier contact form.


Creating a contact Form with Google Docs: 



The first step is to login to Google Docs with your Google ID. There you will find an option of “Create” on the sidebar located at left side, in that go for “Form” option at the below of that option.



                                    



By clicking on that a window will open which has already two form fields embedded in it.







In this form you are free to mention title and description according to your choice. While you create this form to be accessed as a web version on Google docs make sure that these fields are helpful to your readers. Although these fields will not emerge on embedded forms until you integrate these fields manually.


Now for the first field of form, give it the title of ‘Name”.  Keep the help text section empty and question type as text. For second field adopt the same process by naming it as “Email” and for the third field i.e, “Massage” select “Paragraph Text” option from “Add item” menu. Now your form will look something  as shown below:






Now save this sample for form.

Searching a “Form Key”: 


Now before you integrate your from in Blogger Page, you should note your form key. This is the most required key for your because this will be used for pasting it into the code which will be used for your contact page.


Now click on view your published form by making use of link placed at the bottom of editing page of your form. The other option is to go directly on Form and then Go To Live Form to have its spreadsheet preview. You will find that URL of your published form has form key positioned at the end of URL as shown in code given below:
 

https://docs.google.com/spreadsheet/embeddedform?formkey=dGFkTUxPRUlXRHdwNjU4UDk0V25jSXc6MQ


Now select this code and paste it into simple text editor for making its use later.




Integrating a simple contact form in a Blogger Page: 


In this tutorial we assume a situation that you are using this form on a stagnant page. This could be easily integrated in an HTML/Javascript gadget or a blog post.


Now create a contact page (you can also edit your existing contact form) and write any content which you want to use. Just after this move to HTML editor of your page and paste the code mentioned below: 



<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="Please enter your name" 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="Please type your message here" 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 you save your page you should not forget to make two changes in the code: 

1.  Replace your-google-docs-formkey from the form key which you have copied previously;

2. Replace URL of thank-you-page with URL of page which you want for your visitors to use, after they have submitted a form. 


After making these changes you should preview them and save. After which you can move for next step of testing the customization of validating Google Docs contact form which is redirected to custom confirmation page after submission.


Working of form code: 


Here you would be required to make use of Bassistance jQuery Validation plugin which is required for checking necessary fields of the form and ratify them. This could be done by integrating “required” variable in the appropriate form.

Integration of “title” for each field enables us to create an error message if visitor forgets to fill any required information in the form or enters wrong email address.



This will redirect your readers back to confirmation page which can be done by integrating following set of code, which generates next step after wrong 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 designed on the information provided from the live form which was created when we had created Google Docs form. If you intend to create form based on more variable by making use of this discussion, then you should copy the elements of form from the source code of live form available on Google Docs and paste it the required fields.



Creating error text on Google Docs Form:


As discussed above if a visitor submits the contact form without providing any required information an error message appears on his screen. For making this message appear on their screen you need to go at Template widget and click on Customize in Blogger Dashboard. Now move to Advanced Section and the paste code shown below in Add CSS Section:


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


This will show error message in red color, but you can change the color of text (color: #cc0000) to another hex value. Now save the changes for activating them.



Getting contact form submitted delivered at your email address:


For this open the spreadsheet of your contact form on Google Docs and click on Tools widget and look for Script Gallery. In the Public section look for “Contact us Form Mailer. You will find your required information at the top to the results. Now click on Install option and click on Authorize the script. This will enable the script to be displayed as installed in the list of public scripts. To return back to your spreadsheet click on Close button.


Now go to Tools>Script Editor of spreadsheet menu and look for line mentioned below:

var recipient = "";

Mention your email address between the inverted commas of the above line as follows:

var recipient = “your email address”
 
And save the changes.


As you are still working on script edit page, click on Triggers>Current Script’s Triggers in menu. Now is the box of Current Script’s Triggers, use No Triggers set up. Click on it to add one now link.


Make sure that contactUs mailer, form spreadsheet and On form submit are chosen. Save the changes. Now as the final step close the script editor and go for testing your form and its relevance.

This finishes your exercise of creating content form designed with help of Google Docs.




No comments:

Post a Comment

Man Behind Ribbun Software

vikas Singal Vikas Singal is a professional Internet marketer from Jaipur, India.

Apart from Blogging , he is a fun loving person. His areas of Interest are php, wordpress and joomla.

At Ribbun-Software he Writes about Blogging, Wordpress, Technology, Making Money online.

You can read more about him at About me page.

@ribbuntweeting

My Tweeter Updates

    Follow me @ribbuntweeting

    Also Check