diff --git a/LICENSE b/LICENSE index 8cdb845..8ddd400 100644 --- a/LICENSE +++ b/LICENSE @@ -1,7 +1,7 @@ GNU GENERAL PUBLIC LICENSE Version 2, June 1991 - Copyright (C) 1989, 1991 Free Software Foundation, Inc., + Copyright (C) 1989, 1991 Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. diff --git a/README.ko.md b/README.ko.md index 67ed146..9026875 100644 --- a/README.ko.md +++ b/README.ko.md @@ -1,5 +1,333 @@ -# Older Translation +# Google Apps Mail을 사용해 **정적** HTML Form에서 메일을 보내세요! -**This translation is for an older version of the Tutorial:** +**Language : [English](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server#send-email-from-a-static-html-form-using-google-apps-mail) | `한국어` | [Español](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/blob/master/README.es.md#older-translation) | [Português](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/blob/master/README.pt.md)** -The code snapshot is there but does not have the latest enhancements. If you would like to use it, be our guest. If you have time to update the translation, please do! We will gladly accept a [Pull Request](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/pulls) with an update. \ No newline at end of file +
+ +이것은 ***HTML Form*** 을 사용하여 "Contact Us" 메세지 보내기 기능을 구현할 때, 백엔드 서버없이 Google 스크립트를 활용하여 이메일을 보낼 수 있는 ***Step-by-Step(단계별)*** 예제입니다. PHP, Python, Ruby, Java, Node.js 등 필요하지 않습니다. + +작동하는 예제 웹 페이지는 이곳에서 볼 수 있습니다. : https://dwyl.github.io/learn-to-send-email-via-google-script-html-no-server/ + +***참고:\*** EU's GDPR(유럽연합 일반 데이터 보호 규칙)에 따라, [사용자 개인 정보에 대한 권장 사항](https://cloud.google.com/privacy/gdpr)을 적극 권고합니다. 귀하는 사용자의 개인 데이터를 안전하게 보관하는 *책임* 을 받을 수 있으며, 귀하에게 연락할 수 있는 방법을 제공해야 합니다. + +**\*경고:\*** Google API에는 하루에 보낼 수 있는 이메일 수에 제한이 있습니다. 이는 Google 계정에 따라 다를 수 있습니다. [이곳에서](https://developers.google.com/apps-script/guides/services/quotas) 본인의 한도를 확인하세요. 데이터는 항상 스프레드시트에 먼저 추가되고 이메일을 보낼 수 있다면, 이메일로 전송되므로 3부까지 튜토리얼을 구현하는 것이 좋습니다. + +## Why? + +우리는 *서버가 없거나 서버를 원하지 않을때, "정적"* HTML 페이지에서 이메일 보내는 방법이 필요했습니다. + +### *Key Advantages(주요 이점들)* + +- 배포/유지보수/지불 해야하는 "백엔드"가 필요 없습니다. + +- 모든 측면에서 ***사용자 맞춤 커스터마이징*** 이 가능합니다! + +- ***모든 곳에서 허용된 Google Mail*** 을 통해서 이메일을 전송합니다. ( *높은 전송 성공률* ) + +- 어떤 데이터든 쉽게 볼 수 있는 ***스프레드시트*** 에 **수집/저장** 합니다. + + ( *코딩을 전혀 모르는 사람과 공유해야하는 경우에도 완벽합니다.* ) + +## What? + +쉽지만 유지보수가 필요한 서버를 사용하여 이메일을 보내는 대신, Google을 사용하여 이메일을 보내고 Google 스프레드시트를 사용하여 데이터를 추적하세요! + +> 데이터를 보내는 위치에 상관하지 않고, 받은 편지함(messy ... yuck)에 제출된 데이터를 관리하려면 https://formspree.io/과 같은 무료 서비스를 사용하여 Form 제출을 처리할 수 있습니다. +> +> *또는*... 몇 분 동안 *투자하고* 데이터를 비공개로 관리할 수 있습니다. *당신이 선택하세요.* + +## *How*? + +### 1. 하단의 Sample Spreadsheet 복사하기 + +> Sample: https://docs.google.com/spreadsheets/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy + +당신의 Google 계정에 로그인하고 "**사본 만들기**"를 클릭합니다. + +[![1-make-copy](https://user-images.githubusercontent.com/1406149/29245471-feb7b034-7f97-11e7-9c0d-f06238e8362b.png)](https://user-images.githubusercontent.com/1406149/29245471-feb7b034-7f97-11e7-9c0d-f06238e8362b.png) + +아래와 같이 나와야합니다. + +[![2-copy-of-sheet](https://cloud.githubusercontent.com/assets/194400/10559710/3aec92f0-74ef-11e5-9295-f1988a23257b.png)](https://cloud.githubusercontent.com/assets/194400/10559710/3aec92f0-74ef-11e5-9295-f1988a23257b.png) + +> 참고: 복사본 이름을 원하는대로 변경해도 결과에 아무런 영향을 미치지 않습니다. + +### 2. 스크립트 편집기 열기 + +"**도구**" > "**스크립트 편집기...**"를 눌러 편집기를 여세요. + +[![2 script-editor](https://cloud.githubusercontent.com/assets/194400/10559732/8db2b9f6-74ef-11e5-8bf2-de286f079929.png)](https://cloud.githubusercontent.com/assets/194400/10559732/8db2b9f6-74ef-11e5-8bf2-de286f079929.png) + +여기에 필요한 스크립트의 스냅샷이 있습니다 : [google-script-just-email.js](https://raw.githubusercontent.com/dwyl/learn-to-send-email-via-google-script-html-no-server/1d1c6727f69dec64a6b7f6bd6ff0dd72d0374210/google-script-just-email.js) + +### 3. 스크립트에서 `TO_ADDRESS` 를 설정하기 + +**\*경고:\*** 만약 당신이 `TO_ADDRESS` 에 있는 주석을 제거하지 않고, `TO_ADDRESS`에 당신의 이메일을 직접 설정하면, 웹 스킬을 가진 사람이 당신의 Form과 데이터를 수정하여 임의의 이메일로 보낼 수 있습니다. + +이 위험은 그다지 크지 않을 수 있습니다. 대신, 이 가능한 위험을 감수하면서도 HTML Form 내에서 이메일 변수를 `data-email` 속성으로 설정하는게 편하다면 이 변수를 주석으로 남겨둘 수 있습니다. + +따라서 현재 속한 2-6단계를 거치지 않고도 HTML Form의 이메일을 보낼 위치를 쉽게 변경할 수 있습니다. 이 기능을 사용하려면 2부 10단계에서 **제공된** JS 파일을 사용해야 합니다. + +이러한 잠재적 위험을 감수하지 않으려면 `TO_ADDRESS`의 주석을 제거하세요. 그리고 Form에서 Submit 할 때 데이터를 받고자하는 주소를 변수의 값으로 넣으세요. + +[![3-script-editor-showing-script](https://cloud.githubusercontent.com/assets/194400/10560379/9efa5b3a-7501-11e5-96ba-a9e3b2d77ee4.png)](https://cloud.githubusercontent.com/assets/194400/10560379/9efa5b3a-7501-11e5-96ba-a9e3b2d77ee4.png) + +### 4. 스크립트를 *새로운 버전* 으로 저장하기 + +*버전 관리* 를 클릭하세요. + +[![19 google-script-no-save-new-version](https://cloud.githubusercontent.com/assets/194400/10558249/527f3c98-74c1-11e5-8290-5af7fa7f5f75.png)](https://cloud.githubusercontent.com/assets/194400/10558249/527f3c98-74c1-11e5-8290-5af7fa7f5f75.png) + +그리고 *새로운 버전* 을 만들어주세요. + +[![20 google-script-save-new-version](https://cloud.githubusercontent.com/assets/194400/10558250/53d21d5e-74c1-11e5-88c5-7bc2d8ce6228.png)](https://cloud.githubusercontent.com/assets/194400/10558250/53d21d5e-74c1-11e5-88c5-7bc2d8ce6228.png) + +### 5. *업데이트 된* 스크립트를 웹앱으로 배포합니다. + +[![20 a-publish](https://cloud.githubusercontent.com/assets/194400/10558288/50980aa8-74c2-11e5-8576-72084a564779.png)](https://cloud.githubusercontent.com/assets/194400/10558288/50980aa8-74c2-11e5-8576-72084a564779.png) + +배포 할 *최신 버전* 을 선택합니다. +⚠️ 참고: '웹에 액세스할 수 있는 사용자' 드롭다운에서 `Anyone, even anonymous` 옵션을 선택해야 합니다. 다른걸 선택하면 Form 응답이 스프레드시트에 추가되지 않습니다. ⚠️ + +[![21 deploy-new-version](https://cloud.githubusercontent.com/assets/194400/10558251/570a5428-74c1-11e5-8ced-5dd26d3de3c4.png)](https://cloud.githubusercontent.com/assets/194400/10558251/570a5428-74c1-11e5-8ced-5dd26d3de3c4.png) + +### 6. 이메일을 보내기 위해 스크립트 인증하기 + +[![5 auth-required](https://cloud.githubusercontent.com/assets/194400/10560412/89d3fb0c-7502-11e5-81ce-fb239bf545b2.png)](https://cloud.githubusercontent.com/assets/194400/10560412/89d3fb0c-7502-11e5-81ce-fb239bf545b2.png) + +[Google을 사용하여 스크립트 확인](https://developers.google.com/apps-script/guides/client-verification#requesting_verification)을 하지 않는 한, "Advanced(고급)"과 "Go to(이동) ... (unsafe)"을 클릭해서 이 앱 권한을 부여해야합니다. + +[![5-auth-failed-verification](https://user-images.githubusercontent.com/1406149/44312495-79583780-a3b6-11e8-9740-8c9b50f195d6.png)](https://user-images.githubusercontent.com/1406149/44312495-79583780-a3b6-11e8-9740-8c9b50f195d6.png) + +[![5-allow-sending-emails](https://cloud.githubusercontent.com/assets/194400/10560416/a86a26ae-7502-11e5-9add-d5081d409af4.png)](https://cloud.githubusercontent.com/assets/194400/10560416/a86a26ae-7502-11e5-9add-d5081d409af4.png) + +웹앱 URL을 클립보드 혹은 메모장에 복사하시고 "확인" 버튼을 누르세요. + +[![22 1-deploy-as-web-app](https://cloud.githubusercontent.com/assets/194400/10558255/6eec31e2-74c1-11e5-9c07-cea6209526df.png)](https://cloud.githubusercontent.com/assets/194400/10558255/6eec31e2-74c1-11e5-9c07-cea6209526df.png) + +### 7. *기본 HTML Form* 만들기 + +이 저장소의 `index.html` 템플릿을 사용하여, 기본 Form 형식을 가진 HTML 파일을 만들어서 저장하세요. + +⚠️ 이 단계에서 이미 *자신의 Form* 을 사용하려고 하는 경우, 이 저장소에 있는 예제 대신 이 단계를 수행합니다. + +- 각각의 Form 태그의 `name` 속성은 Google 시트의 컬럼명과 같아야 합니다. +- Form 태그의 `class`는 `gform`이 되어야 합니다. 즉, `
` + - 나중에 이걸 변경하려면, `form-submission-handler.js`의 고유버전을 만들고 `class`을 고치면 됩니다. + +> Form 태그의 `action` 속성을 전 단계에서 복사해놓은 URL로 고쳐야 함을 잊지 마세요 : + +[![7-html-form](https://user-images.githubusercontent.com/1406149/44312329-9b9c8600-a3b3-11e8-9816-4bdbbc96dc62.png)](https://user-images.githubusercontent.com/1406149/44312329-9b9c8600-a3b3-11e8-9816-4bdbbc96dc62.png) + +### 8. 브라우저에서 HTML Form (*페이지*) 열기 + +HTML Form에 테스트 데이터를 채우세요 : + +[![html form](https://cloud.githubusercontent.com/assets/194400/10560494/674b64c4-7504-11e5-801a-b537d276f671.png)](https://cloud.githubusercontent.com/assets/194400/10560494/674b64c4-7504-11e5-801a-b537d276f671.png) + +Submit 하세요. 보내졌으면 아래와 같이 확인할 수 있습니다 : + +![form sent](https://cloud.githubusercontent.com/assets/194400/10560501/8f605dd4-7504-11e5-8cd7-06d768beba4d.png) + +### 9. 설정했던 이메일 계정의 받은 편지함 확인하기 + +(*위의*) **3단계** 에서 설정했던 이메일 계정의 받은편지함을 열어보세요. + +[![email received](https://cloud.githubusercontent.com/assets/194400/10560512/f87f1652-7504-11e5-8b0f-c342c395a193.png)](https://cloud.githubusercontent.com/assets/194400/10560512/f87f1652-7504-11e5-8b0f-c342c395a193.png) + +> ***Done***. 이게 전부입니다. HTML Form 태그만을 이용해 이메일 보내기에 성공했습니다. + +# *Part Two - 보기 좋게 만들기* ... + +우리 스타일에 [**순수 CSS**](https://purecss.io/start/)를 사용해 이 ***Super Lean*** 을 유지할 겁니다. ( *8단계의 "못생긴" HTML Form 태그를 고칠겁니다.* ). 그리고 당신의 페이지/사이트에 사용자를 유지하기 위해 Form 태그 양식을 `submit` 할 때 [**JQuery** "***AJAX***"](https://api.jquery.com/jquery.ajax/) 를 사용하겠습니다. ( *"구린" 응답페이지는 빼구요.* ) + +### 10. **JavaScript** "***AJAX*** 을 이용한 Form Submit" + +페이지가 `JSON` 응답/결과로 *변경되지 않도록* 하려면, ***AJAX***를 사용하여 Form을 submit 해야 합니다. + +다음 [the following Javascript file](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/blob/master/form-submission-handler.js)을 설치하고 당신의 `index.html`의 끝(`` 를 하기 전)에 설치한 javascript 파일을 포함하여 업데이트하세요. + +``` + +``` + +**경고:** 위의 3단계에서 `TO_ADDRESS` 변수를 설정하지 않은 경우, 메인 Form 요소에 `data-email="example@email.net"`를 포함시켜야 됩니다. 자세한 내용은 아래 양식을 확인하세요. 단, 설정하셨다면 이 속성은 필요하지 않습니다. + +이제 Form이 submit 되면 "Thank You" *메시지* 가 띄워집니다: + +### 11. Form을 Submit 한 후, 나오는 메시지 커스터마이징하기 + +10단계를 수행한 후, Submit 한 뒤 나오는 감사 메시지를 추가하여 커스터마이징 할 수 있습니다. 아래의 소스코드를 `and` 태그 안에 넣으세요. + +```html + +``` + +Form이 Submit 된 후에 아래와 같은 감사 메세지가 나타납니다. + +[![thankyou message](https://cloud.githubusercontent.com/assets/194400/10561147/4086a89a-7517-11e5-840d-7f490353e225.png)](https://cloud.githubusercontent.com/assets/194400/10561147/4086a89a-7517-11e5-840d-7f490353e225.png) + +`thankyou_message` div 태그를 수정하여 당신만의 감사 메세지를 작성하세요. + +### 12. CSS를 사용해 Form을 *멋지게* 만들기 + +*이번 예제* 에서는 ***Pure CSS*** : https://purecss.io/start/ 을 사용하고 있습니다. ***4.0KB로 축소 및 압축된 적은 용량*** 이고 현재 "문제"인 보기에 구린 것을 *해결하기* 때문입니다. + +[![PureCSS-Logo-Intro](https://camo.githubusercontent.com/27da1dfc8cc2f5541bb85d8be1dd88eb5c1142ff/68747470733a2f2f6769746875622d636c6f75642e73332e616d617a6f6e6177732e636f6d2f6173736574732f3139343430302f31303536353833382f37326436643532612d373564322d313165352d396239322d6361303262313132343932302e706e67)](https://camo.githubusercontent.com/27da1dfc8cc2f5541bb85d8be1dd88eb5c1142ff/68747470733a2f2f6769746875622d636c6f75642e73332e616d617a6f6e6177732e636f6d2f6173736574732f3139343430302f31303536353833382f37326436643532612d373564322d313165352d396239322d6361303262313132343932302e706e67) + +[![PureCSS-module-sizes](https://camo.githubusercontent.com/94cc657811248276133a9afb33b57e28da6e2f4a/68747470733a2f2f6769746875622d636c6f75642e73332e616d617a6f6e6177732e636f6d2f6173736574732f3139343430302f31303536353834342f38663438383561302d373564322d313165352d393439302d6533666334326333323631362e706e67)](https://camo.githubusercontent.com/94cc657811248276133a9afb33b57e28da6e2f4a/68747470733a2f2f6769746875622d636c6f75642e73332e616d617a6f6e6177732e636f6d2f6173736574732f3139343430302f31303536353834342f38663438383561302d373564322d313165352d393439302d6533666334326333323631362e706e67) + +이 작업은 너무 *많은* 시간을 들이지 않고도 Form을 ***훨씬*** 멋지게 만들 수 있습니다: + +[![contact form with pure css](https://camo.githubusercontent.com/8dfef1bc299b5cf0f95fd13597558bc7434e8641/68747470733a2f2f6769746875622d636c6f75642e73332e616d617a6f6e6177732e636f6d2f6173736574732f3139343430302f31303536363339322f66333862633435342d373564642d313165352d383564642d3638313934393461393866322e706e67)](https://camo.githubusercontent.com/8dfef1bc299b5cf0f95fd13597558bc7434e8641/68747470733a2f2f6769746875622d636c6f75642e73332e616d617a6f6e6177732e636f6d2f6173736574732f3139343430302f31303536363339322f66333862633435342d373564642d313165352d383564642d3638313934393461393866322e706e67) + +### 13. 이메일도 멋지게 만들기! + +기본적으로 이메일의 본문에는 Form의 key-value 쌍이 포함되며, key는 `

`이고 value는 `
`입니다. 이것은 심플하지만, 데이터를 보기엔 어색합니다. + +아마 대충 이런 형식의 메일을 받았을 겁니다: + +[![Nicely formatted email](https://cloud.githubusercontent.com/assets/5610747/22168070/335ad734-df62-11e6-9523-6e193e94151f.png)](https://cloud.githubusercontent.com/assets/5610747/22168070/335ad734-df62-11e6-9523-6e193e94151f.png) + +> 이 작업은 진행 중인 작업이며 이 작업으로 예상한 것보다 더 많은 이메일을 받을 수 있습니다. 이메일 내용이 Form으로 전송된 모든 데이터를 루핑하고 있기 때문에 로봇이나 악의적인 사용자가 요청한 것보다 더 많이 `POST` 한 경우, 받은 편지함에 요청 이상의 메일이 쌓일 가능성이 높습니다. 일단 조심해서 사용하세요. 개선점을 조사하고 있습니다. + +스크립트 편집기를 통해 이를 수정할 수 있습니다. 이 부분입니다: + +``` +result += "

" + key + "

" + obj[key] + "
"; +``` + +이게 우리에게 필요한 전부이며, 마크업을 당신에게 맞게 조정할 수 있습니다. 우리는 `태그를 이메일에 가장 적합한 크기로 선택했고, 대소문자(key들은 JavaScript 객체에서 모두 소문자입니다)와 약간의 기본 간격을 고정하기 위해 약간의 CSS를 추가했습니다. inline style은 일반적인 웹 페이지에서는 죄악이지만 우리가 이 예제에서 CSS를 수행하려면 유일한 방법입니다. 또한 우리는 value 부분에 단일 행이든, 여러 행이든 대응할 수 있도록
` 를 사용했습니다. (예를 들어 `

` 태그는 그걸 잘라내지 않습니다.) + +추가로, 우리에겐 기본적으로 주석처리 되어 있는 `sendEmail()` 함수에 대한 `replyTo` 옵션이 있습니다. + +``` +MailApp.sendEmail({ + to: TO_ADDRESS, + subject: "Contact form submitted", + // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email` + htmlBody: formatMailBody(mailData) +}); +``` + +이메일에 답장 필드를 추가하려는 경우, 주석을 제거하면 됩니다. 스크립트의 예제는 `reply-to` 를 Form에 Submit 된 메일로 설정합니다. 관심이 있다면 Google 문서에서 MailApp.sendEmail (예 : `cc` / `bcc` 등)에 대한 자세한 정보를 확인해주세요 : https://developers.google.com/apps-script/reference/mail/mail-app + +# *Part Three - Submit 된 데이터를 스프레드시트에 저장하기* + +Form 데이터를 받은 편지함으로 직접 보내는 것은 *좋은* 첫 번째 단계이지만 더 좋은 방법이 있습니다. 또한 위에서 설명한 것처럼 Google은 하루에 보낼 수 있는 전자 메일 수에 제한이 있으므로 데이터를 스프레드시트에 저장하는 것이 더 안전하고 데이터 손실 가능성이 낮습니다. + +### 14. Google Apps 스크립트에 `record_data` 기능 추가하기 + +[![record_data example](https://cloud.githubusercontent.com/assets/194400/10581613/8b4f9ad4-767b-11e5-90cc-962a9d6acc91.png)](https://cloud.githubusercontent.com/assets/194400/10581613/8b4f9ad4-767b-11e5-90cc-962a9d6acc91.png) + +이렇게 하면 `POST`로 받은 데이터가 스프레드시트의 *행(row)* 으로 기록됩니다. 참고: 다음 파일을 이용해 전체 소스코드를 복붙할 수도 있습니다. [**google-apps-script.js**](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/blob/133ceb9eb7b3d6ea3205a533ed99468d5feaf7e1/google-apps-script.js) + +### 15. 새로운 버전 저장하고 재배포하기 + +새로운 버전을 저장하고, 스크립트를 ***재배포*** 하기 위해 위의 4, 5, 6단계를 다시 따라하세요. + +### 16. Form 재검사하기 + +[![submit the form](https://cloud.githubusercontent.com/assets/194400/10582654/cf3081e6-7680-11e5-9fd1-b989a8ba0b65.png)](https://cloud.githubusercontent.com/assets/194400/10582654/cf3081e6-7680-11e5-9fd1-b989a8ba0b65.png) + +### 17. 데이터가 스프레드 시트에 삽입되었는지 확인하기 + +[![17-confirm-data-inserted](https://cloud.githubusercontent.com/assets/194400/10582676/eb8af5d8-7680-11e5-92bb-30dd08d2d7b3.png)](https://cloud.githubusercontent.com/assets/194400/10582676/eb8af5d8-7680-11e5-92bb-30dd08d2d7b3.png) + +### *라이브* 서버 (*on your `localhost`*) + +외부 *\*.js* 파일들을 로드하고 있기 때문에 우리의 웹브라우저는 로컬 디렉토리에서 **index.html**을 열지마세요. *(파일로 실행시켜 단순 웹브라우저로 테스트하지 마세요.)* + +터미널을 열고 다음 커맨드를 실행해 ***node 모듈**을 **설치**하고 **live 서버** 를 시작하세요* : + +``` +npm install live-server --save-dev && node_modules/.bin/live-server --port=8000 +``` + +설치하는데 1분 정도 걸리고, 완료되면 당신의 `live-server` 가 작동합니다. + +포트 8080에서 node.js HTTP 서버가 시작되고 방금 만들었던 Form이 기본 브라우저에서 열립니다. **style.css**의 form style 혹은 **form-submission-handler.js**의 클라이언트 측 자바스크립트를 업데이트하려면, GitHub가 아닌 로컬로 해당 자원을 로드하도록 **index.html**을 편집하세요. + +> **참고**: 이건 초보자를 위한 Node.js의 *맛보기* 입니다. 이 Form을 "배포"하기 위해 node.js가 무조건 필요한 것은 아니며, HTML / CSS / JavaScript를 제공하는 ***어떤\* 웹 서버**에서도 실행할 수 있습니다. 이전에 Node.js를 사용한 적이 없다면 http://nodeguide.com/beginner.html을 참고하세요. 하지만 이 연습 (*서버가 없는 Form Submit*) 을 위해 node.js 또는 `live-server`는 필요하지 않습니다. 그러나 IDE에서 편집기에서 변경 사항을 적용 할 때 페이지를 자동으로 다시 로드하기 때문에 있으면 좋습니다. + +# *Want more*? + +이 튜토리얼보다 더 많은 것을 알고 싶다면, [***알려주세요***!](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/issues) + +여러분의 편의를 위해 GitHub Pages에서 데모페이지를 호스트해 두었습니다. 코드를 확인하고 작동 방식을 확인하세요 : https://dwyl.github.io/learn-to-send-email-via-google-script-html-no-server/ + +## 자신만의 필드 추가하기! + +[Henry Beary의 요청](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/issues/9)에 따라 Form 핸들러를 *제네릭* 으로 만들어 원하는 필드를 추가할 수 있도록 했습니다. + +또한 모든 종류의 Form input 요소를 사용하는 `test.html`도 만들었으므로 원하는대로 요소를 복사하고 붙혀넣으세요. 요소의 name과 id 속성들만 업데이트하면 됩니다. 이 테스트 양식의 작동 예제는 이곳에서 확인할 수 있습니다 : https://dwyl.github.io/learn-to-send-email-via-google-script-html-no-server/test.html + +class가 gform 인 Form 태그 내에 필드를 포함시키고 Form 요소의 이름이 스프레드시트의 새로운 열 제목과 일치하는지 확인하세요! 즉 : + +```html +

+ + +
+``` + +위 코드는 사용자가 선호하는 색을 받아볼 수 있게 해줍니다. 즉: + +[![new-field-contains-data](https://cloud.githubusercontent.com/assets/194400/11547132/9f162f6a-9949-11e5-89ac-aeb91e025844.png)](https://cloud.githubusercontent.com/assets/194400/11547132/9f162f6a-9949-11e5-89ac-aeb91e025844.png) + +질문이 더 있으면 알려주세요! + +## 파일 업로드하기 + +[이 자료](https://www.labnol.org/internet/receive-files-in-google-drive/19697/)가 Google 스크립트에서 Google Drive로 파일 업로드를 시작하는 데 도움이 될 수 있습니다. + +## 자주 묻는 질문들 (FAQ's) + +1. *이 자습서를 사용할 때 도움을 받으려면 어떻게 하나요?* + +- 어떤 단계를 거쳤으며 어떤 단계가 효과적이지 않은지 상세하게 설명하는 [문제를 게시](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/issues/new)해주세요. 응답 받을 가능성을 높이시려면, 겪으신 문제를 재현한 [예제](https://stackoverflow.com/help/mcve)를 제공해주는 것이 가장 이상적입니다 (예 : [this sample CodePen](https://codepen.io/mckennapsean/pen/gdYzNY)) + +2. *예제 스프레드시트에 대한 수정권한을 얻을 수 있을까요?* + +- 아니요. 다른 사람이 복사 할 수 있도록 작업 예제를 보여주기 위해 사용되고 있으며 편집 가능한 버전은 실수로 또는 악의적으로 모든 사용자를 손상시킬 수 있습니다. + +3. *제출(submit)을 클릭하면 웹 페이지 포워딩이 여러 텍스트로 전송되는 이유는 무엇입니까?* + +- AJAX를 통해 데이터를 제출하는 데 필요한 자바 스크립트를 제대로 로드하지 않았거나 브라우저가 AJAX를 지원하지 않을 수 있습니다. 2단계에서 오류를 발견 할 경우를 대비하여 콘솔 로그를 확인하세요. + +4. *웹 페이지에서 form이 성공적으로 submit 되지 않는 이유가 뭘까요?* + +- Javascript 콘솔 로그를 확인해주세요. 제공된 Javascript를 읽는 동안 또는 Form을 Submit하는 동안 오류가 발생할 수 있습니다. Google 스크립트 파일 내에 `TO_ADDRESS` 변수를 설정하지 않은 경우 Form 태그의 class가 `gform` 이고, `data-email` 속성이 있어야 합니다. 또한 제공된 Javascript 코드에는 전송 확인을 위해 사용하는 이메일 Form 요소, 잘못된 이메일을 제출할 때 해당 요소에 대한 경고 메시지, Form이 성공적으로 Submit 된 후 표시되는 감사메세지 `
`도 표시되어야 합니다. 이러한 모든 HTML 요소가 사용자 형태인지 확인하시기 바랍니다. 복사하여 붙여넣을 수 있는 코드는 샘플 파일을 참조하세요. 이러한 모든 요소와 적절한 양식을 설정한 경우 제출을 누르면 Javascript 콘솔에 오류 메시지가 표시되지 않아야 합니다. + +5. *웹 페이지에서 데이터가 제출되었다고 하는데 데이터가 저장되거나 전송되지 않는 이유는 무엇입니까?* + +- 스프레드 시트를 복사하고 Google Script를 게시 할 때 권한을 " "Anyone, even Anonymous" 으로 설정하셨나요? 이것은 인터넷에 있는 사용자 누구나 자신의 데이터를 보내기 위해 보내기를 누를 수 있기 때문에 필요합니다. 변경 사항을 적용할 때 적절한 버전의 스크립트를 배포하고 "버전 기록"을 사용했는지 확인하세요. + +6. *파일은 어떻게 업로드 할 수 있나요?* + +- You can tweak the Google Script on the server to send emails to anyone and in whatever format you wish. This could be used to send a confirmation email to those contacting you, but we have not added this feature to this tutorial to avoid potential spamming. The sender of the email will always be the Google account you use to create the form/script, however. Further details on how to customize the email can be found in [the `MailApp` API](https://developers.google.com/apps-script/reference/mail/mail-app). You can instead use [the `GmailApp` API](https://developers.google.com/apps-script/reference/gmail/) which may be more flexible for certain use-cases. +- 서버의 Google 스크립트를 수정하여 원하는 형식으로 누구에게나 이메일을 보낼 수 있습니다. 이 기능은 연락하는 사용자에게 확인 이메일을 보내는 데 사용할 수 있지만 잠재적인 스팸을 방지하기 위해 이 튜토리얼에 이 기능을 추가하지 않았습니다. 그러나 이메일의 발신자는 항상 form/script를 만드는 데 사용하는 Google 계정이 됩니다. 사용자를 지정하는 방법에 대한 자세한 내용은 [`MailApp` API](https://developers.google.com/apps-script/reference/mail/mail-app)에서 확인할 수 있습니다. 또는 [`GmailApp` API](https://developers.google.com/apps-script/reference/gmail/)를 대신 사용하면 특정 사용 사례에 보다 유연하게 사용할 수 있습니다. + +7. *이거 안전한가요? 민감한 데이터에 사용할 수 있나요?* + +- 아니요. POST를 통해 전송되는 데이터는 더 안전하게 보호될 수 있지만, 제3자나 중개인이 정보를 쉽게 가로 챌 수 있으며 Google은 Google 스프레드시트의 데이터에 대한 완전한 액세스 권한을 갖습니다. 또한 이메일은 기본적으로 매우 안전한 통신 매체가 아닙니다. 보안이 필요한 경우 데이터를 저장하기 위한 안전한 플랫폼과 서버에 투자하기를 추천합니다. + +## 참고문서 + +- Google Apps Scripts Basics: https://developers.google.com/apps-script/articles + +- Logger (like console.log): https://developers.google.com/apps-script/reference/base/logger + +- Simple Mail Merge using Google Spreadsheets: https://developers.google.com/apps-script/articles/mail_merge + +- Original Tutorial: AJAX post to google spreadsheet: + + https://stackoverflow.com/questions/10000020/ajax-post-to-google-spreadsheet + + which points to: + + - https://mashe.hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form-postget-submit-method/ diff --git a/README.md b/README.md index d4d7a0c..ccc54cb 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,15 @@ # Send Email from a *Static* HTML Form using Google Apps Mail! +**Language : `English` | [한국어](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/blob/master/README.ko.md#google-apps-mail을-사용해-정적-html-form에서-메일을-보내세요) | [Español](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/blob/master/README.es.md#older-translation) | [Português](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/blob/master/README.pt.md)** + +
+ A ***Step-by-Step Example*** of using an **HTML Form** to send a "Contact Us" Message via Email without a Backend Server using a Google Script - No PHP, Python, Ruby, Java, Node.js etc. See a working example here: https://dwyl.github.io/learn-to-send-email-via-google-script-html-no-server/ +**_Note:_** With EU's GDPR, we strongly advise [researching recommendations on user privacy;](https://cloud.google.com/privacy/gdpr) you may be held _responsible_ for the safekeeping of users' personal data and should provide them a way to contact you. + **_Warning:_** Google's API has limits on how many emails it can send in a day. This may vary on your Google account, see [the limits here](https://developers.google.com/apps-script/guides/services/quotas). We recommend implementing this tutorial through Part 3, since the data will @@ -17,21 +23,21 @@ when you don't (*want* to) *have* a *server*. ### *Key Advantages* + No "*Backend*" to Deploy/Maintain/Pay for -+ ***Fully Customisabe*** - every aspect is customisable! ++ ***Fully Customisable*** - every aspect is customisable! + Email *sent via* ***Google Mail*** which is ***Whitelisted Everywhere*** (*high deliverability success*) -+ **Collect/Store** any **form data** in a ***Spreadsheet*** for easy viewing ++ **Collect/Store** any **form data** in a ***Spreadsheet*** for easy viewing (*perfect if you need to share it with non-technical people*) ## What? Instead of using a server to send your email, -which is *easy* but requires *maintenance*, +which is *easy* but requires *maintenance*, use Google to send mail on your behalf and use Google Spreadsheets to keep track of the data! -> You *could* use a "*free*" service like http://formspree.io/ to process your form submissions -if you don't care where you are sending your data and want to manage the data submitted -in your email inbox (*messy ... yuck*!) +> You *could* use a "*free*" service like https://formspree.io/ to process your form submissions +if you don't care where you are sending your data and want to manage the data submitted +in your email inbox (*messy ... yuck*!) *Or*... you can *invest* a few minutes and keep data private/manageable. *Take your pick*. @@ -54,9 +60,9 @@ it will not affect the outcome. ### 2. Open the Script Editor -Open the **Script editor...** by clicking "**Tools**" > "**Script editor...**" +Open the **Apps Script editor** by clicking "**Extensions**" > "**Apps Script**" -![2 script-editor](https://cloud.githubusercontent.com/assets/194400/10559732/8db2b9f6-74ef-11e5-8bf2-de286f079929.png) +![2 script-editor](https://user-images.githubusercontent.com/1406149/148702005-00f3b846-d6a7-4e3a-9d92-c255a7233b46.png) Here's a *snapshot* of the script you need (*at this point in the exercise*): [google-script-just-email.js](https://raw.githubusercontent.com/dwyl/learn-to-send-email-via-google-script-html-no-server/1d1c6727f69dec64a6b7f6bd6ff0dd72d0374210/google-script-just-email.js) @@ -79,39 +85,34 @@ receive the form's data when submitted. ![3-script-editor-showing-script](https://cloud.githubusercontent.com/assets/194400/10560379/9efa5b3a-7501-11e5-96ba-a9e3b2d77ee4.png) -### 4. Save a *New Version* of your Script - -It's not immediately *obvious* but you have to *click* on "*Manage Versions...*" - -![19 google-script-no-save-new-version](https://cloud.githubusercontent.com/assets/194400/10558249/527f3c98-74c1-11e5-8290-5af7fa7f5f75.png) +### 4. Save changes to your Script -Then *create* your new version: +After making any code changes, you must first save them in the editor using the save icon. -![20 google-script-save-new-version](https://cloud.githubusercontent.com/assets/194400/10558250/53d21d5e-74c1-11e5-88c5-7bc2d8ce6228.png) +![4-apps-script-save-code](https://user-images.githubusercontent.com/1406149/148702006-bd16b31b-fca1-494a-ba46-502d52545128.png) ### 5. Publish the *Updated* Script as a Web App -![20 a-publish](https://cloud.githubusercontent.com/assets/194400/10558288/50980aa8-74c2-11e5-8576-72084a564779.png) +![5-1-publish-button](https://user-images.githubusercontent.com/1406149/148702007-8ec6047c-804b-492c-bc00-a9b59e515914.png) -Select the *latest* project version to deploy. -:warning: Note: You *must* select the `Anyone, even anonymous` option for the 'Who has access to the app' dropdown or form responses will not be added to the spreadsheet! :warning: +:warning: Note: You *must* select the `Anyone` option for the 'Who has access' dropdown or form responses will not go through! :warning: -![21 deploy-new-version](https://cloud.githubusercontent.com/assets/194400/10558251/570a5428-74c1-11e5-8ced-5dd26d3de3c4.png) +![5-2-deploy-new-version](https://user-images.githubusercontent.com/1406149/148702008-3d5e1b29-2670-4205-95fa-bfcb3ae2522b.png) ### 6. Authorize the Script to Send Emails -![5 auth-required](https://cloud.githubusercontent.com/assets/194400/10560412/89d3fb0c-7502-11e5-81ce-fb239bf545b2.png) +![6-1-auth-required](https://user-images.githubusercontent.com/1406149/148702009-ae03cbfe-0e1d-4eed-af6d-e32befe55d17.png) Unless you [verify your script with Google](https://developers.google.com/apps-script/guides/client-verification#requesting_verification), you will need to click on "Advanced" and "Go to ... (unsafe)" to give this app permissions. -![5-auth-failed-verification](https://user-images.githubusercontent.com/1406149/44312495-79583780-a3b6-11e8-9740-8c9b50f195d6.png) +![6-2-auth-failed-verification](https://user-images.githubusercontent.com/1406149/44312495-79583780-a3b6-11e8-9740-8c9b50f195d6.png) -![5-allow-sending-emails](https://cloud.githubusercontent.com/assets/194400/10560416/a86a26ae-7502-11e5-9add-d5081d409af4.png) +![6-3-allow-sending-emails](https://user-images.githubusercontent.com/1406149/148702010-e7b10721-2dd5-43b7-94f2-4e0e59397a57.png) Copy the web app URL to your clip board / note pad. Then Click "OK". -![22 1-deploy-as-web-app](https://cloud.githubusercontent.com/assets/194400/10558255/6eec31e2-74c1-11e5-9c07-cea6209526df.png) +![6-4-deploy-as-web-app](https://user-images.githubusercontent.com/1406149/148702011-95587469-bec5-4d5a-9ddf-18ed0043bced.png) ### 7. Create your *basic* HTML Form @@ -152,9 +153,9 @@ Open the inbox for the email address you set in **Step 3** (*above*) # *Part Two - Make It Look Good* ... -We are going to keep this ***Super Lean*** by using [**PURE CSS**](http://purecss.io/start/) +We are going to keep this ***Super Lean*** by using [**PURE CSS**](https://purecss.io/start/) for our Style (*fix the "ugly" HTML Form in step 8*). -And `submit` the form using [**JQuery** "***AJAX***"](http://api.jquery.com/jquery.ajax/) to keep the person +And `submit` the form using [**JQuery** "***AJAX***"](https://api.jquery.com/jquery.ajax/) to keep the person on your page/site (*avoid "ugly" response page*) ### 10. Submit the Form using **JavaScript** "***AJAX***" @@ -196,7 +197,7 @@ Tailor your message by editing the `thankyou_message` div. ### 12. Use CSS to Make the Form *Look Good* -For `this` *example* we are using ***Pure CSS***: http://purecss.io/start/ +For `this` *example* we are using ***Pure CSS***: https://purecss.io/start/ because its ***light weight*** (***4.0KB minified and gzipped***) and *solves* our current "*problem*": Making it Look Good. @@ -224,7 +225,7 @@ You can modify this though, via the script editor. The line: result += "

" + key + "

" + obj[key] + "
"; ``` -has all you need. You can adjust the markup to suit you. We chose an `

` because it was the best size for the email, and added the small amount of CSS to it to fix the capitalisation (the keys are all lower case in the JS object) and a bit of default spacing. While inline styles like this are generally bad practice on normal web pages, for email HTML they're about the only reliable way to do CSS! +has all you need. You can adjust the markup to suit you. We chose an `

` because it was the best size for the email, and added the small amount of CSS to it to fix the capitalisation (the keys are all lower case in the JS object) and a bit of default spacing. While inline styles like this are generally bad practice on normal web pages, for email HTML they're about the only reliable way to do CSS! We went with a `
` for the value part, because it could be anything - single-line, multiline (a `

` for example wouldn't cut it). While we're here, there's also a `replyTo` option for the `sendEmail()` method which is commented out by default: @@ -254,7 +255,7 @@ the data into a spreadsheet is safer and less prone to data loss. ![record_data example](https://cloud.githubusercontent.com/assets/194400/10581613/8b4f9ad4-767b-11e5-90cc-962a9d6acc91.png) -This will record the data received from the `POST` as a *row* in the spreadsheet. +This will record the data received from the `POST` as a *row* in the spreadsheet. See: [**google-apps-script.js**](google-apps-script.js) for the full code you can *copy-paste*. ### 15. Save a New Version and Re-Publish it @@ -338,35 +339,6 @@ e.g: Let us know if you have any questions! -## SPAM prevention - -In order to avoid getting spammed and fill up google apps usage quota, we will be implementing a simple SPAM prevention technique that's known as Honeypot where it essentially creates a hidden text field that if filled up is assumed as a spam bot and prevents the form from submit. - -```html - - - - - -

-``` - -```css -#honeypot { - display: none; /*makes the field not visible to humans*/ -} -``` - -```javascript -/* form-submission-handler.js */ -/* remove the comment from this if statement */ - -if (validateHuman(data.honeypot)) { //if form is filled, form will not be submitted - return false; -} - -``` - ## Uploading Files @@ -404,6 +376,9 @@ if (validateHuman(data.honeypot)) { //if form is filled, form will not be submi - No. While data that is sent over POST may be more protected, the information could easily be intercepted by a third party or middleman, and Google has complete access to the data inside a Google Spreadsheet. Email is also not a very secure communication medium by default. We would recommend you invest in a secure platform and server for storing your data if this is a requirement. +8. _What if my data is sent or stored in the wrong order?_ + +- If your data is in the wrong order, it is recommended to verify that you are loading the clientside JS correctly. The most effective way to do this is to place a `debugger` call inside the `handleFormSubmit()` function, and, if it hits the debugger and opens the respective Dev Tools for the broswer/environment, then the clientside JS is being loaded correctly. If the debugger isn't hit, then the JS is **not** either not loaded or not targeting your form, defaulting the data to a plain object which will have its own alphabetic ordering instead. ## Background Reading @@ -412,5 +387,5 @@ if (validateHuman(data.honeypot)) { //if form is filled, form will not be submi https://developers.google.com/apps-script/reference/base/logger + Simple Mail Merge using Google Spreadsheets: https://developers.google.com/apps-script/articles/mail_merge -+ Original Tutorial: AJAX post to google spreadsheet: http://stackoverflow.com/questions/10000020/ajax-post-to-google-spreadsheet which points to: ++ Original Tutorial: AJAX post to google spreadsheet: https://stackoverflow.com/questions/10000020/ajax-post-to-google-spreadsheet which points to: + https://mashe.hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form-postget-submit-method/ diff --git a/README.pt.md b/README.pt.md new file mode 100644 index 0000000..27ef694 --- /dev/null +++ b/README.pt.md @@ -0,0 +1,374 @@ +# Envie e-mail a partir de um formulário HTML *estático* usando o Google Apps Mail! + +**Language : [English](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/blob/master/README.md) | [한국어](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/blob/master/README.ko.md#google-apps-mail을-사용해-정적-html-form에서-메일을-보내세요) | [Español](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/blob/master/README.es.md#older-translation) | `Português`** + +
+ +Um **exemplo passo a passo** do uso de um **formulário HTML** para enviar uma mensagem de "Fale conosco" por e-mail sem um servidor de back-end usando um Google Script - sem PHP, Python, Ruby, Java, Node.js etc. + +Veja um exemplo funcional aqui: https://dwyl.github.io/learn-to-send-email-via-google-script-html-no-server/ + +**_Observação_**: com o RGPD da UE, recomendamos [pesquisar recomendações sobre privacidade do usuário;](https://cloud.google.com/privacy/gdpr) você pode ser responsabilizado pela proteção dos dados pessoais dos usuários e deve fornecer a eles uma maneira de entrar em contato com você. + +**_Aviso_**: a API do Google tem limites para o número de e-mails que podem ser enviados por dia. +Isso pode variar na sua conta do Google, consulte [os limites aqui](https://developers.google.com/apps-script/guides/services/quotas). +Recomendamos implementar este tutorial até a Parte 3, já que os dados sempre serão adicionados à planilha/folha de cálculo primeiro +e enviados por e-mail em seguida, se possível. + +## Por quê? + +Precisávamos de uma maneira de enviar um e-mail de uma página HTML "*estática*" quando não *temos* (ou não *queremos ter*) um *servidor*. + +### *Principais vantagens* + ++ Sem "*back-end*" para implantar/manter/pagar ++ ***Totalmente personalizável*** - cada aspecto é personalizável! ++ E-mail *enviado via* ***Google Mail*** que está na ***lista de permissões em todos os lugares*** (*alta taxa de entregabilidade bem-sucedida*) ++ **Colete/Armazene** quaisquer **dados do formulário** em uma ***planilha*** para facilitar a visualização +(*perfeito se você precisar compartilhar com pessoas não técnicas*) + +## O quê? + +Em vez de usar um servidor para enviar seus e-mails, +o que é *fácil* mas precisa de *manutenção*, +use o Google para enviar e-mails por você +e use o Google Spreadsheets para manter o registro dos dados! + +> Você *pode* usar um serviço "*gratuito*" como https://formspree.io/ para processar os envios de seus formulários +se não se importar para onde está enviando seus dados e quiser gerenciar os dados enviados +na caixa de entrada do seu e-mail (*bagunçado ... eca*!) +*Ou*... você pode *investir* alguns minutos e manter os dados privados/gerenciáveis. *A escolha é sua*. + +## *Como*? + +### 1. Faça uma cópia da planilha de modelo + +> Sample: https://docs.google.com/spreadsheets/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy + +Faça login na sua conta Google e clique em "**Fazer uma cópia**..." + +![1-make-copy](https://user-images.githubusercontent.com/1406149/29245471-feb7b034-7f97-11e7-9c0d-f06238e8362b.png) + +Isso deverá exibir para você algo como isso: + +![2-copy-of-sheet](https://cloud.githubusercontent.com/assets/194400/10559710/3aec92f0-74ef-11e5-9295-f1988a23257b.png) + +> Observação: fique à vontade para alterar o nome da Cópia para o que quiser, isso não vai afetar o resultado. + +### 2. Abra o Editor de Script + +Abra o **Editor de script...** clicando em "**Ferramentas**" > "**Editor de script...**" + +![2 script-editor](https://cloud.githubusercontent.com/assets/194400/10559732/8db2b9f6-74ef-11e5-8bf2-de286f079929.png) + +Aqui está um *snapshot* do script que você precisa (*até este ponto do exercício*): [google-script-just-email.js](https://raw.githubusercontent.com/dwyl/learn-to-send-email-via-google-script-html-no-server/1d1c6727f69dec64a6b7f6bd6ff0dd72d0374210/google-script-just-email.js) + +### 3. Defina o valor de `TO_ADDRESS` no Script + +**_Aviso:_** Se você não descomentar e definir seu e-mail como o valor de `TO_ADDRESS`, é possível que alguém que tenha habilidades na web altere seu formulário e envie os dados do e-mail para um endereço de e-mail definido por ele. + +Este risco pode ser pouco provável. Em vez disso, se quiser, pode deixar essa variável comentada se aceita esse possível risco e quiser ter a conveniência de definir essa variável do endereço do e-mail dentro do seu formulário HTML com um atributo `data-email`. Isso permite que você altere facilmente para onde enviar e-mails dentro de seu formulário HTML sem precisar voltar pelos passos 2-6. Essa funcionalidade *exige* que você use o arquivo JS fornecido na Parte Dois, Passo 10. + +Se você não quer aceitar esse risco em potencial, descomente o código da variável `TO_ADDRESS` e defina este valor igual ao e-mail que deverá receber os dados do formulário ao ser enviado. + +![3-script-editor-showing-script](https://cloud.githubusercontent.com/assets/194400/10560379/9efa5b3a-7501-11e5-96ba-a9e3b2d77ee4.png) + +### 4. Salve uma *nova versão* do seu Script + +Não é imediatamente *óbvio* mas você deve *clicar* em "**Arquivo**" > "**Gerenciar versões...**" +**_Nota de tradução:_** pode ser que a interface em `https://script.google.com/` não esteja traduzida, mesmo se seu idioma esteja definido como Português por padrão, o caminho para salvar a nova versão então seria (em inglês): "**File**" > "**Manage versions...**" + +![19 google-script-no-save-new-version](https://cloud.githubusercontent.com/assets/194400/10558249/527f3c98-74c1-11e5-8290-5af7fa7f5f75.png) + +Em seguida, *crie* sua nova versão: + +![20 google-script-save-new-version](https://cloud.githubusercontent.com/assets/194400/10558250/53d21d5e-74c1-11e5-88c5-7bc2d8ce6228.png) + +### 5. Publique o script *atualizado* como um Web App + +![20 a-publish](https://cloud.githubusercontent.com/assets/194400/10558288/50980aa8-74c2-11e5-8576-72084a564779.png) + +Selecione a versão *mais recente* do projeto para publicar. +:warning: Aviso: Você *deve* selecionar a opção `Qualquer um, mesmo anônimo` (`Anyone, even anonymous`) como a opção em 'Quem tem acesso ao aplicativo' ('Who has access to the app') ou as respostas do formulário não serão adicionadas à planilha! :warning: + +![21 deploy-new-version](https://cloud.githubusercontent.com/assets/194400/10558251/570a5428-74c1-11e5-8ced-5dd26d3de3c4.png) + +### 6. Autorize o script a enviar e-mails + +![5 auth-required](https://cloud.githubusercontent.com/assets/194400/10560412/89d3fb0c-7502-11e5-81ce-fb239bf545b2.png) + +A menos que você [verifique seu script com o Google](https://developers.google.com/apps-script/guides/client-verification#requesting_verification), você precisará clicar em "Avançado" e "Ir para ... (inseguro)" para conceder permissões a este aplicativo. + +![5-auth-failed-verification](https://user-images.githubusercontent.com/1406149/44312495-79583780-a3b6-11e8-9740-8c9b50f195d6.png) + +![5-allow-sending-emails](https://cloud.githubusercontent.com/assets/194400/10560416/a86a26ae-7502-11e5-9add-d5081d409af4.png) + +Copie o URL do web app para a área de transferência / bloco de notas. +Em seguida, clique em "OK". + +![22 1-deploy-as-web-app](https://cloud.githubusercontent.com/assets/194400/10558255/6eec31e2-74c1-11e5-9c07-cea6209526df.png) + + +### 7. Crie seu formulário HTML *básico* + +Usando o modelo `index.html` deste repositório, +crie seu próprio arquivo HTML com o formulário básico. (*salve o arquivo*) + +:warning: Se você já está tentando usar *seu próprio formulário* durante este passo, em vez do exemplo neste repositório: ++ Cada um dos elementos do seu formulário deve ter o atributo `name` igual ao nome da coluna na planilha do Google ++ A propriedade `class` do formulário deve ser `gform`, i.e. `
` + + Se quiser alterar isso mais tarde, você precisará criar sua própria versão do arquivo `form-submit-handler.js` e adicionar o valor esperado na `class` + + +> Lembre-se de alterar a propriedade `action` do formulário com a URL você copiou no passo anterior: + +![7-html-form](https://user-images.githubusercontent.com/1406149/44312329-9b9c8600-a3b3-11e8-9816-4bdbbc96dc62.png) + + +### 8. Abra o formulário HTML (*página*) no seu navegador + +Preencha o formulário HTML com alguns dados de teste: + +![html form](https://cloud.githubusercontent.com/assets/194400/10560494/674b64c4-7504-11e5-801a-b537d276f671.png) + +Envie o formulário. Você deve ver uma confirmação de que foi enviado: +![form sent](https://cloud.githubusercontent.com/assets/194400/10560501/8f605dd4-7504-11e5-8cd7-06d768beba4d.png) + +### 9. Verifique a caixa de entrada do e-mail que você configurou + +Abra a caixa de entrada do endereço de e-mail que você definiu no **Passo 3** (*acima*) + +![email received](https://cloud.githubusercontent.com/assets/194400/10560512/f87f1652-7504-11e5-8b0f-c342c395a193.png) + + +> ***Pronto***. É isso. Você acabou de criar um formulário HTML que envia e-mails! + +# *Parte Dois - Deixando mais bonito* ... + +Vamos manter isso ***Bem Enxuto*** usando o [**PURE CSS**](https://purecss.io/start/) para os nossos estilos (*arrumar o formulário HTML "feio" do passo 8*). +E enviar (`submit`) o formulário usando [**JQuery** "***AJAX***"](https://api.jquery.com/jquery.ajax/) para manter o usuário +na sua página/site (*evitar a página de resposta "feia"*) + +### 10. Enviar o formulário usando **JavaScript** "***AJAX***" + +Para *evitar* que a página mude para a resposta/resultado `JSON`, +precisamos enviar o formulário usando ***AJAX***. + +Baixe [este arquivo Javascript](form-submission-handler.js) e atualize seu `index.html` para incluir ele ao *final* do arquivo +(*antes do fechamento da tag``) + +```html + +``` + +**Aviso**: Se você não definiu a variável `TO_ADDRESS` no Passo 3, então será necessário incluir um atributo `data-email="example@email.net"` dentro do elemento principal do formulário. Veja o formulário de exemplo para mais detalhes. Caso contrário, se você definiu essa variável, não precisa deste atributo no formulário. + +Isso mantém a pessoa na mesma página. Sem atualizar. O próximo passo é fazer uma mensagem de agradecimento aparecer. + +### 11. Adicione uma mensagem de agradecimento personalizada exibida quando o formulário for enviado + +Depois de concluir o passo 10, você pode escolher adicionar uma mensagem de agradecimento após o envio. Adicione o seguinte código entre as tags `` e `
`: + +```html + +``` + +Isso agora exibirá uma *mensagem* de "Agradecimento" quando o formulário for enviado: + +![thankyou message](https://cloud.githubusercontent.com/assets/194400/10561147/4086a89a-7517-11e5-840d-7f490353e225.png) + +Ajuste sua mensagem editando o conteúdo da div `thankyou_message`. + +### 12. Usando CSS para fazer o formulário *ficar bonito* + +Para **este** *exemplo* estamos usando ***Pure CSS***: https://purecss.io/start/ +porque ele é ***leve*** (***4,0 KB minificado e gzipado***) +e *resolve* nosso "*problema*" atual: fazer ele ficar bonito. + +![PureCSS-Logo-Intro](https://github-cloud.s3.amazonaws.com/assets/194400/10565838/72d6d52a-75d2-11e5-9b92-ca02b1124920.png) + +![PureCSS-module-sizes](https://github-cloud.s3.amazonaws.com/assets/194400/10565844/8f4885a0-75d2-11e5-9490-e3fc42c32616.png) + +Sem gastar *tanto* tempo, podemos fazer o formulário *parecer* ***muito mais*** agradável: + +![contact form with pure css](https://github-cloud.s3.amazonaws.com/assets/194400/10566392/f38bc454-75dd-11e5-85dd-6819494a98f2.png) + +### 13. Faça o e-mail ficar bonito também! + +Por padrão, o corpo do e-mail enviado contém os pares de chave-valor do formulário, com a chave como um `

` e o valor como um `
`. Esta é uma visulização relativamente básica e infalível dos dados. + +Você deve obter algo parecido com: +![Nicely formatted email](https://cloud.githubusercontent.com/assets/5610747/22168070/335ad734-df62-11e6-9523-6e193e94151f.png) + +> Lembre-se de que este é um projeto em andamento e pode permitir que você receba mais do que esperava no e-mail. Como o conteúdo do e-mail agora está passando por todos os dados enviados no formulário, se um robô ou usuário mal-intencionado decidir fazer um `POST` com mais dados do que você pediu, você provavelmente os receberá na sua caixa de entrada. Use com cautela por enquanto. Estamos investigando melhorias. + +No entanto, você pode modificar isso, por meio do **Editor de script**. A linha: + +```javascript +result += "

" + key + "

" + obj[key] + "
"; +``` + +tem tudo que você precisa. Você pode ajustar a marcação para se adequar à sua necessidade. +Escolhemos um `

` porque era o melhor tamanho para o e-mail e adicionamos uma pequena quantidade de CSS para corrigir a capitalização (as letras são todas minúsculas no objeto JS) e um pouco de espaçamento por padrão. +Embora estilos inline como estes sejam geralmente má prática em páginas web normais, para um HTML no e-mail eles são a única maneira fiável de usar CSS! +Optamos por um `
` para a parte do valor, porque ele poderia ser qualquer coisa - uma linha só, múltiplas linhas (um `

` por exemplo não seria suficiente). + +Aproveitando que já estamos aqui, também há uma opção `replyTo` para o método `sendEmail()` que está comentada por padrão: + +```javascript +MailApp.sendEmail({ + to: TO_ADDRESS, + subject: "Contact form submitted", + // replyTo: String(mailData.email), // Isso é opcional e depende do seu formulário possuir um campo denominado `email` + htmlBody: formatMailBody(mailData) +}); +``` + +Você pode descomentar essa opção se quiser adicionar um campo de "Responder para..." no seu e-mail. O exemplo no script definirá o "Responder para..." (`reply-to`) como o e-mail enviado no formulário. + +A documentação do Google fornece mais informações sobre o método `MailApp.sendEmail` (por exemplo `cc`/`bcc` etc.) se estiver interessado: https://developers.google.com/apps-script/reference/mail/mail-app + +# *Parte Três - Armazenar os dados enviados pelo formulário de contato em uma planilha* + +Enviar os dados do formulário diretamente para a caixa de entrada +do seu e-mail é um *ótimo* primeiro passo, mas podemos fazer melhor. +Além disso, conforme já vimos acima, o Google tem limites de quantos +e-mails você pode enviar por dia, portanto, armazenar os dados em uma +planilha é mais seguro e menos sujeito a perda de informações. + +### 14. Adicione a função `record_data` no seu Google Apps Script + +![record_data example](https://cloud.githubusercontent.com/assets/194400/10581613/8b4f9ad4-767b-11e5-90cc-962a9d6acc91.png) + +Isso irá salvar os dados recebidos do `POST` como uma *linha* na planilha. +Consulte: [**google-apps-script.js**](google-apps-script.js) para o código completo que você pode *copiar e colar*. + +### 15. Salve uma nova versão e publique-a novamente + +Siga os passos 4, 5 e 6 para salvar uma nova versão e ***publicar novamente*** (***re-publish***) o script. + +### 16. Teste novamente o envio do formulário + +![submit the form](https://cloud.githubusercontent.com/assets/194400/10582654/cf3081e6-7680-11e5-9fd1-b989a8ba0b65.png) + +### 17. Confirme se os dados foram inseridos na planilha + +![17-confirm-data-inserted](https://cloud.githubusercontent.com/assets/194400/10582676/eb8af5d8-7680-11e5-92bb-30dd08d2d7b3.png) + + +### _Live_ Server (_no seu `localhost`_) + +Como estamos carregando arquivos **.js** externos, nosso navegador +não nos _permite_ simplesmente abrir o **index.html** de um diretório +local para testar o formulário. + +Abra seu terminal e execute o commando +para _**instalar** o **node_modules** e **iniciar** o **live server**_: + +```sh +npm install live-server --save-dev && node_modules/.bin/live-server --port=8000 +``` + +A instalação levará um minuto para concluir, +mas assim que terminar, seu `live-server` será inicializado. + +Isso inicia um servidor HTTP Node.js na porta 8000 +e abre o formulário, que você acabou de criar, em seu navegador padrão. +Se quiser atualizar os estilos de formulário em **style.css** +ou o Javascript client-side em **form-submit-handler.js**, +certifique-se de editar o **index.html** para carregar esses recursos +localmente em vez de por meio do GitHub. + +> **Observação**: Esta é apenas uma _pequena_ amostra do Node.js para iniciantes. +Você **não** precisa do Node.js para "publicar" este formulário, +você consegue fazer ele funcionar em **_qualquer_ servidor web** que hospede HTML/CSS/JavaScript. +Se você nunca usou Node.js antes, veja: http://nodeguide.com/beginner.html, +mas para os fins deste exercício (_enviar um formulário **sem** um servidor_), +você _não **precisa**_ do Node.js ou do `live-server` +eles são apenas uma adição _agradável_ para quando se está criando +seu formulário, pois eles automaticamente recarregam a página quando você +faz alterações nos arquivos do projeto usando seu editor de texto! + + +# *Quer mais*? + +Se quiser que continuemos com este tutorial, [***por favor nos avise***!](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/issues) + +Para sua conveniência, hospedamos uma demonstração do formulário no GitHub Pages, +confira para ver o código e como funciona: +https://dwyl.github.io/learn-to-send-email-via-google-script-html-no-server/ + + +## Adicione seus próprios campos! + +Em resposta à [solicitação de Henry Beary](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/issues/9), +tornamos o tratamento do formulário *genérico*, o que significa que agora você pode adicionar quaisquer campos que desejar ao formulário. + +Também criamos um formulário, `test.html`, que usa todos os tipos de elementos de input para que você possa simplesmente copiar e colar os elementos como quiser em seu próprio formulário. Apenas certifique-se de atualizar seus `name`s e `id`s. Você pode encontrar um exemplo funcional deste formulário de teste aqui: +https://dwyl.github.io/learn-to-send-email-via-google-script-html-no-server/test.html + +Lembre-se de incluir os campos *dentro* do formulário que possui a classe `gform` +e certifique-se de que o `name` do elemento do formulário corresponda ao título da nova coluna em sua planilha. +Por exemplo: +```HTML +

+ + +
+``` +Com isso você consegue salvar a cor favorita da pessoa. +Por exemplo: +![new-field-contains-data](https://cloud.githubusercontent.com/assets/194400/11547132/9f162f6a-9949-11e5-89ac-aeb91e025844.png) + +Nos avisem se tiver quaisquer dúvidas! + +## Enviando arquivos + +[Este material](https://www.labnol.org/internet/receive-files-in-google-drive/19697/) pode ajudá-lo a dar início no envio de arquivos para o Google Drive a partir do Google Script. + + +## Perguntas Frequentes (FAQ's) + +1. _Como posso obter ajuda para usar este tutorial?_ + +- Sinta-se à vontade para [criar uma issue](https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/issues/new) descrevendo detalhadamente quais passos você realizou e o que não está funcionando. Para obter uma resposta relevante, forneça um [exemplo funcional](https://stackoverflow.com/help/mcve) que reproduza seu problema. Por exemplo, veja [este CodePen de modelo](https://codepen.io/mckennapsean/pen/gdYzNY). + +2. _Posso obter permissão de edição na planilha de modelo?_ + +- Não. Ela está sendo usada para demonstrar um exemplo funcional que qualquer pessoa pode copiar, e uma versão editável poderia quebrar acidentalmente, ou maliciosamente, por qualquer usuário. + +3. _Por que a página está me encaminhando para um monte de texto quando clico em enviar?_ + +- Você não está carregando corretamente o JavaScript necessário para enviar os dados via AJAX ou seu navegador não oferece suporte a AJAX. Por favor, consulte a Parte 2 e verifique os logs do seu console caso esteja encontrando erros. + +4. _Por que a página não está enviando o formulário com sucesso?_ + +- Verifique os logs do console JavaScript do seu navegador. Pode haver um erro ao ler o JavaScript que fornecemos. Pode haver erros ao enviar o formulário. É necessário que seu formulário tenha uma classe de `gform` e também um atributo `data-email` se você não definiu a variável `TO_ADDRESS` dentro do arquivo do Google Script. Além disso, o código JavaScript fornecido também espera encontrar um elemento de formulário de e-mail que usa para verificação, uma mensagem de aviso para esse elemento quando um e-mail impróprio é enviado e, em seguida, um div de `agradecimento` (`thank-you`) também, que é mostrado após ser enviado com sucesso. Certifique-se de que todos esses elementos HTML estejam em seu formulário. Consulte o arquivo de exemplo para obter códigos que você pode copiar e colar. Quando tiver todos esses elementos e um formulário configurado corretamente, não deverá ver nenhuma mensagem de erro no console JavaScript ao clicar em enviar. + +5. _A página está dizendo que meus dados foram enviados, mas por que eles não estão sendo salvos ou enviados para mim?_ + +- Quando você copiou a planilha e publicou o Google Script, você definiu as permissões como "Qualquer pessoa, até mesmo anônima" ("Anyone, even Anonymous")? Isso é necessário para que o formulário funcione, já que qualquer pessoa na Internet pode clicar em enviar para fornecer seus dados. Certifique-se de ter publicado a versão adequada do script e usado "Gerenciar versões..." ao fazer alterações. + +6. _Como altero os e-mails que este script envia?_ + +- Você pode ajustar o Google Script no servidor para enviar e-mails para qualquer pessoa e no formato que quiser. Isso pode ser usado para enviar um e-mail de confirmação para aqueles que entram em contato com você, mas não adicionamos esse recurso a este tutorial para evitar possível spam. Porém, o remetente do e-mail sempre será a conta do Google que você usar para criar o formulário/script. Mais detalhes sobre como personalizar o e-mail podem ser encontrados [na documentação da `MailApp` API](https://developers.google.com/apps-script/reference/mail/mail-app). Em vez disso, você pode usar [a `GmailApp` API](https://developers.google.com/apps-script/reference/gmail/), que pode ser mais flexível para certos casos de uso. + + +7. _Isso é seguro? Posso usá-lo para dados sensíveis?_ + +- Não. Embora os dados enviados por POST possam estar mais protegidos, as informações podem ser facilmente interceptadas por terceiros ou intermediários, e o Google tem acesso total aos dados em uma planilha do Google. E-mail também não é um meio de comunicação muito seguro por padrão. Recomendamos que você invista em uma plataforma e servidor seguros para armazenar seus dados, se isso for um requisito. + + +## Leituras complementares + ++ Google Apps Scripts Basics: https://developers.google.com/apps-script/articles ++ Logger (como `console.log`): +https://developers.google.com/apps-script/reference/base/logger ++ Mail Merge simples utilizando Google Spreadsheets: +https://developers.google.com/apps-script/articles/mail_merge ++ Tutorial original: AJAX post to google spreadsheet: https://stackoverflow.com/questions/10000020/ajax-post-to-google-spreadsheet que direciona para: + + https://mashe.hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form-postget-submit-method/ diff --git a/form-submission-handler.js b/form-submission-handler.js index b0c2aca..d65efdb 100644 --- a/form-submission-handler.js +++ b/form-submission-handler.js @@ -1,24 +1,15 @@ (function() { - function validEmail(email) { - var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; - return re.test(email); - } - - function validateHuman(honeypot) { - if (honeypot) { //if hidden form filled up - console.log("Robot Detected!"); - return true; - } else { - console.log("Welcome Human!"); - } - } - // get all data in form and return object function getFormData(form) { var elements = form.elements; + var honeypot; var fields = Object.keys(elements).filter(function(k) { - return (elements[k].name !== "honeypot"); + if (elements[k].name === "honeypot") { + honeypot = elements[k].value; + return false; + } + return true; }).map(function(k) { if(elements[k].name !== undefined) { return elements[k].name; @@ -53,39 +44,32 @@ // add form-specific values into the data formData.formDataNameOrder = JSON.stringify(fields); formData.formGoogleSheetName = form.dataset.sheet || "responses"; // default sheet name - formData.formGoogleSendEmail = form.dataset.email || ""; // no email by default + formData.formGoogleSendEmail + = form.dataset.email || ""; // no email by default - console.log(formData); - return formData; + return {data: formData, honeypot: honeypot}; } function handleFormSubmit(event) { // handles form submit without any jquery event.preventDefault(); // we are submitting via xhr below var form = event.target; - var data = getFormData(form); // get the values submitted in the form + var formData = getFormData(form); + var data = formData.data; - /* OPTION: Remove this comment to enable SPAM prevention, see README.md - if (validateHuman(data.honeypot)) { //if form is filled, form will not be submitted + // If a honeypot field is filled, assume it was done so by a spam bot. + if (formData.honeypot) { return false; } - */ - if( data.email && !validEmail(data.email) ) { // if email is not valid show error - var invalidEmail = form.querySelector(".email-invalid"); - if (invalidEmail) { - invalidEmail.style.display = "block"; - return false; - } - } else { - disableAllButtons(form); - var url = form.action; - var xhr = new XMLHttpRequest(); - xhr.open('POST', url); - // xhr.withCredentials = true; - xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); - xhr.onreadystatechange = function() { - console.log(xhr.status, xhr.statusText); - console.log(xhr.responseText); + disableAllButtons(form); + var url = form.action; + var xhr = new XMLHttpRequest(); + xhr.open('POST', url); + // xhr.withCredentials = true; + xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + xhr.onreadystatechange = function() { + if (xhr.readyState === 4 && xhr.status === 200) { + form.reset(); var formElements = form.querySelector(".form-elements") if (formElements) { formElements.style.display = "none"; // hide form @@ -94,18 +78,16 @@ if (thankYouMessage) { thankYouMessage.style.display = "block"; } - return; - }; - // url encode form data for sending as post data - var encoded = Object.keys(data).map(function(k) { - return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]); - }).join('&'); - xhr.send(encoded); - } + } + }; + // url encode form data for sending as post data + var encoded = Object.keys(data).map(function(k) { + return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]); + }).join('&'); + xhr.send(encoded); } function loaded() { - console.log("Contact form submission handler loaded successfully."); // bind to the submit event of our form var forms = document.querySelectorAll("form.gform"); for (var i = 0; i < forms.length; i++) { diff --git a/index.html b/index.html index 9603c5f..00cd6d4 100644 --- a/index.html +++ b/index.html @@ -43,8 +43,6 @@

Contact Us!

-
@@ -52,6 +50,11 @@

Contact Us!

+
+ + +
+
diff --git a/react-index.jsx b/react-index.jsx new file mode 100644 index 0000000..5eb4136 --- /dev/null +++ b/react-index.jsx @@ -0,0 +1,380 @@ +import React, { useState, useEffect } from "react"; + +export default function ContactForm() { + // create a boolean for whether submit button is enabled or not + // set initial state to disabled + const [enabled, setEnabled] = useState(false); + // create variable to hold dat list regex + let dataList; + + // Define a RegEx schema matching each input's "name" attribute + // If you don't want to validate an input, put /.+/ + // + // /.+/ = match anything, but can't be empty + // + const schema = { + // text input + FName: /.+/, + LName: /.+/, + Email: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, + // text area + Msg: /.+/, + // color input + Clr: /.+/, + // radio button group + radioGroup: /.+/, + // checkboxes + checkboxes: /.+/, + // menu selects + menu: /.+/, + // list + list: /.+/, + // datalist + datalist: new RegExp(dataList), + // honeypot (must be blank) + honeypot: /^$/, + }; + + // on component load + useEffect(() => { + // Hide thank you message + document.querySelector(".thankyou_message").style.display = "none"; + // Hide Honey Pot + document.querySelector(".honeypot-field").style.display = "none"; + + // Set the first item in list to be checked on each radio button set + document.querySelectorAll(".radio-buttons").forEach((buttonSet) => { + buttonSet.querySelector("input[type=radio]").checked = true; + }); + + // set the first item in list to be checked on each menu set + document.querySelectorAll(".select-menu:first-child").selected = true; + + // grab the values in the datalist for validation + dataList = Array.from(document.querySelector(".dataList").children) + .map(({ value }) => { + value = value.replaceAll("\\", "\\\\"); + value = value.replaceAll(".", "."); + value = value.replaceAll("^", "^"); + value = value.replaceAll("$", "$"); + value = value.replaceAll("*", "*"); + value = value.replaceAll("+", "\\+"); + value = value.replaceAll("-", "-"); + value = value.replaceAll("?", "?"); + value = value.replaceAll("(", "("); + value = value.replaceAll(")", ")"); + value = value.replaceAll("[", "["); + value = value.replaceAll("]", "]"); + value = value.replaceAll("{", "{"); + value = value.replaceAll("}", "}"); + value = value.replaceAll("|", "|"); + return value; + }) + .join("|"); + + console.log(new RegExp(dataList)); + + // CHECK ALL FORMS ON PAGE + // IF AN INPUT.NAME IS NOT PRESENT IN SCHEMA THEN ADD IT WITH DEFAULT /.+/ + }, []); + + // validate data upon change + function handleChange() { + const form = document.querySelector(".gform"); + + // start out with valid, then check for invalid + let valid = true; + + // grab the data from the form + const data = new FormData(form); + + //cycle through all data + for (const [nameAttribute, value] of data) { + console.log(`Name: ${nameAttribute} Value: ${value}`); + // if there's any invalid data, flag it as invalid + if (!schema[nameAttribute].test(value)) valid = false; + } + + // if it makes it through all inputs without flagging it as bad, + // then input is valid + setEnabled(valid); + } + + // form submission function + function submitForm(e) { + // prevent default behaviour (full page reload) + e.preventDefault(); + + const form = document.querySelector(".gform"); + + // create a FormData object to store inputs in + const data = new FormData(form); + + // use FormData to send POST request through Axios + // url is the Web app URL acquired at the end of step 6 + fetch( + "https://script.google.com/macros/s/...your-google-script-url-here.../exec", + { + body: data, + method: "post", + } + ) + //handle success + .then(function (response) { + if (response.status === 200) { + const formElements = document.querySelector(".form-elements"); + if (formElements) { + formElements.style.display = "none"; // hide form + } + const thankYouMessage = document.querySelector(".thankyou_message"); + if (thankYouMessage) { + thankYouMessage.style.display = "flex"; + } + } + }) + + // handle failure + .catch(function (response) { + //handle error + alert( + `Form Submission Error. Please Try Again Later. Response Code: ${response.status}` + ); + }); + } + + // render form + return ( + <> +
+
+ { + // Text Fields + } +
+ +

Input Boxes

+ + + +
+ + +
+ + +
+ { + // Text Area + } +
+ +

Text Area

+ + +