Google Form Restyler

Edit the CSS of an embedded Google Form

What Is it?

Google forms are great, but your ability to edit Google Form's CSS is limited to the options that they provide. With Google form Restyler, you can embed a Google form on your page and have complete control over the CSS, and functionality of the form.

Demo »

Step 1.

Create your google form, and get the embed script by pressing Send » Send via < > » Copy. Then take the "src" parameter out of the iframe element. 

https://docs.google.com/forms/..../viewform?embedded=true

Step 2.

Add the following script tag on to your page instead of the iframe element: 

<script src="http://googleformrestyler.apixml.net/GoogleFormStyler.js"
        form="https://docs.google.com/forms/..../viewform?embedded=true">
</script>

Step 3.

Edit the CSS as you wish

<style>
.freebirdFormviewerViewFooterFooterContainer {
    display: none !important
}
</style>

Editing the functionality of the Google form

You can not only edit the CSS of a Google form once it is embedded into the page, but you can also edit the functionality of a Google Form. For example, by default, when you submit a Google form, it redirects back to Google. If you want to keep the user on your page, and do something else, here's some Javascript that you can use to change this behaviour; 

var ifrm = document.createElement("iframe");
ifrm.setAttribute("name", "swallow");
document.body.appendChild(ifrm);
ifrm.style.display = 'none';
document.forms[0].target="swallow";
var button = document.querySelectorAll("div[role='button']")[0];
button.addEventListener("click", function()
{
	alert('Here you can intercept the response');
}, true);

Language selection

Google may change the language of the form based on the IP address or preferences of the user, this service may interfere with this process, so it is good practice to force the language to that of your expected target audience by adding &hl=en after the querystring (en being english)