Create a Contact Form Using Google Forms Entry IDs: HTML, CSS, JS Guide

Professional Contact Form Using Google Forms Entry IDs is a simple and effective solution to collect user messages or queries on your website. It allows you to receive submissions directly to your Google Form while providing a clean, user-friendly, and professional interface on your site.

This form is perfect for blogs, business websites, or any platform where users submit feedback, questions, or requests. It’s fully responsive, works seamlessly on mobile and desktop, and automatically sends user inputs to a hidden Google Form without redirecting users.

The code uses HTML, CSS, and JavaScript to handle submissions efficiently. A hidden iframe ensures users see a success message without leaving your page.

Note: Follow the steps below carefully to avoid errors. This guide assumes you have a Google account and basic HTML/CSS knowledge.

Table of Contents

Google Form Setup

Before using this contact form, you need to create a Google Form. Follow these steps exactly as described to avoid issues. Any mistakes will prevent the form from working, so read carefully.

Create a Google Form

1. Search on Google "Google Form".
2. Click on "Contact Information" template.
3. At the top, set the form title to "YourSite.com Contact Form".
4. Add a form description, e.g., "Submit your queries or feedback."
5. Click In the Address section, click the delete icon to remove it.
6. Delete the "Phone Number" section similarly.
7. Rename the "Comment" field to "Write your message".

At the top, you’ll see three tabs: Questions, Responses, Settings.

1. Click the "Responses" tab.
2. Click "Link to Sheets".
3. Select "Create a new spreadsheet" and click the Create button.

An Excel-like Google Sheet will open. Return to Google Forms and refresh your browser. You should see "View in Sheets" under Responses, confirming the setup.

1. Click the "Settings" tab.
2. Under Responses, configure as follows:

Collect email addresses	Do not collect
Send responders a copy of their response	Off
Allow response editing	Disable
Limit to 1 response	Disable

1. Click Presentation.
2. Enable "Show link to submit another response" and disable all other options.
3. Click the Publish button without making further changes.
4. In the popup, select "Responders: Anyone with the link" and click Publish.
5. On the published form, click Settingson the right.
6. Click HTML View Embed HTML.

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfMUipJD25mp3lx_2OhklOMvztPWSfQeUWpGr5bEb-jsrVEDw/viewform?embedded=true" width="640" height="724" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

7. Copy only the URL part: https://docs.google.com/forms/d/e/1FAIpQLSfMUipJD25mp3lx_2OhklOMvztPWSfQeUWpGr5bEb-jsrVEDw.
8. Return to Google Form and click Settings again.
9. Click Pre-fill form.

To complete the steps below, a desktop is required. For mobile, search YouTube for how to enable inspect mode on mobile and follow along.

1. Click the Name field, then right-click and select Inspect.
2. A developer console will appear.

3. Find name="entry.00000000" in the HTML and copy it.
4. Press Ctrl+Shift+T, click the Email field, and find name="entry.1111111111". Copy it.
5. Repeat for the Message field, find name="entry.222222222", and copy it.
6. Save all three entry IDs in Notepad along with the form URL.

Note: Save the URL and entry IDs carefully. Incorrect IDs will break the form.

Install This Contact Form

You should have the form URL and entry IDs saved in Notepad. Below is the HTML, CSS, and JavaScript code to create the contact form. Follow the steps carefully.

Follow all steps

1. Copy the HTML code below.

<!-- Hidden Google Form -->
<iframe hidden id="form_iframe" name="form_response"></iframe>
<form hidden id="google_form" action="https://docs.google.com/forms/d/e/1FAIpQLSfOmgLuHYsWEQMMYBD0BEWFe7AruNAFeXixsFxq62FA/formResponse" method="POST" target="form_response">
  <input type="hidden" id="i_email" name="entry.00000000">
  <input type="hidden" id="i_name" name="entry.1111111111">
  <input type="hidden" id="i_message" name="entry.222222222">
</form>

<!-- User Visible Form -->
<div class="cfBox">
  <form id="contact_form">
    <input type="text" id="cf-a-name" placeholder="Name" required>
    <input type="email" id="cf-a-email" placeholder="Email *" required>
    <small>A valid email address is required.</small>
    <textarea id="cf-a-message" rows="4" placeholder="Message *" required></textarea>
    <small>Message field cannot be empty.</small>      
    <div class="btns">
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
    </div>
    <div id="cf-success" class="cfSuccess">Form submitted successfully!</div>
  </form>
</div>

1. Paste the HTML into your webpage.
2. Replace the form URL with your Google Form URL, adding /formResponse at the end (e.g., https://docs.google.com/forms/d/e/.../formResponse).
3. Replace the three name="entry.ID" values with your saved entry IDs for Name, Email, and Message.

Note: Use the exact entry IDs from Notepad. Match the Name ID to the name field, Email ID to the email field, and Message ID to the message field. Incorrect IDs will break the form.

1. Copy the CSS code below.

<style>
  .cfBox {max-width: 480px; margin: auto; font-family: system-ui, sans-serif; font-size: 16px; color: #2c3e50;}
  .cfBox input, .cfBox textarea {width: 100%; padding: 12px; margin: 10px 0 5px; border: 1px solid #ccc; border-radius: 8px; background: var(--iB); font-size: 16px; box-sizing: border-box; transition: border-color 0.2s;}
  .cfBox input:focus, .cfBox textarea:focus {border-color: #1976d2; outline: none;}
  .cfBox small {font-size: 14px; color: var(--bodyC); display: block; margin-bottom: 8px;}
  .cfBox .btns {display: flex; gap: 10px; margin-top: 12px;}
  .cfBox button {padding: 10px 18px; font-size: 15px; border-radius: 6px; border: none; background-color: #1976d2; color: white; cursor: pointer;}
  .cfBox button[type="reset"] {background-color: #1976d2; opacity: 0.9;}
  .cfSuccess {margin-top: 10px; color: green; font-size: 14px; padding: 6px 10px; border-radius: 6px; display: none;}
</style>

1. Paste the CSS below the HTML code.

If you want to customize the design (colors, fonts, etc.), edit the CSS but do not change class or ID names to avoid breaking the JavaScript.

1. Copy the JavaScript code below.

<script>
const formIframe = document.getElementById("form_iframe");
const googleForm = document.getElementById("google_form");
const contactForm = document.getElementById("contact_form");
const successMsg = document.getElementById("cf-success");

function updateGoogleForm() {
  googleForm.querySelector("#i_name").value = contactForm.querySelector("#cf-a-name").value;
  googleForm.querySelector("#i_email").value = contactForm.querySelector("#cf-a-email").value;
  googleForm.querySelector("#i_message").value = contactForm.querySelector("#cf-a-message").value;
}

contactForm.addEventListener("submit", (e) => {
  e.preventDefault();
  updateGoogleForm();
  formIframe.onload = () => {
    successMsg.style.display = "block";
    contactForm.reset();
    setTimeout(() => successMsg.style.display = "none", 3000);
  };
  googleForm.submit();
});
</script>

1. Paste the JavaScript below the CSS code.
2. Save and preview your page.

Note: Do not modify the JavaScript code, as it may break the form’s functionality. Test the form by submitting a sample entry to ensure it works.

Contact Form Code Generator

Enter your Google Form details below to generate a ready-to-use HTML contact form code instantly.

Where Can You Use It?

This contact form is ideal for blogs, portfolio websites, small business sites, or any platform needing user input like feedback, inquiries, or support requests. It requires no backend coding, making it perfect for static sites.

Professional Contact Form FAQ

How do I find the entry IDs for my Google Form?

Open your Google Form on a desktop, right-click each field (Name, Email, Message), select 'Inspect', and find name="entry.XXXXXXX". Copy these IDs for your HTML form.

How do I link my Google Form to a spreadsheet?

In Google Forms, go to 'Responses' → 'Link to Sheets' → 'Create a new spreadsheet'. This saves submissions automatically in Google Sheets.

How can I display a success message after form submission?

The provided JavaScript shows a success message without redirecting. Ensure HTML and JS code are copied correctly.

How do I customize the form design to match my website?

Edit the CSS (colors, fonts, borders) but keep class and ID names unchanged to maintain JavaScript functionality.

How can I add extra fields like phone number or address?

Add fields in your Google Form, find their entry IDs via 'Inspect', and include them as hidden inputs in the HTML form.

How do I ensure the form works on mobile devices?

The form is responsive by default. Test on various screen sizes and keep the CSS intact for proper alignment.

Do I need a server to use this contact form?

No, the form submits directly to Google Forms, eliminating the need for a server.

Related Posts

Final Thought

Google Form Contact Form is a simple, clean, and responsive way to collect user messages on any website. By integrating Google Forms, you avoid backend coding, and users can submit information seamlessly without leaving your page.

With the provided HTML, CSS, and JS code, you can quickly implement this form and start collecting messages effectively. Try it on your site and share your feedback in the comments below!