お問い合せフォームをGithubとGoogle Formで用意する
はじめに
完全に無料で運用出来るお問い合わせフォームを作成したいと思い作成しました。
完成したもののリンク
警告
※ こちらのリンクからのお問い合せは本当に必要な場合のみでお願いします。
通常、お問い合わせフォームを作成する場合、AWS lambda や Google Cloud Functions でお問い合わせがあったことを知らせるアプリケーションを作成するか、 他サービスのフォームを埋め込むことになります。しかし、運用には費用がかかり手軽ではありません...。
この記事では Github と Google フォーム を使って、手軽にお問い合わせフォームを作成します。
また、お問い合わせいただいた方に、問い合わせが行われたことを通知するためのメールで自動返信を行う処理も作成しています。
お問い合わせフォームの作成要件
お問い合わせフォームの作成に伴い、以下の要件を満たす状態になるように考えました。
完全に無料で運用する。
お問い合わせを簡単に管理出来る。
お問い合わせいただいた方に、問い合わせが行われたことを通知するためのメールで自動返信する。
事前準備
以下のサービスを利用する事で無料で開発を行いました。
Githubアカウント
Googleアカウント
- フォーム
- スプレッドシート
- Gmail
実装
以下の手順で実装を行いました。
サイト用にリポジトリを作成する
Githubに新規でリポジトリを作成し、 こちら の内容通りに、GitHub Pages サイトを作成します。
お問い合わせフォームのデザインは下記のサイトから気に入ったデザインの html / css / javascript をコピーして、 GitHub Pages サイトを作成します。
お問い合わせ殺到！ おしゃれデザインすぎるフォームをCSSコピペで実装｜デシノン
https://deshinon.com
参考記事
GitHub Pages サイトを作成する - GitHub Docs
https://docs.github.com
Google フォームでお問い合わせフォームを作る
Googleフォームを使った「お問い合わせフォーム」 の作成を行います。
Googleフォーム で以下の情報を入力してもらえるように設定します。
お問い合せフォーム
https://docs.google.com
名前・会社名 （必須）
メールアドレス （必須）
お問い合わせ内容
参考記事
無料で簡単！Googleフォームで「お問い合わせフォーム」を作成する
https://tonari-it.com
自動返信メールを送る Google Apps Script を実装する
Googleフォーム で作成したお問い合せの結果を、スプレッドシートに保存するように設定します。
設定が完了したら、スプレッドシートに以下のscriptを取り込みます。
appsscript.json
{
"timeZone": "Asia/Tokyo",
"dependencies": {},
"webapp": {
"access": "ANYONE",
"executeAs": "USER_ACCESSING"
},
"exceptionLogging": "STACKDRIVER",
"oauthScopes": [
"https://www.googleapis.com/auth/script.send_mail",
"https://www.googleapis.com/auth/script.external_request"
],
"runtimeVersion": "V8"
}
sendmail.gs
function onFormSubmit(e) {
// フォームの回答を取得
var name = e.namedValues['名前・会社名'][0];
var email = e.namedValues['メールアドレス'][0];
var message = e.namedValues['お問い合わせ内容'][0];
// 自動返信メール件名
var subject = 'お問い合わせいただきありがとうございました。';
// 自動返信メール本文
var body = name + '様\n' +
'\n' +
'この度はお問い合わせいただき、誠にありがとうございました。' +
'\n' +
'後日、改めてご連絡させていただきますので\n' +
'よろしくお願い申し上げます。\n' +
'\n' +
'─────────────────────────\n' +
'ご送信内容の確認\n' +
'─────────────────────────\n' +
'\n' +
'【氏名】\n' +
name + '\n' +
'\n' +
'【メールアドレス】\n' +
email + '\n' +
'\n' +
'【お問い合わせ内容】\n' +
message;
// メール送信
MailApp.sendEmail({
to: email,
subject: subject,
body: body
});
keys = Object.keys(e.namedValues).sort()
qa_list = keys.map( key => "### " + key + "\n" + e.namedValues[key] + "\n")
url = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
token = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
options = {
"method": "post",
"headers" : {
"Authorization": "token " + token,
"Accept": "application/vnd.github.v3+json"
},
"payload" : JSON.stringify({
"title": "[お問い合せ] " + name + "様",
"body": qa_list.join("\n")
})
}
UrlFetchApp.fetch(url, options)
おまけ
添付したコードでは、自動返信メールを送った後に、Github の issue を作成しています。
お問い合せを issue で管理出来るので便利です。
Google Formの回答からGitHubのissueを作る - Qiita
https://qiita.com
参考記事
Google フォームでお問い合わせフォームを作り、自動返信メールを送る | nansystem
https://nansystem.com
Google フォームを自作のHTML/CSSに取り込む
Googleフォーム で 「ページのソースを表示」 を行い、各種値を取得し、入れ込みます。
サンプルコード
サンプルコード
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>お問い合せ</title>
</head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-158207338-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-158207338-1');
</script>
<!-- Google Form -->
<form
action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSeMkXgsT8_xs4mIiF-bc6InDCAwknqLiy5Gh-JrQGnCHAPrJQ/formResponse"
method="POST"
target="hidden_iframe"
onsubmit="submitted=true;"
class="c-form"
>
<link rel="stylesheet" href="assets/css/main.css" />
<h1 style="text-align: center;">お問い合せ</h1>
<p style="text-align: center; margin: 20px auto">
下記の項目を入力して、「送信する」のボタンを押して下さい。<br>必須の欄は必ず全てご記入下さい。
</p>
<p style="text-align: center; margin: 40px auto">
※回答までには1週間程度かかる場合もございます。御了承下さい。
</p>
<form class="c-form">
<div class="c-form__item">
<label class="c-form__label" for="field-name"
>名前・会社名<span class="c-form__required">必須</span></label
>
<input
name="entry.14683452"
class="c-form__input"
id="field-name"
placeholder="氏名"
type="text"
required="required"
/>
</div>
<div class="c-form__item">
<label class="c-form__label" for="field-mail"
>メールアドレス<span class="c-form__required">必須</span></label
>
<input
name="entry.448452954"
class="c-form__input"
id="field-mail"
placeholder="sample@gmail.com"
type="email"
required="required"
/>
</div>
<div class="c-form__item">
<label class="c-form__label" for="field-message">お問い合わせ内容</label>
<textarea
name="entry.1020368020"
class="c-form__input"
id="field-message"
placeholder="お問い合わせ内容"
></textarea>
</div>
<div class="c-form__submit">
<button type="submit">送信する</button>
</div>
</form>
<script type="text/javascript">
let submitted = false;
</script>
<iframe
name="hidden_iframe"
id="hidden_iframe"
style="display: none"
onload="if(submitted){window.location='./pages/thanks.html';}"
></iframe>
</html>
main.css
.c-form {
max-width: 600px;
margin: 0 auto;
}
.c-form__item {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
margin-bottom: 20px;
}
.c-form__label,
.c-form__input {
padding: 10px;
}
.c-form__label {
width: 90%;
}
.c-form__input {
width: 90%;
font-size: 16px;
border: solid 1px #333;
border-radius: 4px;
}
.c-form__input:focus-visible {
outline: Black auto 1px;
}
.c-form__required {
color: #fff;
background-color: Red;
border-radius: 4px;
padding: 5px 5px;
margin: 0 0 0 18px;
}
textarea.c-form__input {
height: 160px;
}
.c-form__submit {
text-align: center;
}
.c-form__submit button {
font-size: 18px;
font-weight: bold;
color: #fff;
background-color: green;
border: solid 1px green;
border-radius: 4px;
padding: 5px 32px;
transition: 0.4s;
cursor: pointer;
}
.c-form__submit button:hover {
color: green;
background-color: transparent;
}
@media (min-width: 640px) {
.c-form__item {
flex-wrap: nowrap;
}
.c-form__label {
width: 40%;
}
.c-form__input {
width: 55%;
}
}参考記事
Google FormをHTML/CSSでデザインしたフォームで運用する方法
https://zenn.dev
Googleフォームを自作のHTML/CSSに取り込む方法
https://monomonotech.jp
まとめ
完全に無料で運用出来るお問い合わせフォームの作成方法をざっくりとまとめました。
作成したソースコードは こちら です。
参考にして頂けると幸いです。
GitHub - nekoharuyuki/Form.io: お問い合せフォーム
https://github.com
noteを読んで頂き、最高のゲームがリリースされれば嬉しいです。 いただいたサポートはゲームの開発・研究費に使わせていただきます。