Redesigning Google Forms

Redesigning Google Forms

Form creation is an easy process with the subsistence of Google Forms[GForms] but the fact remains is what a programmer loves may not be loved by a designer. The easy of creation of form is so flexible and functional yet themes sometime don't blend with the looks of website, also sometimes the complete professional look of site is lost just by the tiny icon at the bottom of form which says powered by Google or by the Thanks page which shows the confirmation and give option to others to create a new form.
We at Unyscape's Geeks' Lounge do all such activities to explore beyond the obvious and in same quest we have this small hack to

• Redesigning a Google Form [Remove Powered Google Icon/Google Logo]
• Creating a custom Thanks Giving Confirmation Page.

Images Illustrating The Following Steps

• Step 1.

Sign-in to your Gmail and then in top left options check for Documents option or otherwise Sign up for a Google Docs account if you haven't already done so.

• Step 2.

Click New and choose Form from the drop down menu.

• Step 3.

Create your form .

• Step4.

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: http://spreadsheets.google.com/embeddedform?key=t8uHbL2ea0294ysBCAMeYdw

• Step5.

Right click anywhere on the page and click View Source to look at the code behind the form.

• Step6.

Copy all the code between <form> and </form> tags and paste it into the new form page on your web site.

• Step7.

Now you have a beautifully styled form but it still sends users to an ugly Google confirmation page.

• Step8.

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

Done!

If this helped you in any way do leave us with a comment or if you know any other good way to achieve this please do share your approach with us.