Google Forms are amazing – so functional and flexible!
At Morning we very occasionaly use Google forms to run online promotions or surveys for our clients. Google forms are reliable, simple to use and, best of all, easy to share with all the stakeholders in an online project.
In this tutorial I’ll show you how to:
- Style Google Forms so that they fit into your site’s look and feel.
- Replace that dull Google confirmation page with your own custom ‘Thank you’ page.
Don’t be scared of all the steps. I’ve broken it all down into bite size pieces so it is easier to follow. If you’ve already got a Google form ready to style you can skip straight to Step 6.
Step 1
Sign up for a Google Docs account if you haven’t already done so.
Step 2
Log into your new Google Docs account.
Step 3
Click New and choose Form from the drop down menu.
Step 4
Create your form using Google’s straight forward tools.
Step 5
When you have finished compiling your form, click the link at the bottom of the page titled: ‘You can view the published form here’. Here’s an example of what it should look like.
Step 6
Right click anywhere on the page and click ‘View Source’ to look at the code behind the form.
Step 7
Copy all the code between <form> and </form> tags and paste it into the new form page on your web site.
Step 8
Now you’re ready to style your form! Insert your own stylesheet between the <head> tags.
Step 9
Now you have a beautifully styled form but it still sends users to an ugly Google confirmation page.
Add a bit of javascript to redirect the completed page to a confirmation page of your choosing:
REPLACE:
<form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="POST">
WITH:
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='http://YOUR-THANK-YOU-PAGE-URL';}"></iframe>
<form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="post" target="hidden_iframe" onsubmit="submitted=true;">