How to add "Was this helpful" buttons to your blog

on


There are multiple ways to tackle this problem of collecting and storing user responses, I started brainstorming ideas and thought about creating a PHP file and SQL database to store the responses but then had the idea of storing the data in Google Sheets and of course there was already a script to do this!

Using this method you will not require any server as everything is hosted and stored in Google, I have implemented this method across three of my blogs which are hosted on Blogger and it is working very well.

Create your Google Sheet

  1. First, we need to setup the Google Spreadsheet that we'll use to collect the data, go to the following address to open my template which contains the scripts necessary to store our responses: https://docs.google.com/spreadsheets/d/1PHiuJjcJxW2prHX2qB1Qjm6UJbpgvLiluYLhH7hZMJU/edit?usp=sharing
  2. Once you've opened the Template go to File > Make a copy, this will make a copy of the spreadsheet to your Google Drive which you can edit.
  3. You will notice in the document some headings are already there, these are the headings I have chosen to use for my spreadsheet, you can modify these headings according to your needs but note that the inputs in your HTML form must match your headings exactly for your data to be recorded.

Deploy Google Apps Script

Once you have finalised the headings for your spreadsheet you can now deploy the Google Apps Script as a web service which will be used to record data to the spreadsheet.
  1. Go to Tools > Script Editor, you should see some code already entered in for you.
  2. In the menu, find the drop down box that says "Select function" and click on "setUp" then click the button with the play icon.
  3. The app will request the relevant permissions, grant the permissions.
  4. Repeat step 2 a second time. On this time you run the function nothing should happen.
  5. Go to Publish > Deploy as Web app, and change "Who has access to the app" to "Anyone, even anonymous"
  6. Click on "Deploy", you should see a box which contains a link to your script, copy this link as you will need this link for your HTML form. It should look like this: https://script.google.com/macros/s/YOU_SCRIPT_ID/exec
You have successfully deployed your Google Sheet and Google Apps Script! Now we just need to design the form that we'll use on our website.

Create your HTML form

  1. Refer to my jsfiddle where you can get a copy of my HTML, CSS, and JS code: https://jsfiddle.net/lukegackle/o07h17ya/
  2. Use this code as the base of your form, note that there are additional fields you may not require, fields like the IPAddress are filled in by some Javascript in the background.
  3. Ensure the names of your inputs match the heading in your spreadsheet, e.g. in my spreadsheet theres a heading IPAddress, the text field in my form must match exactly <input type="hidden" name="IPAddress" />

If you found this post helpful be sure to let me know below! and enjoy what is essentially a free database on Google 😁



Attributions

Google Apps Script code sourced from: https://mashe.hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form-postget-submit-method/

Icons made by DinosoftLabs from www.flaticon.com is licensed by CC 3.0 BY

Was this helpful?

Yes No


Comments

Post a Comment