One of the most requested features in any website is the ability to have a contact form. When brochure website clients request a "basic website" this contact form is often the most technically complex aspect of the website. This doesn't mean that it's hard to accomplish, just that this feature is likely one of the only pieces in their site that can't be accomplished through the WYSIWYG editor.
What is amazing is that anyone can add a form submission to their website without any difficult programming needed using existing Google services.
Step 1: creating the form
Go to
Google Docs (yes, really). Once you've signed in, click on the button on the left entitled "CREATE" and click on "Form". Create the form that you want using their built in form creation tool. Once you're done don't forget to save! You can ignore the theme as you want the form elements to reflect the design of your website and you don't want extra styling being added.
Step 2: extracting the form code
Extracting the form code is a roundabout process; the form embed code gives you a iframe to add into your site, but for our purposes, we want to grab what's inside the iframe and put it into one of our Pages. Up in the top right corner you'll see a button that says "More Actions", click on that and go down to "Embed"; a box will appear with iframe code that looks like:
<iframe src="https://docs.google.com/spreadsheet/embeddedform?formkey=asdasdfaJHGDasdadfjSJHSJDH" width="760" height="638" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
From that code you want to grab the SRC URL, in this case https://docs.google.com/spreadsheet/embeddedform?formkey=asdasdfaJHGDasdadfjSJHSJDH
and copy/paste that into a browser window.
In that new browser window with your form, right-click on the page and select "View Page Source". Highlight and copy everything in that page from <form...> to </form>
Step 3: integrating it into your website
Now go back to your Blogger site, and edit the Page that will have you form. Click on the "Edit HTML" tab so you're not in the "Compose" tab. Paste the code that you copied in Step 2 into the the edit window.
To clean up the code I recommend removing all <div></div> elements as well as all <br> tags and style="" information. That should leave you with just the bare basics of the form and eliminate most style conflicts.
Hit Publish and you now have a form! This form submits responses to the newly created form submission spreadsheet that resides in your Google Docs account. The only trouble is that when a user submits the form it goes to an ugly page in Google Docs; Step 4 fixes that.
Step 4: setting up redirect to a thank you page
The first step to setting up a redirect to a thank you page in your site is to create the thank you page. Go to Posting -> Edit Pages and create a new page for your Thank You page.
Once you've created that page, go back to the Contact Form page. Copy/paste the following code into the "Edit HTML" tab of your contact form page, right before the <form..> element.
<script type="text/javascript">
var submitted=false;
</script><iframe id="hidden_iframe" name="hidden_iframe" onload="if(submitted){window.location='URL-OF-YOUR-THANKYOU-PAGE';}" style="display: none;"></iframe>
Change the "URL-OF-YOUR-THANKYOU-PAGE" to the URL of your thank you page.
Add the following code into the <form..> element:
onsubmit="submitted=true;" target="hidden_iframe"
Publish your changes and give it a test drive! Your form submissions should send successfully and re-route you to your thank you page once it has been submitted.
Step 5: get notified of new submissions
To get notified when someone submits a form submission you'll need to go back to your form spreadsheet in Google Docs. Click on the spreadsheet to view it, then in the options at the top of the page, click on "Tools", then "Notification Rules". Check the box for "a user submits a form" and "email - right away", then hit "Save".
Don't forget!
We have quite a few other articles on
creating and extending forms for use in your Blogger site, check them out!
Thanx for an excellent tutorial. This is a free service else one needs to pay a hefty amount to get contact forms without any restriction imposed by free service providers who unlock all features once one go paid with them. Regards
ReplyDeleteExcellent Tutorial Thank you for Sharing.
ReplyDeleteThis is a great tutorial. Perfect for my blog.
ReplyDeleteGreat tutorial!! Thank you!!
ReplyDeleteim confused about the last bit where is the form element ?? i am not computer savvy, ive done everything else but the last bit has thrown me off where is this element ??
ReplyDeleteHello Clouded Clarity, did you follow Step #1 and Step #2? The form elements are created in those steps.
Deletei can not view page source on safari for mac HELP
ReplyDeleteRight-click, or if on a mac option-click on the page and you'll have the option to "view source".
DeleteOK so i have managed to do everything except when you say "Add the following code into the element:
Deleteonsubmit="submitted=true;" target="hidden_iframe"
do you mean at the start or the end :s IM SO SORRY FOR MY STUPIDITY THEY SHOULD MAKE A VERSION OF THIS FOR DUMMIES WITH PICTURES :/
Search the form code that you copied over that begin at < form ..> and ended with < /form>.
DeleteYou want to add:
onsubmit="submitted=true;" target="hidden_iframe"
into the < form > tag.
I followed the steps but the submission form shows up on the preview tab but not on the actual blog. HELP!
ReplyDeleteThank you. However, redirecting to a "Thank you" page bypasses the form validation (e.g. required fields). Is there a way to combine both?
ReplyDeleteHi david,
ReplyDeleteIt's work for me and bring user to the thank you page, but can you add another code how to send notifications email to the user submitted the form ?
Thank you and good work !
Hi, I have a question. I tested and sent myself a comment. I wasn't notified via email but I do see the comment on the spreadsheet. I did the last step = tools, notification rules, user submits a form is checked and also email notification is checked, I saved. My email is the correct one and I even checked my spam box and nothing :/ I only see them in the spreadsheet.
ReplyDeleteThanks, David! Very helpful. Would have never come up with this myself.
ReplyDeleteWorking with Google Drive it was slightly different, but I found out it was even easier for me; I was just a matter of sending the form, grabbing the code that Google then gave me and pasting it on a page. I only needed to adjust the width in the code.
Thanks for the tips. I was looking for such a tutorial to adding submission form with Google Docs.
ReplyDeleteInvest money in stock
ReplyDeletemarket? Want highest returns by share market SHARE MARKET COMMODITY FREE TIPStrading but don't know where to invest or which investment
plan will be best for you? to find best investment plan.
I can't get it to direct to my "thank you page." I followed the directions and pasted the script code before and the onsubmit line into the . Any tips?
ReplyDeleteHi Kim, can you share a link to your site so I can see the code?
ReplyDeletehello ,
ReplyDeletehow could i know the Identity of a responder or his email id if he has submitted his form while he was logged in by his account, unknowingly.
hello ,
ReplyDeletehow could i know the Identity of a responder or his email id if he has submitted his form in google docs while he was logged in by his account, unknowingly.
Hi David. This is excellence! Glad you shared. It works like a charm but I stuck at the last step, which is setting the notifications. I click on the "tools" at the top of the page but I only can see script editor and script manager from the option. Any advice? Thank you. My blog is http://herweightlossdiary.blogspot.com
ReplyDeleteShare Market
ReplyDeleteInvestment made profitable by SHRISTOCKTIPS- Get NSE/BSE Tips via SMS and Yahoo
Messenger. We give daily stock market tips for future and cash segments. Market
is going through a very complex phase. Not Clearing the trend .So trade with a stoploss is must.
But One thing is clear that you can made a sell position in NIFTY & some selected blue-chip stocks near the level of
6000-6020 with stoploss of 6070. This
profitSTOCK MARKET FREE TIPS, NSE TIPSwill be the best
position you can make in the Nifty in this present market. Because NIFTY is not
able to cross the level of 6030-6050 .so these are the major resistance of
NIFTY.As we all know that Rupee is giving a very bad signal for the Indian
economy So best position is to sell at higher level whether you are a intraday trader or a positional
trader. Even banking is not giving any kind of support to the market. You can also make a sell position in banking stocks
but with the stoploss must at higher levels. This is at present best strategy
you can take in the present market.
Regards
SHRISTOCKTIPS TEAM