How to Customize Google docs Forms, CSS Styling Google docs Forms, Custom Validation & Success URL
Updated: February 28, 2014 - Google forms custom CSS - Customizing Google docs forms - Google forms email validation - Custom confirmation form
After spending way too much time researching all over forums and blogs on how to customize Google docs forms and how I could use my own CSS styling. I set out to create my own form that fully embellishes all that I wanted to accomplish. The Google docs form is great, but so limited when it comes to customizing it to match your own site and design. While we all love the ability to use Google docs and its spreadsheets sometimes we just can't have everything! Well, now we can. Using the URL that the Google docs form generates we place that into the fully W3C standard <form></form> code and bingo.
Well, there is a little more to it. Everywhere I read, everyone wants Google docs forms to have a custom redirect (success) URL instead of the very un-inviting one we all have seen. So using my Custom Google docs form and styling you can set whatever redirect URL you want. As far as CSS styling, you can make this Standard form code match your design.
If you add more fields or remove some no problem. Form validation can be set for each field or for only certain desired fields; it's your choice. This Google docs form is totally customizable with full CSS control and posts very nicely to your desired Google docs spreadsheet.
- Setup your typical Google docs Form in Google Drive, open the published Form from the link Google Drive provides you with (create spreadsheet first).
- Use your orginal Google docs form HTML "page source" to get URL & form "field names" & "id's" that it generates and match fields to my form HTML code.
- My code does all the rest including validation and a success URL (confirmation page) of your choice.
- Tested and works in all browsers.
- Once you see the methodology you'll understand how to add more fields or use less and make some fields required * while others not.
- All form elements fully CSS controlled and you control the layout. W3C standard <form></form> code.
* I have not tested "multi-paged" forms, I'm sure it would work but would require the additional adjustments to my code.
You could probably program it yourself and spend several long hours or you can get the files for $4.99. Sorry, don't mean to sound like I'm wrangling over a few dollars, but it did take me a lot of programming and testing. So to help further the cause, go ahead and buy.
Author: John Hooper - Web Design: GoHooper Web Design