Using Google Forms is a great and simple way for anyone to publish an online form. While Google Forms are very powerful, the presentation isn’t very desirable and in it’s raw form can be a poor reflection on your company or brand. This post explains how to create a Google Form and how to customize it or “make it pretty”.
An example of how you can customize Google Forms
If you’re not familiar with Google Forms, it’s part of the Google Doc suite of tools and, if you haven’t already, you ‘ll need to sign up at google.com/docs.
Note: Customizing a Google Form requires basic HTML & CSS knowledge.
Expert Summary: For those familiar with Google Forms or very capable with HTML editing, customizing a Google Form can be summarized by simply creating your form and copying/pasting the form code into your own web page. You can get the form code by click the “…view published form here” link in the form editor. See below for more details.

Create your Google Form

  1. Create Form- Once logged into Google Docs, find the Create button (upper left) and select Form)
  2. Add Your Form Fields – Using the form editor add all your form fields. Make sure you get your form working how you would like it because after the next step, you will no longer be able to edit the form fields using this editor.
  3. Stylize Form – With this step, you’re taking the code from the Google Form and creating a page that you upload to your website. This disassociates the form from Google, so any updates you make in Google’s form editor won’t update this page.
    1. View Form – While in the form editor, click the “…view published form here” link.
    2. Copy Form Source Code - Right click on page and select view source from menu. Copy form code by selecting everything between the <form>…</form>tags. See example below. You can also include the JavaScript at the end. This will be the form field validation.
      Copy Pasting the Google Form Code
      click to enlarge
    3. Styling The Form – Paste form code into an existing page or a new page you created. Using a HTML editor style your form. Once you’re done styling the form, you can upload it to your website.
    4. Collecting the data – Even though the form is no longer hosted on Google, form submissions will continue to be posted to your Google Docs account. Another benefit to using Google Forms is that submissions are logged in a Google Spreadsheet, which gives you the ability to sort, export and apply all the other features of standard to a spreadsheet application.
  4. Adding your own confirmation page – This step is optional, but since you’ve taken the time to stylizing your form, you might as well create a nice confirmation page. After creating a confirmation page, replace the <form> tag of your form page and replace it with the JavaScript listed below.
    Find and Replace this:
    <form action="YOUR-GOOGLE-SPREADSHEET-LINK" method="POST">
    With this:
    <script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='http://CONFIRMATION-PAGE.html';}"></iframe>
<form action="YOUR-GOOGLE-SPREADSHEET-LINK" method="post"
target="hidden_iframe" onsubmit="submitted=true;">