Create a Custom Designed, Client-side Form Using Google Forms

Published on Wednesday, May 31, 2017 at 1:00 PM EST

This tutorial will show you how to create a custom designed form using Google Forms, that lets you use it as a client-side form with any design or styling that you choose and no Google branding visible when the user has JavaScript enabled. Users without JavaScript will be redirected to a Google response page after form submission. Having a form like this would be a great, easy option for a variety of situations, with two perfect examples being a contact form on a site you’re hosting on GitHub Pages or in a decentralized, client-side application. In both examples, you can’t run server-side code, so a free option like this is nice.

Making a Form with Google Forms

You’ll need to make a form using Google Forms to get the required variable information, and to set up the Google Sheets spreadsheet where responses will be saved. Start by going to the Google Forms page and log in with your Google account.

Under the start a new form section, select blank to create a new form. Enter your form title and description at the top of the form, and name your form in the top left corner of the page. Normally, the title and description would be shown to the user on the form page that Google creates for you, but since we want to host the form with custom styling and no Google branding, they’ll just serve to identify your form when you’re managing it using Google Forms. You can set a title and description on your final form just like you would with any other custom form that you make.

Google Forms calls the form fields questions, but from here on I’ll refer to them as fields. Click the plus icon on the right navigation menu to add a field to your form. Enter the field name and choose the field type. Google Forms offers various field options like making a field required or performing some type of data validation on the field, but note that most of these options won’t be included in your custom styled form. Enabling any of these options in Google Forms shouldn’t cause any issues, so feel free to turn them on, but if you want a field to be required or have some type of data validation then you should do so using HTML and JavaScript techniques just like you would with any other custom form that you make.

Repeat this process to create any other fields that you want to use on your form. Once you’ve gotten all of your form fields created, switch from the questions pane to the responses pane and you can turn on email notifications and set a destination spreadsheet where responses will be saved in Google Sheets.

Now that you’ve created your form and set it up in Google Forms, we’ll proceed to collect the necessary information to create a self-hosted version of the form. Click the eye icon in the top right corner of the Google Forms page to open up a preview of the form you created. This is the Google hosted version of your form, complete with mandatory Google branding.

Getting the Required URL and Element Names

You will need the URL for your form and the name for each of the fields in your form. You can find these by viewing the source code of the preview page for your form. To find the form URL, search for “formResponse” without the quotes in the form preview source code and you’ll see a URL like, https://docs.google.com/forms/d/e/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/formResponse with the X characters being letters and numbers that are unique to the URL for your form. To find the field names, search for “entry_” without the quotes in the form preview source code and find all of the names, like “entry.1234567891”, for every form field that you made. There will be one unique name for each form field in your form. Once you have these details, you’re ready to plug them into whatever form design you want. We’ll walk through a basic example in the next section.

Setting Up Your Form

With your form URL and field names ready, you can place them in your custom form that uses any design that you’d like and can be run entirely client-side. A basic, bare-bones example that just uses line breaks for styling and will always redirect the user to a Google response page is included below, and a more complete example that uses Bootstrap for styling and includes a JavaScript redirect to avoid any Google branding can be found here.

In both of these examples, you would replace the form action attribute and the name attributes for each field with the correct values that you obtained from your Google Forms preview source code. Besides using Bootstrap for styling, the major differences in the second, more complete example are the inclusion of a warning when the user doesn’t have JavaScript enabled, and a JavaScript and non-JavaScript version of the form, with one or the other displaying depending on whether JavaScript is enabled or not. If JavaScript is enabled, the form will redirect to http://www.example.com/ or any other page that you set. If JavaScript isn’t available, then the user will be redirected to a Google response page.

<form action="https://docs.google.com/forms/d/e/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/formResponse" method="POST">
	First Name:<br>
	<input type="text" name="entry.1234567890" value="" required />
	<br>
	Last Name:<br>
	<input type="text" name="entry.1234567891" value="" required />
	<br>
	Email Address:<br>
	<input type="email" name="entry.1234567892" value="" required />
	<br>
	Phone Number:<br>
	<input type="text" name="entry.1234567893" value="" required />
	<br>
	Message:<br>
	<textarea name="entry.1234567894" required></textarea>
	<br><br>
	<input type="submit" value="Submit">
</form>