Professional Contact Form – Custom Code Using Google Form Entry IDs

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

This form is useful for blogs, business websites, or any platform where users need to submit feedback, questions, or requests. The form is responsive, works on mobile and desktop, and automatically sends user inputs to a hidden Google Form.

The code uses HTML, CSS, and JavaScript to handle form submissions efficiently. The hidden iframe ensures that the user sees a success message without leaving the page.

Table of Contents

Google Form Setup

Before using this contact form, you need to create a contact form on Google Forms. I will guide you step by step, and you need to follow the instructions exactly as I explain. If you make any mistakes, your contact form will not work. So please read the steps below carefully and pay close attention.

Create a Google Form

1. Search on Google "Google Form".
2. Click on "Contact Information".
3. At the top, you’ll see "Contact Information" — here you can write "YourSite.com Contact Form".
4. Add Form description.
5. Click Address section, you will see a delete icon — delete address section.
6. Same, delete "phone number" section.
7. Replace "comment" name into "Write your message".

At the top, you will see these three sections:Questions, Responses, Settings.

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

An Excel-like sheet will open in front of you. Go back to Google Forms and refresh your browser. Now, in Google Forms, you will see "View in Sheet" — this means your responses are complete.

1. Click "Settings" section.
2. Click Responses and set as:

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. Then, do not make any changes and click the Publish button.
4. A popup will appear in front of you: "Publish form"
   "Responders: Anyone with the link" should be selected, then click the Publish button.
5. After this, on the right side of the published form, you will see Settings (three dots) — click on them.
6. Click 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 this part of the URL: https://docs.google.com/forms/d/e/1FAIpQLSfMUipJD25mp3lx_2OhklOMvztPWSfQeUWpGr5bEb-jsrVEDw and remove other code.
8. Go back to Google Form and click on Settings (3 dots) again.
9. Click Pre-fill form.

To complete the steps below, a desktop is required. If you want to use a mobile, search on YouTube how to enable inspect mode on mobile and proceed.

1. Click on the Name section and then right-click on the desktop.
2. Click Inspect button.
3. A screen like this will appear in front of you.

4. Find name="entry.00000000" in the HTML code section and copy it.
5. Select key CTRL+SHIFT+T and click Email section.
6. Again, find name="entry.1111111111" in the HTML code section and copy it.
7. Select key CTRL+SHIFT+T and click Message section.
8. Again, find name="entry.222222222" in the HTML code section and copy it.
9. Copy these 3 entry.id and paste them in Notepad.

Save the URL and entry IDs you copied in Notepad, then follow the next setup.

Install This Contact Form

Hopefully, you have already saved the "URL and entry IDs" in Notepad. Otherwise, you won’t be able to proceed. Below, you will find the HTML, CSS, and JS code. You need to follow the steps carefully and read them attentively.

Follow all steps

1. Copy HTML code.

<!-- 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 it into your web page.
2. Replace your URL and add /formResponse at the end. Use the ones you saved in Notepad.
3. Replace all three name="entry.id" values with the ones you saved in Notepad.

Note: Use the exact entry IDs you copied. Put the name entry ID in the name field, the email entry ID in the email field, and the message entry ID in the message field. If you don’t do this, it will not work.

1. Copy CSS code.

<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 it below the HTML.

If you want to change the graphics or design in the CSS, you can edit the CSS if you have coding knowledge, but do not change the "class , id".

1. Copy JS Code

<script>
 const formIframe=document.getElementById("form_iframe"),googleForm=document.getElementById("google_form"),contactForm=document.getElementById("contact_form"),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",3e3)},googleForm.submit()});
</script>

1. Paste it below the CSS code.
2. Save and view

Do not make any changes to the JavaScript code, otherwise this code will not work.

Where Can You Use It?

This contact form can be used on blogs, portfolio websites, small business sites, or any platform where you need to collect user messages. It’s perfect for feedback forms, inquiries, or support requests without the need for backend coding.

Professional Contact Form FAQ

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

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

How do I link my Google Form to a spreadsheet?

In Google Form, go to 'Responses' → 'Link to Sheets' → 'Create a new spreadsheet'. This will save all form submissions automatically in Google Sheets.

How can I display a success message after form submission?

The provided JavaScript automatically shows a success message without leaving the page. Ensure your HTML & JS code are copied correctly for this feature to work.

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

Edit the CSS section of the code to change colors, fonts, borders, and buttons. Do not change class or ID names, otherwise JavaScript functionality may break.

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

Add new fields in your Google Form, find their entry IDs via 'Inspect', and include them as hidden inputs in your HTML form with proper name attributes.

How do I ensure the form works on mobile devices?

The form is fully responsive by default. Make sure you keep the CSS intact and test on different screen sizes to ensure proper alignment.

Do I need a server to use this contact form?

No, the form submits data directly to Google Forms, so no server setup is required.

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 don’t need any backend, and users can submit information smoothly without leaving your page.

With the provided HTML, CSS, and JS code, you can quickly implement this form and start collecting messages from your visitors effectively.