Home > Uncategorized > #Google Form restyler – edit the #CSS of Google Forms

#Google Form restyler – edit the #CSS of Google Forms

blog

Google forms give you a really easy way of asking your users questions, and storing the answers in a google sheet. The big downside, is that you loose alot of control over the way your page is displayed, and you can end up with an iframe in the middle of the page that looks really out of place.

This is where http://googleformrestyler.apixml.net/ can help.

You simply follow these three steps.

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. Which should appear something like this;

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

Step 2.

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

http://googleformrestyler.apixml.net/GoogleFormStyler.js

Step 3.

Edit the CSS as you wish

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

Now, if you want to change the functionality of the page, you can also hack the javascript. 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);

What this javascript does, is that it creates an invisible iframe called “swallow”, then changes the form target to output to this hidden iframe. It then attaches to the click event of the submit button and can run custom javascript once the submit is pressed.


Now, that’s the end-user description, How does this system work, let’s look at the inner workings, specifically, the Javascript that gets loaded:

http://googleformrestyler.apixml.net/GoogleFormStyler.js

This contains the following script

(function (XHR) {
    var open = XHR.prototype.open;
    XHR.prototype.open = function (method, url, async, user, pass) {
        this._url = url;
        if (url.indexOf("gstatic.com") !== -1 ||
            url.indexOf("docs.google.com") !== -1) {
            url = "http://googleformrestyler.apixml.net/corsProxy.aspx?base64Url=" + btoa(url);
        }
        open.call(this, method, url, async, user, pass);
    };
})(XMLHttpRequest);
(function() {
    var script = document.currentScript ||
        /*Polyfill*/ Array.prototype.slice.call(document.getElementsByTagName('script')).pop();
    var URL = script.getAttribute('form');
    var xhr = new XMLHttpRequest();
    xhr.open("GET", URL);
    xhr.onload = function() {
        document.write(xhr.response);
    };
    xhr.send();
})();

The first part, hijacks the Ajax functionality on the page, and if the Ajax request is bound for Google (gstatic.com or docs.google.com), and will route it instead via a page called corsProxy.aspx

The second part, makes an ajax request to fetch the contents of the url specified in the form attribute of the script tag, and then document.write’s it out to the page.

CorsProxy.aspx is a ASP.NET script that proxies the request, and returns the result, with the CORS header set.

protected void Page_Load(object sender, EventArgs e)
{
var base64Url = Request.QueryString[“base64Url”];
var data = Convert.FromBase64String(base64Url);
var url = Encoding.ASCII.GetString(data);
var wc = new WebClient();
Response.AppendHeader(“Access-Control-Allow-Origin”, “*”);
var bResponse = wc.DownloadData(url);
Response.BinaryWrite(bResponse);
}

 

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: