Customize Google Docs forms with CSS injection

An undocumented trick lets you customize a Google Docs form by injecting CSS. Let's assume that the URL of your form is: https://spreadsheets.google.com/embeddedform?key=0Ato1MNFt5ld1cExhRTl0c1ZMcF8zcWZJRTNPSGhLQkE — You can add some new CSS rules as a value of the f parameter: https://spreadsheets.google.com/embeddedform?key=0Ato1MNFt5ld1cExhRTl0c1ZMcF8zcWZJRTNPSGhLQkE&f=;}body{font-size:14pt!important}.ss-q-title{color:green} Important: 1. the value has to start with ;} 2. you need to use !important for […]

An undocumented trick lets you customize a Google Docs form by injecting CSS. Let's assume that the URL of your form is: https://spreadsheets.google.com/embeddedform?key=0Ato1MNFt5ld1cExhRTl0c1ZMcF8zcWZJRTNPSGhLQkE — You can add some new CSS rules as a value of the f parameter: https://spreadsheets.google.com/embeddedform?key=0Ato1MNFt5ld1cExhRTl0c1ZMcF8zcWZJRTNPSGhLQkE&f=;}body{font-size:14pt!important}.ss-q-title{color:green}

Important: 1. the value has to start with ;} 2. you need to use !important for some rules to override existing values 3. check source code of form to find classes used by Google. For more parameters to customize Google Docs forms, check here.

About The Author

Deepak Gupta is a IT & Web Consultant. He is the founder and CEO of diTii.com & DIT Technologies, where he's engaged in providing Technology Consultancy, Design and Development of Desktop, Web and Mobile applications using various tools and softwares. Sign-up for the Email for daily updates. Google+ Profile.