Add Google Docs Contact Form to website

Preface

Contact Form in my templates is always based on Google Docs and sends emails to Docs spreadsheet with notification to email inbox. No additional PHP script is required. It uses native browser validation. If you will want to add js validation plugin you can download it here and apply to your form.

Start doing

In order to use this form you or your client must have Google account. Gmail is not obligatory, any email matches. In order to use this form, sign up to Google (enter any email address), go to Docs (https://docs.google.com) and start create your form. View this screencast to understand how to set the form in Docs:

Right after you have created your form you yet need to do two things: 1) to copy and paste its formkey and 2) to ensure that all classes and ids in your form correspond to classes and ids in your html page. Look at the sample code of the contact form (identical to one you have on your html page):

Your email: 




 
 

At the very top of given code example, in the “form action” you see the unique formkey, which you need to replace with the formkey which you got after your form had been created in Docs. This is formkey id in the code: “formkey=dFRQWlNfTjZ2MmJyOUVLOTVrUkNhZ3c6MQ”. Second thing: small js snippet redirects to the “thankyou.html” web page as soon as the form is filled in and submitted by user.

Important thing is to compare classes/ids/names in your Docs form and in your markup. While creating your form in Docs you could make a mistake and delete the field, or change your mind and reorder the inputs. It may cause non-coincidence of classes/ids/names. For example in the code above you see id entry_0 for the input field. If by mistake you deleted and afterwards created once again same input field in Docs, it will get another id. It means that if in your Docs’ form the input for, let’s say, email field has an id entry_1 while in your markup it has the id entry_0 the newsletter will never arrive to database. Mind ids, names and classes if you want the form to work properly. (To get the markup of the form created straightly in Docs simply right click on it and press “View Source”.

Last thing to do is to set notification rules in Docs in order to force email messages to arrive to email inbox (it will not be email text itself, it will be a notification about some email arrived. Email content can be viewed in Docs only, in the spreadsheet itself). How do you know that somebody filled in the form, submitted it and sent the submission to you email inbox? Watch screencast below. In the screencast below you will see how notification arrives to gmail inbox. But once again, gmail is not obligatory, email message will arrive to that email address which you set for your Google account. It can be aol, gmx, yahoo or your paid custom email address.