I use the free Google forms over at docs.google.com. The innovation of using this service to keep a running record of form submissions within a spread sheet is perfect for my needs. However, I think the form style is ugly and uninventive. This is how you can create a custom styled Google Form:
Step 1
After you create your form, click the link at the bottom of the page titled: You can view the published form here.
Step 2
Right click anywhere on the form page and then select the View Source option.
Step 3
Locate and copy the code between form tags (<form> & </form>) and paste it into a new page using your favorite website editor.
Step 4
Now you can style your form just as you would any other web page.
If you want a custom confirmation page to replace the Ugly Google confirmation page then you must not have any required fields in your form or else the following code will not work to save the form data to your spread sheet. Find the portion of your code that looks like this:
<form action="EMBEDDED-GOOGLE-SPREADSHEET-CODE" method="POST">
… and replace that code with:
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='URL-OF-CUSTOM-CONFIRMATION-PAGE';}"></iframe>
<form action="EMBEDDED-GOOGLE-SPREADSHEET-CODE" method="post"
target="hidden_iframe" onsubmit="submitted=true;">
Whane's Web
Hey that's a nice trick…. worked like a gem! Thanks!
Thanks for summarizing our tutorial for your readers Whane.
Check out our original tutorial here: http://www.morningcopy.com.au/news/how-to-style-google-forms/
Hi Morning Copy and thanks for posting.
For some reason I had a hard time following your tutorial, though it was laid out nicely and after going over it a few times my summarized version seemed to do the trick for me.
By the way, original attribution for the tutorial goes to the UNL as shown in the article: Google Document Forms but has been rehashed all over the web a few hundred times, this of course includes our sites.
To find other versions of this tutorial using Google just click here.
Search Engine Placement Services
Did the job nicely, and nice one shutting Morning Copy up!
:)