How To Make A Custom Template In Google Forms

Websites created with static site generators like Jekyll or Hugo are on the ascent. Their popularity is not surprising. They're fast and secure, every bit there's no information on the server side. The web server builds and serves web pages on the wing. Y'all don't have to worry about databases and server-side security.

Y'all can write your posts in Markdown or HTML that gets rendered nicely with the assist of templating engines (Jekyll uses Liquid, while Hugo uses Become Templates). Everything is fine until you want to add together dynamic functionality to your static site, such as a Contact class. But, you don't have to worry, as yous can utilise an external backend similar Google Forms to implement such features.

Use Google Forms to Embed a Contact Form

Incoming information collected by forms need to be candy by a server and stored in a database. You tin discover many online tutorials that recommend Formspree as a free class backend for static websites. Nevertheless, the free version of Formspree sometimes bumps into problems like not forwarding form submissions to your email accost. As an culling, you can use Google Forms to add custom forms to your Jekyll, Hugo, or another static site.

In this guide, we'll bear witness you lot how to create and add a Contact form to a static HTML folio (that you tin can later on convert to a Jekyll or Hugo template). However, Google Forms is not limited to Contact forms; you lot can create any kind of custom forms or surveys with it. Your users won't even know that yous're using Google Forms, as the form yous create can be completely integrated with your site's blueprint!

Google Forms Homepage

1. Create a New Form on Google's Platform

Sign in to the Google Forms platform with your Google account. You lot tin can either start a new course from scratch or use Google'due south pre-fabricated templates. As Google has a fairly expert Contact course template, we'll use that rather than starting with a blank template.

Click the template called "Contact Information" in the Template Gallery on peak of the page.

Google Forms Template Gallery

The default "Contact information" template has three required fields (Name, Electronic mail, Address) and ii optional ones (Phone number, Comments). We'll keep Name and Email but replace the residuum with an optional Subject and a required Message field.

You can delete any field you don't want to use by clicking the footling recycle bin icon that shows up afterwards you click on the field.

Google Forms Delete Field

And so, y'all can add together the new input fields past clicking the + icon in the floating carte du jour on the right. You tin can choose from diverse input types such as brusk answer, checkbox, dropdown, paragraph, file upload, and others.

For our custom Subject field, we employ the short answer input blazon. For Bulletin, we choose paragraph as input type, that allows users to enter a multi-line bulletin. We besides set the latter to required using the petty switcher at the lesser of the input box.

Google Forms Add New Form Fields

By default, Google Forms require respondents to sign into their Google accounts before they fill up in the form. All the same, we don't want this behavior when we embed the grade into our website. So, click the gear icon next to the Transport button on the acme of the folio to access the Settings and uncheck the "Limit to one response" option.

Google Forms Remove Required Login

Save your settings and your Google Form is done. You tin test it by copying-pasting the URL into another browser where y'all are not logged into your Google Account. Hither, you can fill up in the form with test data.

Your test message will bear witness up in the Responses tab where you can make up one's mind what to practice with each response (download, impress, delete, etc.).

Google Forms Test Message

two. Create a Similar Form on Your Own Site

Now, you demand to mirror the Google Course you created in the previous step so that it can forwards data from your website to the Google backend. Create a basic HTML form with the same course fields: Name, E-mail, Field of study, and Bulletin.

<grade activity="" method="post">       <label>Name*</characterization>       <input type="text" placeholder="Proper name*" proper name="" required>          <label>Email Address*</label>       <input type="email" placeholder="Email address*" proper noun="" required>            <label>Bailiwick</label>       <input type="text" placeholder="Subject" name="">            <label>Message*</label>       <textarea rows="5" placeholder="Message*" name="" required></textarea>             <button blazon="submit">Send</button> </class>

The HTML doesn't have to be exactly the same as Google'south, but it needs to have exactly the same form fields. Yous can add your own CSS classes to the form so that information technology'll match your site's design.

Information technology'll exist the proper name and action fields that volition tie your on-site course to the Google backend.

3. Add together proper noun and activity Values to Your On-site Form

Google uses custom name and action values to identify each class. The activity attribute belongs to the <form> tag, while the name attributes belong to the input fields. And then, you need to find these custom values and add together information technology to the HTML.

Log out of Google (or use a different browser), as if you stay logged in it'll exist hard to do the lawmaking inspection (Google adds a lot of extra stuff to logged-in users). Load your Google Form using the class's URL and inspect it using your browser's developer tools. In Firefox, y'all can practise that by right-clicking the course and clicking the "Audit Element" option. In Chrome, you need to choose the "Inspect" option after right-clicking the element.

You lot need to find the <form> tag in the HTML inspector and copy the value of the action attribute into your custom HTML.

Inspect Custom Google Form

Y'all need to do the same affair with your four input fields, likewise. But now, you don't have to copy the action attribute only the proper noun attribute of each input field.

Inspect Google Forms Input Fields

Insert the customaction andname values into your HTML:

<form action="https://docs.google.com/forms/d/e/safdalfjaISv65R6J11H0o_7FadflUm/formResponse" method="post">       <label>Name*</characterization>       <input type="text" placeholder="Proper name*" name="entry.895563655" required>          <label>Email Address*</label>       <input blazon="email" placeholder="Email address*" name="entry.772189125" required>            <characterization>Subject area</label>       <input type="text" placeholder="Field of study" name="entry.203645991">            <label>Message*</label>       <textarea rows="5" placeholder="Message*" name="entry.190021963" required></textarea>             <push type="submit">Transport</button> </form>

At present, your on-site course is bound to the Google backend. You can examination information technology past entering some test data into your course. Sign dorsum to Google Forms and check if your test response has arrived.

Google Forms Second Test

4. Redirect to a Custom Thank you Page

While doing the test, you've surely noticed that your site has redirected the user to Google'south default thank you page. If you'd rather ship your respondents to your custom thank y'all page add the following code to the peak of your form, correct before the <form> tag:

<script blazon="text/javascript">var submitted=imitation;</script> <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"  onload="if(submitted) {window.location='thankyou.html';}"></iframe>  <form action="https://docs.google.com/forms/d/e/safdalfjaISv65R6J11H0o_7FadflUm/formResponse"  method="post" target="hidden_iframe" onsubmit="submitted=true;"> ... </grade>

You need to add together the path to your custom cheers page as a value of the window.location() property (information technology'south 'thankyou.html' in the example above).

Note that yous likewise have to add thetarget="hidden_iframe" and onsubmit="submitted=true;" attributes to the <form> tag.

5. Configure Your Class Settings

You lot can farther adjust your course settings to ameliorate manage your incoming responses. For example, yous can get email notifications for each new submission.

Navigate to the Responses tab, click the iii-dot icon, and check the "Become email notifications for new responses" option. It volition transport an email notification to the email tied to your Google business relationship (usually a Gmail address) whenever a new respondent submits your Contact grade.

Google Forms Get Email Notifications

You can also collect your responses in a Google Spreadsheet. To do so, select the "Select response destination" and specify the spreadsheet that should collect the data (or create a new one). You can download the responses as a .csv file or print them with a click, too.

Wrapping Upwardly

Static websites are splendid for anyone who needs a elementary web presence but doesn't want to use a CMS similar WordPress or pay for hosting. With external backends, you can also add dynamic features to your static site.

Google Forms provide you lot with a free solution to embed a custom Contact course to your website. If you want to take a step farther in form edifice, read our tips on how to build better Contact forms, too. And, if you'd rather stick to dynamic sites, don't miss out our guide on how to increase server security, either.