자습서: Google 스프레드시트를 사용하여 정적 사이트에 양식 추가

Bootstrapper's Tales에 원래 게시됨

블로그에 가이드 섹션을 추가하기로 결정했습니다. 계획은 간단합니다. 무언가를 파악하는 데 너무 많은 시간을 할애할 때마다 그에 대한 가이드를 작성하겠습니다.

이 가이드는 Google 시트에 직접 응답을 저장하는 HTML 양식을 만드는 방법에 관한 것입니다. 페이지 하단에 보이는 이메일 가입 양식을 설정하는 방법입니다 👇👇👇

간편하고 추가 서비스가 필요하지 않으며 약 10분이 소요됩니다. 작은 정적 웹사이트에서 이메일을 수집하는 완벽한 솔루션입니다.

1단계: Google 시트 준비

Google Sheets으로 이동하여 빈 시트 만들기

원하는 대로 이름을 지정하십시오. 첫 번째 행에 timestamp 및 email를 헤더로 삽입합니다.

상단 표시줄에서 도구 > 스크립트 편집기를 클릭합니다

.

스크립트 이름 지정

다음 코드를 Code.gs에 붙여넣습니다(여기에 있는 코드를 재정의함).

var sheetName = 'Sheet1'
var scriptProp = PropertiesService.getScriptProperties()

function initialSetup () {
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()
    }
}

스크립트 저장

2단계: 프로젝트 설정 및 게시

상단에서 initialSetup 함수를 선택하고 실행을 클릭합니다.

Google 계정으로 스크립트를 인증합니다

.

왼쪽에서 "트리거"(시계 아이콘)를 클릭한 다음 트리거 추가를 클릭합니다.

다음 설정을 선택하고 저장을 클릭합니다

.

상단에서 배포 > 새 배포를 클릭합니다.

유형 선택(톱니바퀴 아이콘) > 웹 앱

설명을 삽입하고 "Execute as Me"를 선택한 다음 "Anyone"에 대한 액세스를 설정하고 마지막으로 배포를 누릅니다

.

화면에 제공되는 웹 앱 URL을 기록해 둡니다

.

3단계: 웹사이트에 양식 추가

아래 코드를 웹사이트에 추가하십시오. YOUR_WEB_APP_URL를 웹 앱 URL로 바꿉니다.

<form style="text-align:center;" name="submit-to-google-sheet">
  <input name="email" type="email" placeholder="Email" required>
  <button id="email-submit" type="submit">Send</button>
</form>
<script>
  const scriptURL = YOUR_WEB_APP_URL
  const form = document.forms['submit-to-google-sheet']

  form.addEventListener('submit', e => {
    e.preventDefault()
    submit_button = document.querySelector("button#email-submit");
    submit_button.innerText = "Sending...";
    fetch(scriptURL, { method: 'POST', body: new FormData(form)})
      .then(function(response){
                console.log('Success!', response);
                submit_button.innerText = "Done!";
                })
      .catch(function(error) {
                console.error('Error!', error.message);
                submit_button.innerText = "Error!";
                })
  })
</script> 

엑스트라

1. 구글폼 폴백 추가

이 방법의 용량이 어느 정도인지 100% 확신할 수 없습니다. 1분 안에 1000개의 양식 제출(I wish 😅)을 처리할 수 있습니까?

그래서 확실히 하기 위해 폴백을 구현했습니다. 실패할 경우 내 웹사이트는 이메일을 제출할 수 있는 Google 양식이 포함된 새 탭을 엽니다.

Google From 생성 및 관련 질문 설정(예: 이메일)

게시 요청이 실패하면 다음 스니펫을 추가합니다. 양식에 대한 링크로 GOOGLE_FORM_LINK 교체

window.open(GOOGLE_FORM_LINK);

모든 html 코드는 다음과 같아야 합니다.

<form style="text-align:center;" name="submit-to-google-sheet">
  <input name="email" type="email" placeholder="Email" required>
  <button id="email-submit" type="submit">Send</button>
</form>
<script>
  const scriptURL = YOUR_WEB_APP_URL
  const form = document.forms['submit-to-google-sheet']

  form.addEventListener('submit', e => {
    e.preventDefault()
    submit_button = document.querySelector("button#email-submit");
    submit_button.innerText = "Sending...";
    fetch(scriptURL, { method: 'POST', body: new FormData(form)})
      .then(function(response){
                console.log('Success!', response);
                submit_button.innerText = "Done!";
                })
      .catch(function(error) {
                console.error('Error!', error.message);
                submit_button.innerText = "Error!";
                window.open(GOOGLE_FORM_LINK);
                })
  })
</script> 

2. 더 많은 필드 수집

정적 사이트 양식에서 더 많은 필드를 캡처하려면 다음을 수행하십시오.

Google 시트에 헤더를 추가합니다

.

헤더와 정확히 일치하는 <input> 속성을 사용하여 HTML 양식에 name를 추가합니다.

예를 들어 이름을 추가해 보겠습니다. 귀하의 Google 시트:


귀하의 HTML 정적 양식:

<form style="text-align:center;" name="submit-to-google-sheet">
  <input name="email" type="email" placeholder="Email" required>
  <input name="first_name" type="text" placeholder="Your Name" required>
  <button id="email-submit" type="submit">Send</button>
</form>

나는 당신이 내 가이드를 즐겼기를 바랍니다! 자세한 내용은 나를 팔로우하거나 my blog을 방문하세요.

jamiewilson에서 수정됨