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!