Custom Google Forms Template

A simple HTML template for creating a custom-designed form while using Google Forms to handle submissions.

Demo

See the template in action: Demo Form

Why I Made This

I was looking for a simple solution to use a custom form UI on top of Google Forms.

Google Forms is convenient, but sometimes its default interface doesn't fit the design or experience you want for a website.

I wanted something where I could:

• Design the form however I wanted
• Keep Google Forms as the backend
• Avoid building a separate API
• Avoid setting up a database
• Keep the whole thing simple and lightweight

So I made this template.

The idea is simple: use HTML/CSS/JavaScript for the frontend and let Google Forms handle the submission.

This makes it possible to create a form that looks like part of your website without having to build a complete form-processing system.

Features

• Fully customizable HTML/CSS
• Responsive design
• Google Forms integration
• No backend required
• No database required
• Client-side validation
• Custom success screen
• Character counter support
• Easy to deploy
• Single-file setup

Getting Started

1. Download the template

Clone the repository or download the project.

The template is intentionally kept simple:

custom-google-form/
└── index.html

There is no build process or dependency installation required.

2. Open the template

You can simply open index.html in your browser.

For local development, you can also run a basic HTTP server:

python3 -m http.server 8000

Then open:

http://localhost:8000

Connect Your Google Form

The template uses the Google Forms formResponse endpoint to submit data.

Find the form element in index.html:

<form
    action="YOUR_GOOGLE_FORM_RESPONSE_URL"
    method="POST"
>

Replace the action URL with the submission URL from your Google Form.

Map Your Fields

Google Forms assigns an entry.* ID to each question.

For example:

<input
    type="text"
    name="entry.123456789"
>

The name value must match the corresponding field in your Google Form.

Do this for every field you want to submit.

The important part is:

HTML field
     |
     v
entry.XXXXXXXXX
     |
     v
Google Form question

Once the field IDs are correctly mapped, the custom form can submit directly to Google Forms.

Customize the Design

Everything is contained inside index.html, so you can modify the template without installing a framework.

You can change:

• Colors
• Fonts
• Layout
• Form fields
• Labels
• Buttons
• Spacing
• Background
• Success message
• Responsive behavior

The CSS variables at the top of the file make it easy to change the primary colors.

:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --secondary: #8b5cf6;
}

Change these values to match your own website or brand.

Add or Remove Fields

You can add any fields supported by Google Forms.

For example:

<div class="form-group">
    <label for="company">Company</label>

    <input
        type="text"
        id="company"
        name="entry.YOUR_ENTRY_ID"
        placeholder="Enter your company"
    >
</div>

The important part is replacing:

YOUR_ENTRY_ID

with the corresponding Google Forms entry ID.

Deployment

Since this is a static HTML template, you can deploy it to any service that supports static websites or serve it directly from your existing web server.

There is no:

• Node.js server
• PHP backend
• Database
• API server
• Build step

required.

Important

When connecting the template to a new Google Form, make sure you update both:

1. The Google Forms formResponse URL
2. The entry.* IDs for your fields

The existing values in the example are tied to the original Google Form and should not be reused for another form.

No Collaboration

This is intentionally a small template project.

No collaboration is planned.

The goal is to keep it simple and useful as a starting point rather than turning it into a large project.

Queries & Suggestions

Although collaboration is not planned, queries and suggestions are welcome.

If you find something confusing, have a useful suggestion, or discover an issue with the template, feel free to raise it.

License

No specific license is currently included with this template.

If you plan to distribute or reuse it publicly, add a license that matches how you want others to use the project.

Made for anyone who wants a custom form without building a form backend from scratch.