So I’m here to debunk a myth that you can’t customize a form within Google Sites. I’m not sure where this one started but I can see why it did because unfortunately this one is not very intuitive. Kind of interesting considering intuitive is what Google is known for? Anyhow, here is the skinny on how to do and what you need to do in order to create a custom form within Google Sites using Google Docs. In addition, I’ve included a link to my demo Google Site where you can see this form in action.

Demo

[center-ad]

Toolbox

[bullet_list icon=”check”]

  • Google Site (It’s Free!)
  • Google Doc (This is Free Too!)
  • HTML & CSS Knowledge

[/bullet_list]

The Skinny

Here is the quick and dirty on how to customize a Google Form. Its broken down into a couple of easy steps:

[bullet_list icon=”plus”]

  • Create form in Google Docs and publish
  • Go to the live form and view its source
  • Copy the <form> markup in the source and paste to your favorite editor
  • Strip out all of the junk Google adds for aesthetics
  • Design your custom form utilizing the <form> and <input> components you copied from the source
  • Copy the new form design in to your site page using either HTML Gadget or HTML (inline)
  • Save the page and refresh
  • Presto! You now have a fully functional customized form in Google Sites!

[/bullet_list]

The Large

To design a custom form within Google Docs and publish to Google Sites, you must first generate the generic the robot form that Google walks you through. To save time, I won’t go through how to create a form in Google Docs because if you are trying to figure out how to customize it you have probably figured out already how to make the OOTB form already.

Once you have your form built using Google Docs, go to the live form and view its source. Look for the <form></form> tags and for simplicity just copy the entire section. Within the code you copied, look for all of the HTML form tags such as <input>, <textarea>, <select>, etc. Those are the items you need to take and use in your new custom Google form. You can also strip out the class generated and end up with a result something similar to this:

So by now, I hope you see where I am going with this. One thing I want to point out is how Google names the elements in sequence to which you created them in their form wizard. No funky naming conventions to confuse you with, which really helps make this so much easier. So from here, design your form to your liking utilizing the form elements Google has generated. Below is an example of a custom form I created using inline CSS styling:

You can get fairly creative with your forms, but keep in mind the limitations that Google has so kindly established. If you are going to use an HTML Gadget, then you may utilize the <style> tags to set classes and IDs to your form elements. However, if you are inserting in to your Google Site page through inline HTML, then your only option is using inline CSS. So why not just use the HTML Gadget by default? I figured you would ask that, so here is my list of the pro’s and con’s both have to offer.

This option the form will open to a new page once the form is submitted to verify the field values. I guess this is ok, but it just looks clunky and not very fluid. On a positive note though this will work in all browsers (see my note on HTML inline) as well as giving you the option to use styling through classes and IDs.
This option fits very well in the page and will submit and post the form fluidly (not all clunky like the HTML Gadget approach). The downside though is that all styling must be completed using inline styling otherwise Google will strip out your styling markup. Inline styling will limit your ability to style, but can still offer a nice solution to your form. Another kicker with this is that I have had problems with the form rendering in IE browsers using this method. You can work around this by adding the site in your ‘Compatibility View Settings’ in IE or by installing the ChromeFrameBHO addon to your browser. If your site is private and utilized as an Intranet, then this can work because you can push out those settings in a GPO update. If the site is public then your options go down because you can’t control the end user and all you can do is suggest they open in a different browser if they are having problems.

For this example, I used the inline HTML method to post my newly styled form to my Google Site page which can be found here. I didn’t spend a lot of time styling the form (I’ll leave that to you folks) but as you can see from my example I have been able to effectively style the form produced by Google to my own liking.

In order to embed this in to your Google Sites page using the inline HTML method, all you need to do is open the inline HTML editor in the top right of the menu bar and paste the form markup. Once you save, a pop-up may prompt stating that Google doesn’t like your HTML and it is going to modify it. This is fine. What happens here is pure Google magic as it takes your form markup and places it into an Embed Gadget. THIS IS IMPORTANT. Once it is in the Embed Gadget you only got a single chance to modify this before the gadget errors out and corrupts itself. Don’t ask me why, I have no idea, it just does (and it sucks). Open the gadget settings by selecting the sprocket, and RE-PASTE your form markup. I know, redundant, but trust me on this one. Also, modify your gadget dimensions so it displays properly on the page. Save your settings and refresh the page.

Presto!

There you have it, a custom styled Google Docs form to use on your Google Sites page.

[styled_image lightbox=”yes” h=”327″ w=”750″ image=”/wp-content/uploads/2013/02/google-custom-form.png”]

Tags: