A Google form is often used as a survey or questionnaire to give out to many people to fill out. However, Google form doesn't allow much customization. It only allows a custom header banner, background color, font family, and that's about it.
What if you want each question on its own line rather than spreading across several lines? What if you want to rearrange the layout to your liking? You can't do it unless you build a custom webpage.
The goal is to build a custom front end for a Google form you've already created, and still use Google's back end to process form results and generate reports. It's useful for surveys and questionnaires. So it means you only need to host a webpage somewhere. You don't need to build your own database or write your own reports.
If you are trying to customize the look and feel of a Google survey or Google questionnaire, read on to see how to fully modify or change a Google form's CSS styles.
Get the form action URL
First, you need the form action URL which looks like this:
https://docs.google.com/forms/d/e/<some very long string of characters>/formResponse
You can find it in the Google form's source code. Simply look for keyword "<form" in the Google form's source code. So your custom form is something like this:
<form action="https://docs.google.com/forms/d/e/<some very long string of characters>/formResponse" target="_self" method="POST">
Get the input name of each input field
Google adds a lot of markup for various purposes, but you only need the "name" attribute of each input field. The name attribute looks like this:
entry.1234193810
Now you can build your own HTML form after collecting the "name" attribute of each input field you need. Usually the question is some text, and the answer is the input field. So you are basically collecting the name attribute of each field where the respondent is supposed to fill in their answer.
Apply your own CSS rules
Since this is your custom HTML webpage with your custom HTML form, you can pretty much do whatever styling you want.
How about form validation?
If you use form validation on your original Google form, make sure you implement the same thing on your custom form. It doesn't need to be fancy; it just needs to make sure that bad values are not submitted. Otherwise, when someone submits a bad value, they'll be redirected to the original Google form with the error highlighted, which is not what you want.
That's it!
I've built a custom Google form this way. You can use it as an example of a customized Google form. Here's the sample Google form survey built this way: http://www.jet-opto.com.tw/tc/volvo-survey.php
Questions? Let me know!
Posts
