FAQ's


1. Create a new Google Sheet

  • First, go to Google Sheets and Start a new spreadsheet with the Blank template.
  • Rename it Email Subscribers. Or whatever, it doesn't matter.
  • Put the following headers into the first row:
A B C ...
1      timestamp name email ...  
 

To learn how to add additional input fields, checkout section 7 below.

2. Create a Google Apps Script

  • Click on Tools > Script Editor… which should open a new tab.
  • Rename it Submit Form to Google Sheets Make sure to wait for it to actually save and update the title before editing the script .
  • Now, delete the delete everything in it.
  • Paste the following script in it's place and File > Save
    var sheetName = 'Sheet1'
    var scriptProp = PropertiesService.getScriptProperties()
    
    function intialSetup () {
      var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
      scriptProp.setProperty('key', activeSpreadsheet.getId())
    }
    
    function doPost (e) {
      var lock = LockService.getScriptLock()
      lock.tryLock(10000)
    
      try {
        var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
        var sheet = doc.getSheetByName(sheetName)
    
        var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
        var nextRow = sheet.getLastRow() + 1
    
        var newRow = headers.map(function(header) {
          return header === 'timestamp' ? new Date() : e.parameter[header]
        })
    
        sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])
    
        return ContentService
          .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
          .setMimeType(ContentService.MimeType.JSON)
      }
    
      catch (e) {
        return ContentService
          .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
          .setMimeType(ContentService.MimeType.JSON)
      }
    
      finally {
        lock.releaseLock()
      }
    }

    If you want to better understand what this script is doing, checkout the form-script-commented.js file in the repo for a detailed explanation.

3. Run the setup function

  • Next, go to Run > Run Function > initialSetup to run this function.
  • In the Authorization Required  dialog, click on Review Permissions .
  • Sign in or pick the Google account associated with this projects.
  • You should see a dialog that says Hi {Your Name} , Submit Form to Google Sheets wants to ...
  •  Click Allow

4. Add a new project trigger

  • Click on Edit > Current project’s triggers.
  • In the dialog click No triggers set up. Click here to add one now.
  • In the dropdowns select doPost
  • Set the events fields to From spreadsheet and On form submit
  • Then click Save

5. Publish the project as a web app

  • Click on Publish > Deploy as web app….
  • Set Project Version to New and put initial version in the input field below.
  • Leave Execute the app as: set to Me([email protected]).
  • For Who has access to the app: select Anyone, even anonymous.
  • Click Deploy.
  • In the popup, copy the Current web app URL from the dialog.
  • And click OK.

IMPORTANT! If you have a custom domain with Gmail, you might need to click OK, refresh the page, and then go to Publish > Deploy as web app… again to get the proper web app URL. It should look something like https://script.google.com/a/yourdomain.com/macros/s/XXXX….

6. Input your web app URL

Open the file named submit-form.js On line 1 paste your SCRIPT URL inside:   ' '
You are done !

7. Adding additional form data

To capture additional data, you'll just need to create new columns with titles matching exactly the name values from your form inputs. For example, if you want to add first and last name inputs, you'd give them name values like so:


<form name="submit-to-google-sheet">
  <input name="email" type="email" placeholder="Email" required>
  <input name="firstName" type="text" placeholder="First Name">
  <input name="lastName" type="text" placeholder="Last Name">
  <button type="submit">Send</button>
  
  

Then create new headers with the exact, case-sensitive name values:

A B C D ...
1      timestamp email firstName lastName ...  
 


  • Go to https://api.imgbb.com/
  • Log in or signup in imgbb 
  • come back to https://api.imgbb.com/
  • Now click on Get Api Key copy that key
  • Now open Bootstrap-Image-Uploader.js
  • Paste that Key in third line inside " " double inverted colons  
  • Now your image uploading is done 

  • I didnt put any Name fields in form so you need to insert it manually and make sure that the name matches exactly as it is 
  • You need to add url in sheets to get the URL of image in sheets 

    For more info in name tag go to section 7 in first qustion