Step One

Create your form

Start by heading to Google Drive and creating a new form. Their new form editor is sleek and makes it almost fun to create a good looking form. While the standard Google forms are now a lot prettier, we still don’t want the Google branding on our website.

Note: If you plan on using radio buttons or check boxes, you will need to use the old Google forms editor as the new one uses javascript for these input fields. To go back to the old editor, click the option on the bottom left of the screen.

Once you’ve created your form and it has all of the fields you want, (I’ll be asking for your name and sock preference) you’re ready to press send and push your form live!

The Google form send dialogue

Grab the link to your form and open it up in another tab to preview your form.

Step Two

Grab the form HTML

Paste the form link into your browser and open up dev tools so that we can start getting into the nitty gritty markup code. In your dev tools, copy the form tag and paste that into your favorite code editor (I personally like Atom).

copy this form tag!

Once your code has been pasted into your code editor, add some html, header, & body tags, save it as an HTML file and run it in a browser to make sure everything is there. Go ahead and test your form to make sure it functions how it’s supposed to.

How a Google form looks with no CSS

Fill out all of the fields, click submit, and check the results in Google Drive to make sure it posted correctly.

Response Google workbook

If all is well, and the form posts, we’ll now have to remove the redirect to the default Google ‘Thank you’ page…

Step Three

Change form redirect

There are a lot of ways to do this, but today we’ll keep it simple and use some very basic javascript. The first thing we have to do is to create a hidden iframe on the page with an id=“secret-frame” and a style=“display: none;” (to make it hidden). Then we change the target attribute on the form tag to match the id of the new iframe (<form target=“secret-frame”>). Adding a target to an on page element prevents the form from redirecting to the URL it’s posting to.

Now we’ll add a simple script to listen for when the submit button is pressed that will redirect to whatever page we want it to. See the code below for details.

If you’d rather the page not redirect and show an alert dialogue, use the code below instead

Either method will prevent the Google ‘Thank you’ page from appearing!

Step Four

Styling the form

As you saw when testing, your form is going to look a little uhhh… ugly! But that’s okay! Because now we have full reign to customize how we want without any of the Google branding taking away from our website!

Personally, I like to strip away as much of the html tags as possible in the form and change the classes so that it functions with the Bootstrap framework.

One word of caution is to not tamper with any of the attributes other than ‘class’ in the input or form tags.

From here, I can paste this code onto any site I’m working on using that is using the Boostrap framework and immediately start collecting feedback from users on the site!

The same form utilizing the bootstrap framework

Now instead of having to manage a database, learn PHP or SQL, or deal with Google’s branding, you have a form on your site that functions well and posts to an easy to use spreadsheet!