Google Forms is brilliant!
But the layout and styling possibilities simply suck.
Have you tried the Google Forms service yet? I did and it is pretty sweet. Their servers are always available, speedy and secure. The data is processed instantly and presented in a neat summary.
Browsing through the individual submit records is easy. Just click the ‘Individual’ tab or on any of the specific records directly.
Exporting all data to a spreadsheet is a single click away. This feature opens up a whole slew of additional presentational and analytical possibilities.
You can get email notifications when responses are submitted and the list goes on….
Oh, did I mention the service is free!?
There are a few things that would be nice to have, but overall the backend is pretty solid.
So, what’s not to like? The forms themselves!!
Studies show that well designed forms with great user experience increase the form completion ratio dramatically, in some cases with over 50%.
The Google Forms are not good looking. There is no control over typography, input styling, backgrounds, nothing. None of the good things that Google has been writing about in their Material Design series can be applied to these forms, which can negatively impact your completion ratios.
The biggest turn off is the lack of control over the layout. No matter how much horizontal space is available, the input sections are always placed in a single column — boring!
To make things worse, the same is done for input option lists such as radio buttons and checkboxes —they will always stack too.
Can you imagine having eight options to choose from? The rigidly stacked layout makes even the simplest of forms seem really really long. Unappealing and long…people might not even start filling something like that out!
And here’s the other thing, which self respecting website would want to embed such a form? What carefully branded site would want to be tainted by that big white spot? It would be like slapping a pig on lipstick (I know…). Anyway, if I were a cool site I would rather die than being the home for one of these horrendously looking forms!
Is there a way to have Google Forms’ ease and functionality and still present a good looking form to the user? Absolutely, let’s take a look.
Custom designed forms to the rescue.
You may have read my article where I showed how a standard Mailchimp signup form can made to be responsive and fit a website’s look & feel using a bit of CSS. Just one peek at the HTML structure of a Google Form will quickly tell you that route looks rather closed. By the time we get to the first input field (Email Address), we already passed twenty <div> containers and are ten levels deep into the HTML….Aaarrgghhh!
In the image below the actual Email Address input field is close to the bottom, just below the <! —- THE EMAIL INPUT-- >comment. And that is only the first input field.
But showing the craziness of this code is not the only reason I added that screenshot. It also gives a few hints on how to connect a custom form to the Google service. That’s right, the forms don’t have to be created within the Google Forms Environment:
Custom built, and highly styled forms can submit to the Google Forms service, in a similar way I showed how to submit data from a custom form directly to Mailchimp.
We will get into that in a little bit, first let’s talk about why using a custom designed form is the right thing to do.
The case for using custom designed forms.
Going into the intrinsics of coding and styling a web form from scratch is beyond the scope of this article, for now please believe me that creating something sweet as the design below is totally possible.
There is something important at work here: research indicates that these types of selectable images are among the most engaging question types. These visually attractive click or tab actions stand in big contrast to the very plain stacked checkbox design we saw in the Google Form above. Which would you rather click?
Increased engagement will help form completion ratios, so I would always go with a designed form. Something attractive. Something that grabs user’s attention. A form with a layout, images, typography and color scheme that fit the look and feel the website and brand. A form that is interesting and does not create the typical user reaction: “Ugh, do I really have to fill that out?”
Studies show that well designed forms with great user experience increase the form completion ratio dramatically, in some cases with over 50%. Well designed forms do not just look better, they also work much better — you will simply get way more out of your forms!
Hand coding a form like the above is certainly possible, but you have to know what you are doing. Personally I find that I am more creative and can focus on the design aspects when using a visual tool. Unfortunately form services like Wufoo and Jotform allow for very little design freedom as well. The only app I know of that is fit for this job is Form Designer. (Disclaimer, I work with the folks over at CoffeeCup to help create this unique app.)
The resulting code is super clean and way way leaner than what the form services, especially Google Forms, produce.
In the above code snippet the first input, which was twenty levels down and ten levels deep in the Google code, now is only five levels down and 3 levels deep. All we have to do is make this form submit the data to Google Forms.
Connecting a custom-designed form to Google has two simple parts:
- Connect the form action,
- Connect the inputs
Connecting the form action
The answer to the connectivity question lies in the two code screenshot we looked at above: the big one that shows part of the Google code, and the small one that shows the Form Designer output. Both start with the <form> element which includes the action attribute. In the small screenshot with the code of the custom form, the value of the action attribute https://docs.google.com/forms/d/e/1FAI… is the same as the value of that attribute in the Google code.
And that’s it!
Yep, that action URL is all we need to have our custom form submit to the backend of the Google Forms Service.
To find the value of that attribute right-click on the Google Form in the browser and select Inspect.
The action URL can then be found in the code window that (usually) opens at the bottom of the browser.
You can copy the URL from there and paste it in the corresponding place (action=”URL here”) in your custom form. If you are using Form Designer to create your custom form you can paste the URL in the Action box.
Connecting the form inputs
The only thing remaining is making sure the form puts the data in the right spots in the Google backend. Basically we have to ‘map’ the input fields in our form to Google. This can be done using the name attributes.
In the small code screenshot you can find name=”entry.2118042119" in the first <input>. Again this value can be obtained by ‘inspecting’ the corresponding input field in the Google Form.
As can be seen from the screenshot (in the middle of the second highlighted line), the name value for the Your Name input isentry.2118042119 . Again, add this value to the corresponding name attribute in your custom form and upon submit the date will be entered in the right place in your Google Forms backend.
Being able to submit directly to a spreadsheet is great. And it’s free! No more Wufoo.
The process works the exact same way for all other fields. In case you form uses Checkboxes or Radio buttons, the value attribute needs to be the same as well. With just a bit of right-clicking, copying and pasting your custom form will be fully functional fast!
What? You need to eat pudding before you believe? Alright, here’s the deal:
Head over to the demo form right here. If you submit it you will see that this totally works: that beauty serves as the front-end for this ugly duckling. As a bonus I (well…Google can do it automagically) will reply with an email that includes the download link for that cool form template. Both the code files and Form Designer project file will be included. How’s that for a late Halloween treat!
And it’s a wrap folks— time to let your forms flourish too!
Also, if you want me to write about something specific or contact me, please add your comment to the demo form I linked to above.
