LoginSignup
6
1
@nekoharuyuki(Neko Haruyuki)

お問い合せフォームをGithubとGoogle Formで用意する

Last updated at Posted at 2022-12-04

はじめに

完全に無料で運用出来るお問い合わせフォームを作成したいと思い作成しました。

警告
※　こちらのリンクからのお問い合せは本当に必要な場合のみでお願いします。

通常、お問い合わせフォームを作成する場合、AWS lambda や Google Cloud Functions でお問い合わせがあったことを知らせるアプリケーションを作成するか、 他サービスのフォームを埋め込むことになります。しかし、運用には費用がかかり手軽ではありません...。

この記事では Github と Google フォーム を使って、手軽にお問い合わせフォームを作成します。
また、お問い合わせいただいた方に、問い合わせが行われたことを通知するためのメールで自動返信を行う処理も作成しています。

お問い合わせフォームの作成要件

お問い合わせフォームの作成に伴い、以下の要件を満たす状態になるように考えました。

  • 完全に無料で運用する。
  • お問い合わせを簡単に管理出来る。
  • お問い合わせいただいた方に、問い合わせが行われたことを通知するためのメールで自動返信する。

事前準備

以下のサービスを利用する事で無料で開発を行いました。

  • Githubアカウント
  • Googleアカウント
    　　- フォーム
    　　- スプレッドシート
    　　- Gmail

実装

以下の手順で実装を行いました。

サイト用にリポジトリを作成する

Githubに新規でリポジトリを作成し、 こちら の内容通りに、GitHub Pages サイトを作成します。
お問い合わせフォームのデザインは下記のサイトから気に入ったデザインの html / css / javascript をコピーして、 GitHub Pages サイトを作成します。

参考記事

Google フォームでお問い合わせフォームを作る

Googleフォームを使った「お問い合わせフォーム」 の作成を行います。
Googleフォーム で以下の情報を入力してもらえるように設定します。

  • 名前・会社名　（必須）
  • メールアドレス　（必須）
  • お問い合わせ内容

参考記事

自動返信メールを送る 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 フォームを自作の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>

	<!-- Google Form -->
	<form
		action="https://docs.google.com/forms/~~~~~~~~~/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.１２３４５６７８９"
				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.１２３４５６７８９"
				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.１２３４５６７８９"
				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%;
	}
}

参考記事

まとめ

完全に無料で運用出来るお問い合わせフォームの作成方法をざっくりとまとめました。
作成したソースコードは こちら です。
参考にして頂けると幸いです。

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
1