Google Forms: Send data to spreadsheet
forms, google-drive-api, html, twitter-bootstrap
Solution
Here's what worked for me:
- Create your custom form
- Create your Google form and view the source after clicking view live form
- Copy the html code starting from <form> till </form>
- Each of the input fields in the Google form have name and id attributes which need to be copied to your personal form
- Use the URL in the form action of Google forms in your form.
- Make sure that even the submit button has the ID and name attributes matching with the Google form source.
- If you make a submit now, it will take you to the Google form response page. You can avoid this by making an ajax form submit.
If your custom form does not validate a Google form mandatory element, then you will again be redirected to the Google form page.
Problem
How can I send the data from a webform to a google spreadsheet? I made a form with Google Drive, but to get custom CSS running, I need to copy the form tag. In my case, that is what google generated for the send button behavior ``` <form action="https://docs.google.com/forms/d/113H_71nd98TWE0bByjHYNpnC- oVA6OBDWtppU30rBrU/formResponse" method="POST" id="ss-form" target="_self" onsubmit=""> ``` However, I want to post data from my own designed form to the above Google Form Response spreadsheet. Here is my form code (using Bootstrap 3): ``` <form class="form-horizontal" role="form" id="ftk-contact"> <h4>Get in touch with us now</h4> <div class="form-group"> <label for="inputType" class="col-lg-2 control-label">Type of Inquiry</label> <div class="col-lg-10"> <select class="form-control" id="inputType"> <option>Request a Quotation</option> <option>Request a Bluebook</option> <option>General Inquiry</option> </select> </div> </div> <div class="form-group"> <label for="inputName" class="col-lg-2 control-label">Name *</label> <div class="col-lg-10"> <input type="text" class="form-control" id="inputName" placeholder="Your Name"> </div> </div> <div class="form-group"> <label for="inputEmail" class="col-lg-2 control-label">Email *</label> <div class="col-lg-10"> <input type="email" class="form-control" id="inputEmail" placeholder="Your Email"> </div> </div> <div class="form-group"> <label for="inputCompany" class="col-lg-2 control-label">Company</label> <div class="col-lg-10"> <input type="text" class="form-control" id="inputCompany" placeholder="Your Company Name"> </div> </div> <div class="form-group"> <label for="message" class="col-lg-2 control-label">Message *</label> <div class="col-lg-10"> <textarea class="form-control" rows="5" placeholder="Your Message"></textarea> </div> </div> <div class="form-group"> <label for="inputPhone" class="col-lg-2 control-label">Phone</label> <div class="col-lg-10"> <input type="tel" class="form-control" id="inputPhone" placeholder="Your Phone Number"> </div> </div> <div class="form-group"> <label for="inputWeb" class="col-lg-2 control-label">URL</label> <div class="col-lg-10"> <input type="url" class="form-control" id="inputWeb" placeholder="Your Website URL"> </div> </div> <div class="form-group"> <div class="col-lg-offset-2 col-lg-10"> <button type="submit" class="btn btn-primary btn-lg">Send your Inquiry now</button> </div> </div> </form> ``` When using the above Google form action=... I am taken to the original Google Form when pressing send, instead of the form entries being copied to the spreadsheet. If the above approach wont work, how else can I send the form data to email or Google Drive?