📝 Custom Google Forms

A lightweight, beautifully styled HTML/CSS contact form that uses Google Forms as a free, serverless backend. Build fully custom-branded forms without relying on standard Google Forms styling or embedded iframes.

---

✨ Features

• 🎨 100% Custom UI & Styling: Floating labels, clean animations, and a stylish animated button.
• ⚡ Zero Backend Code: Direct integration with Google Forms (formResponse endpoint) — no PHP, Node.js, or server setup required.
• 📊 Spreadsheet Integration: All responses automatically record into Google Sheets with timestamps.
• 📱 Responsive Design: Optimized for mobile and desktop screens.
• 🔒 No Dependencies: Pure HTML5 and Vanilla CSS.

---

📁 Project Structure

Custom-Google-Forms/
├── index.html       # HTML form structure and Google Forms entry mappings
├── style.css        # Custom CSS styling, floating labels, and button animations
└── README.md        # Project documentation and setup guide

---

🚀 How It Works

Google Forms accepts standard HTTP POST requests to its /formResponse endpoint. By giving HTML inputs the exact entry.<ID> names that Google Forms assigns to each field, submissions are captured directly into your Google Form and its connected Google Sheet.

---

🛠️ Step-by-Step Setup Guide

Follow these steps to connect this template to your own Google Form:

1. Create a Google Form

1. Go to Google Forms and create a new form.
2. Add your desired fields (e.g., First Name, Last Name, Email, Contact Number, Message).

2. Get the Form Action URL & Entry IDs

There are two easy methods to find your form's URL and input entry IDs:

Method A: Using "Get Pre-filled Link" (Recommended)

1. In your Google Form editor, click the three dots menu (⋮) in the top-right corner.
2. Click "Get pre-filled link".
3. Fill in dummy answers for each field (e.g., fname, lname, myemail@test.com, 123456, hello).
4. Click "Get link" and then "Copy link" at the bottom.
5. Paste the copied link into a text editor. It will look like this:

   https://docs.google.com/forms/d/e/1FAIpQLScMX9.../viewform?usp=pp_url&entry.1249168688=fname&entry.216431433=lname&entry.631232311=123456&entry.822700384=hello
   

3. Update index.html

1. Form Action:

   • Change /viewform?... in your URL to /formResponse.
   • Set it as the action attribute of your <form> tag:

     <form class="form" action="https://docs.google.com/forms/d/e/YOUR_FORM_ID/formResponse" method="POST">

2. Input Names:

   • Match each <input> or <textarea> name attribute with the corresponding entry.XXXXXXXXX key from your pre-filled link:

     <!-- First Name -->
     <input type="text" class="input" name="entry.1249168688" required />
     
     <!-- Last Name -->
     <input type="text" class="input" name="entry.216431433" required />
     
     <!-- Contact Number -->
     <input type="tel" class="input" name="entry.631232311" required />
     
     <!-- Message -->
     <textarea class="input01" name="entry.822700384" required></textarea>

---

💡 Pro Tip: Prevent Page Redirect on Submit

By default, submitting standard forms redirects the user to the Google Forms confirmation page. If you want to keep users on your website, submit via an invisible <iframe>:

<!-- Add a hidden iframe -->
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) { alert('Thank you! Your message has been sent.'); }"></iframe>

<!-- Set the form target to the iframe -->
<form 
  class="form" 
  action="https://docs.google.com/forms/d/e/YOUR_FORM_ID/formResponse" 
  method="POST" 
  target="hidden_iframe" 
  onsubmit="submitted=true;">
  
  <!-- Form fields here -->

</form>

<script>
  let submitted = false;
</script>

---

🎨 Customization

• Colors & Layout: Modify style.css to match your brand palette, font sizing, or container widths.
• Adding / Removing Fields: Add standard HTML inputs (text, email, tel, checkbox, radio) and map them to Google Forms entry.<ID> values.

---

📄 License

This project is open source and available under the MIT License.