So-net無料ブログ作成

ジャバスクリプトとhtmlでフォームメールを送信する方法、の詳細 [備忘録]

昨日端折ったので、日本語で解説を。Gmailのアカウントを用意し、サインインしておきます。

1. 以下のサイトに行きます。

https://docs.google.com/spreadsheets/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/

2.  File→Make a copyをクリック
file-makeacopy.jpg

3. 新しい画面「Copy document」でそのまま「OK」を押す
copydocument.jpg

4. 新しいタブに「Copy of HTML Form Reponses」が表示されます。
copied.jpg

5. ToolからScript Editorを開きます。新しいタブが開かれます。
tool.jpg

6. 1行目、TO_ADDRESSの後ろにあるダブルクオーテーション内のメールアドレスを送信先のメールアドレスに変更します。
html_contact.jpg

7. FileからManage Versionsをクリックします。
manage_versions.jpg

8. 新しい画面で何を変更したか記入し(以下の場合メールアドレスの変更)、「Save new version」をクリック。すると変更した内容がそこに反映されます。OKをクリック。
manage_versions2.jpg

9. Pulish→Deploy as web app...をクリックします。
deploy.jpg

10. 最新のバージョンを選択し、Execute the app as:はMeでそのまま。Who has access to the app:は必ず「Anyone, even anonymous」に変更します。「Deploy」をクリック。
deploy2.jpg

11. 新しい画面「Authorization required」が出てきます。私の場合「Continue」ではなく「Review permissions」が出てきたのでクリック。
reviewpermissions.jpg

12. 使うGmailのアカウントを選択します。
chooseaccountjpg.jpg

13. 次の画面で「Allow(許可)」をクリックします。
Hi.jpg

14. 元のDeploy as web appで「Current web app URL」をコピーし、クリップボードやノート帳に保存しておきます。後で使います。「OK」をクリック。
Newdeploy.jpg

15. 後は自分で作成したhtmlのフォームメール部分に戻ります。例えばですが、上に紹介されたGitHubのフォームメールのテンプレートは以下のようでした。

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>contact form </title>
</head>
<body>
<form id="gform" method="POST" class="pure-form pure-form-stacked"
action="https://script.google.com/macros/s/AKfycbwMxYDrufp73bKdU8gMvxFDdHRuzcR4IKQUB33B7GqwyfyZS04/exec">
<!-- change the form action to your script url -->

<fieldset class="pure-group">
<label for="name">Name:
<input id="name" name="name" placeholder="What your Mom calls you" />
</fieldset>

<fieldset class="pure-group">
<label for="message">Message:
<textarea id="message" name="message" rows="10"
placeholder="Tell us what's on your mind...">
</fieldset>

<fieldset class="pure-group">
<label for="email">Your Email Address: </label>
<input id="email" name="email" type="email" value=""
required placeholder="your.name@email.com"/>
<span id="email-invalid" style="display:none">
Must be a valid email address
</fieldset>
<button class="button-success pure-button button-xlarge">
<i class="fa fa-paper-plane"> </i> Send </button>
</form>
</body>

注:
①フォームの各要素はnameの属性を持ち、またGoogle sheetにあるカラムの属性と一致しないといけません。例えばname="email"というのがhtml文にあり、さらにGoogle sheetにemailという項目がある必要があります。Google sheetでは項目も簡単に修正出来ました。
② formのid は”gform”、つまり <form id = "gform">として下さい。
③actionのurlは先程保存した自分の「Current web app URL」に置き換えてください。

16. htmlを保存し、ブラウザで開きます。そこでフォームに何か記入し、送信下さい。ブラウザには送信に成功したというメッセージが表示されるはずです。
taylor.jpg

17. 送信先のメール受信箱を確認して下さい。上でresult: "success"ならメールが届いていると思います。
message.jpg

ちなみに送信者がJSONのメッセージを見せられても見栄えがよくないので、GitHubのページはそれをジャバスクリプトによって改善する方法を提示していますが、それこそコピペで出来ますし大した話ではないので割愛します。

必要な方はお試しください。
nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:blog