Custom Styled Google Form
icon32.png Posted: 07 Apr 2009 15:35

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;">