Tip: Adding a submission form to your blog

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!

Comments

  1. 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

    ReplyDelete
  2. Excellent Tutorial Thank you for Sharing.

    ReplyDelete
  3. This is a great tutorial. Perfect for my blog.

    ReplyDelete
  4. im 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 ??

    ReplyDelete
    Replies
    1. Hello Clouded Clarity, did you follow Step #1 and Step #2? The form elements are created in those steps.

      Delete
  5. i can not view page source on safari for mac HELP

    ReplyDelete
    Replies
    1. Right-click, or if on a mac option-click on the page and you'll have the option to "view source".

      Delete
    2. OK so i have managed to do everything except when you say "Add the following code into the element:

      onsubmit="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 :/

      Delete
    3. Search the form code that you copied over that begin at < form ..> and ended with < /form>.

      You want to add:
      onsubmit="submitted=true;" target="hidden_iframe"

      into the < form > tag.

      Delete
  6. I followed the steps but the submission form shows up on the preview tab but not on the actual blog. HELP!

    ReplyDelete
  7. Thank you. However, redirecting to a "Thank you" page bypasses the form validation (e.g. required fields). Is there a way to combine both?

    ReplyDelete
  8. Hi david,

    It'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 !

    ReplyDelete
  9. 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.

    ReplyDelete
  10. Thanks, David! Very helpful. Would have never come up with this myself.
    Working 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.

    ReplyDelete
  11. Thanks for the tips. I was looking for such a tutorial to adding submission form with Google Docs.

    ReplyDelete
  12. Invest money in stock
    market? 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.

    ReplyDelete
  13. 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?

    ReplyDelete
  14. Hi Kim, can you share a link to your site so I can see the code?

    ReplyDelete
  15. hello ,

    how 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.

    ReplyDelete
  16. hello ,

    how 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.

    ReplyDelete
  17. 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

    ReplyDelete
  18. Share Market
    Investment 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

    ReplyDelete

Post a Comment