google-docs-form-css-customization

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.

Now, Google docs forms already has "Validation" but the moment we go and try to style the form fields ourselves then we lose that important validation (* required fields). So I went ahead and programmed that as well. It even will detect certain criteria in the email address to be sure you have at least a good shot in collecting a properly formatted email. Everything is JavaScript based with a robust easy to understand and customize according to your needs.

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.

  1. Setup your typical Google docs Form in Google Drive, open the published Form from the link Google Drive provides you with (create spreadsheet first).
  2. 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.
  3. In the JavaScript file match the same HTML field names e.g. ["XYZ"].value
  4. My code does all the rest including validation and a success URL (confirmation page) of your choice.
  5. Tested and works in all browsers.
  6. Once you see the methodology you'll understand how to add more fields or use less and make some fields required * while others not.
  7. All form elements fully CSS controlled and you control the layout. W3C standard <form></form> code.
  8. My code is JavaScript based.
  9. Very basic HTML, JavaScript, & CSS skills are needed when matching Google docs field id's & to slightly customize form with additional required fields etc.

* 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.

 

 

Tags: customizing google forms, google form customize, google spreadsheets, customize google forms, google forms customize, google docs forms customize, custom google forms, custom google form, customize google docs forms, google docs forms, google docs form custom theme, google spreadsheet forms customize, google forms css customization, google forms validation, custom google forms confirmation page, google drive forms custom css
Author: John Hooper - Web Design: GoHooper Web Design