html form to google sheets using Google form

Google Forms is a convenient tool for collecting data, but sometimes you want more control over the design and functionality of your form. Creating custom redirect URLs or showing a popup when the form is submitted is a great way to achieve this. Converting html form to google sheets using Google form provides flexibility and customization options that can fit your needs. In this guide, we'll walk through a straightforward method of converting Google Forms to HTML forms, including storing the data in an Excel sheet and adding custom form notifications and redirections using jQuery.

Step 1: Create Your Google Form

Begin by creating a Google Form with all the necessary fields and settings. Once your form is ready, proceed to the next steps.

Step 2: Obtain Pre-filled Link

Google Forms allows you to pre-fill form fields by generating a pre-filled link. This link can be used to populate specific fields in your HTML form automatically. To obtain a pre-filled link:

1. Open your Google Form.

2. Click on the three dots menu in the upper right corner.

3. Select "Get pre-filled link" from the dropdown menu.

4. Adjust the pre-filled fields as needed and click "Submit."

5. Copy the generated link.

You will get a link like this: https://docs.google.com/forms/d/e/1FAIpQLSdHGzK7MBRLKgZugftxJv4jilrcuvXjRkd5Fdo9Gw3aOwO0A/viewform?usp=ppurl&entry.2005620554=ranjan&[email protected]&entry.1065046570=sitamarhi&entry.1166974658=7347404501&entry.839337160=this+is+test

Step 3: Convert to HTML Form

To convert your Google Form to an HTML form:

1. Open a text editor (like Notepad, Sublime Text, or VS Code).

2. Start creating your HTML form structure using standard HTML form elements such as <input>, <select>, and <textarea>.

3. Paste the pre-filled link obtained in Step 2 as the value of the corresponding form field.

4. Customize the design and layout of the HTML form according to your preferences.

5. Save the file with the .html extension.

Here's an example HTML form:

htmlCopy code<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdHGzK7M_BRLKgZugftxJv4jilrcuvXjRkd5Fdo9Gw3aOwO0A/formResponse" id="gform">
    <div class="row">
        <div class="col-sm-12" style="padding: 5px;">
            <h1>Contact Form</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="inputBox">
                <div class="inputText">Name</div>
                <input type="text" name="entry.2005620554" class="input" required>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="inputBox">
                <div class="inputText">Address</div>
                <input type="text" name="entry.1065046570" class="input" required>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="inputBox">
                <div class="inputText">Email</div>
                <input type="text" name="entry.1045781291" class="input" required>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="inputBox">
                <div class="inputText">Mobile</div>
                <input type="text" name="entry.1166974658" class="input" required>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="inputBox">
                <div class="inputText">Message</div>
                <textarea class="input" name="entry.839337160"></textarea>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <input type="submit" class="button" value="Send Message">
        </div>
    </div>
</form>

Demo URL: Google Form to HTML Form Conversion Demo

Download Source Code