Create a feedback form using Google Forms

Hi, Habr!

This post is dedicated to the excellent Google Forms tool, how to make a feedback form on the website in 10 minutes or more useful things.

For a long time, I dreamed of using Google Forms in my work, and finally there was a reason. Considering that I am not on friendly terms with the backend, this solution is simpler and faster for me and, moreover, convenient for the client.

Consider the option on the example of the feedback form:

1. Go to Google Drive and create a form with fields
   
   • Page
   • Your name (text box)
   • Your email (text box)
   • Message (text box)
   
   
2. Save the form and open the document in Google Drive. In the Form tab, go to the active form.
3. Make the view source page and copy the html code with the form tag.
4. Now you can embed the html code on the page, and you can change the layout as you like, the main thing is that the name attribute of the form fields and the form fields with the value hidden remain valid.

All fields have a name with the same value, where only one digit changes from zero.
name="entry.0.single" at the first field
name="entry.1.single" in the second field
')
I made the first field “Page” for a reason, we make display to this field: none; and in the field value we write the current URL of the page.

But now when the form is submitted, the user will go to the Google page with a message about the successful submission of the form, which is not in line with the expectations of the user who sent the form on the website. And here another Google Search tool came to my aid, for the form tag we add 2 attributes target, onsubmit and js with iframe.


<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='http://%MY_PAGE%';}">
<form action="%ACTION_URL_GOOGLE_FORM%" method="post"
target="hidden_iframe" onsubmit="submitted=true;">

Now we can open any page to the user after submitting the form.

Sent data is recorded in a table, if desired, it can be shared by a constant url, like HTML, CVS, TXT, PDF, RSS, XLS, ODF.

It is clear that with this approach, data can be validated only on the client side using js, if necessary.

Practical application can be not only for the feedback form, in my case this form is used on the static landing page to order a callback. When submitting the form, sellers receive a letter about the new application, and already in Google Drive, sellers can edit the document and enter their last name opposite the revised application.
Now the application for a callback is 20% of the total number of calls, which is quite valuable for a business.

If the table is shared in the CVS format, then with the help of YQL you can get the data in the JSONP format and embed it on your page, which can be added to the interactive. But this is another story and a perversion.

Materials
www.morningcopy.com.au/tutorials/how-to-style-google-forms
There is also a link to a paid service formexperts.com that implements similar functionality.
If suddenly it became interesting about receiving data from Google Drive in JSONP. Dynamic FAQ Section w / jQuery, YQL & Google Docs