Google Forms are amazing – so functional and flexible!
At Morning Copy we regularly 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.
The one problem with Google Forms is that they look, well, like Google :)
In this tutorial I’ll show you how to:
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.
Sign up for a Google Docs account if you haven’t already done so.
Log into your new Google Docs account.
Click New and choose Form from the drop down menu.
Create your form using Google’s straight forward tools.
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:
Right click anywhere on the page and click View Source to look at the code behind the form.
Copy all the code between <form> and </form> tags and paste it into the new form page on your web site.
Now you’re ready to style your form!
Insert your own stylesheet between the <head> tags. I’ve prepared a version which takes Morning Copy website as it’s starting point.
Now you have a beautifully styled form but it still sends users to an ugly Google confirmation page.
<form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="POST">
* I found this last bit of code a few months back. I can’t for the life of me find the site so I can attribute it. If this is your code please contact me so I can give you the credit!
** The re-direct script will not work if you have required fields in your form.
We’ve published 3 updates to this tutorial.
If you’re having trouble getting your styled Google Form to work we recommend you try out an easy web form maker like Form Experts.
PO Box 284
Strawberry Hills, NSW