Customizing and Styling Google Forms

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

Find this helpful or know ways to improve? Please share this post and comment below.

16 thoughts on “Customizing and Styling Google Forms”

  1. thnx this has been very helpful but i would like to know if i can also edit the functionality on the form through javascript….eg: i would like to send a mail after the submit button has been hit!…thank you!

  2. Google Forms are simple with very limited features. You can likely change some of the functionality by writing your own JavaScript, but at that point, I would recommend trying a different solution.

  3. I know of the fact that now, more and more people are being attracted to surveillance cameras and the subject of pictures. However, to be a photographer, you will need to first expend so much time deciding which model of digital camera to buy as well as moving via store to store just so you can buy the cheapest camera of the brand you have decided to pick out. But it won’t end now there. You also have take into consideration whether you can purchase a digital digital camera extended warranty. Thx for the good tips I acquired from your weblog.

  4. Hi D12,

    Its possible to send a mail after the submit button hit, but through spreadsheet using google scripts. The script triggers are set as “run the script when forms submitted”.

  5. I feel this is among the so much important information for me. And i’m glad studying your article. However wanna commentary on some general issues, The site taste is perfect, the articles is truly excellent : D. Excellent process, cheers

  6. Hi great tutorial!

    Really helped a lot.

    Have tested it now and it doesn’t seem to work in Explorer or Firefox. Can it have something to do with the hidden iframe and the javascript that goes with it?

    Works fine in Safari and Chrome.

    Thanks for any help!

    Kind regards,
    David

  7. Progress.. we seemed to have narrowed it down to this:

    – All the browsers work, BUT only if we are logged in to our gmail account where the form is.

    EDIT:

    Forgot to untick box in form edit that only makes it accessible for our logged in users… Haha! Rookie mistake.

    Perhaps someone can learn from this. Only took 20 min, so not a huge time spill. Cheers!

  8. Nice tip!

    Any idea about how to customize the style on forms with several pages?

    I can copy the source code from each form page, but how does Google to send information between the different pages?

  9. I created multiple pages in my google form… is there anyway to edit the second page and make the first page of the form go to the edited second page?

  10. Awesome, thanks a lot! This was extremely helpful. I got to format the form exactly how I wanted to look. I also customized the css, saved to a separate file and linked the doc to this file.

  11. Hey,
    This is definitely helpful.
    But, I’m having a slight issue, I was using this and when i put the code for redirection to a custom thankyou page, googles validation check stops working. Do you have any suggestions on how to fix this?
    Thanks

  12. John F and TJ – We haven’t worked with Google Forms lately and really don’t have suggestions on your problems. Google Forms can be limited with fully customizing it. We mostly use GravityForms with WordPress for our forms.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>