職業訓練生時代に制作したポートフォリオサイトがあるのですが、そのサイトに問い合わせフォームを実装できたらいいなぁと思い、色々調べてみました。
その結果、以下のことが分かりました。
- 静的ページでも問い合わせフォームの実装が可能
- Googleフォームを使ってもオリジナルのデザインで実装が可能
- GASを使えばメール自動送信機能の実装が可能
上記を踏まえて、バックエンドの知識と経験が皆無の僕でも問い合わせフォームの実装が出来るのかどうかチャレンジしてみました。
今回はその過程をざっくりとした備忘録として残していきたいと思います。
実装内容
- 問い合わせフォームにメール自動送信機能を実装
- 静的ページに問い合わせフォームを実装
実装方法(ざっくり)
- GoogleフォームにGoogle Apps Script（以下、GAS）を組み込む
- 作成したGoogleフォームの情報をhtmlに組み込む
前提知識
今回の実装時点での僕の技術力は以下の程度です。
- htmlコーディングがある程度できる(実務1年4ヶ月)
- gitを使ったバージョン管理ができる（実務1年4ヶ月、基本的な操作のみ）
- 素のjavascriptを最近勉強し始めたけど実務に活かすところまではできていない（実務ではjquery.js,wow.jsのみ）
- GASはほぼ触ったことない
今回実装するのは問い合わせフォームで、html,cssは参考記事で紹介されているソースコードを拝借しつつ、自分の好きな見た目に変えていった感じです。
そのため、htmlコーディングに関しては基本的な知識があれば実装には問題ないと思われます。
また、メールの自動返信機能を実装するにあたって、GASのソースコードも参考記事から拝借しました。
カスタマイズするために拝借したGASのソースコードを編集する必要が若干あったのですが、GASがjavascriptと文法的にかなり似ていたので、問題なく編集できました。
参考記事
2022年12月に投稿された以下のquiita記事を見つけ、こちらを参考に実装を進めました。
この記事の中で参考記事として紹介されている記事も読んで参考にさせてもらった感じです。
▼メール自動送信機能の実装方法
▼htmlにGoogleフォームを組み込む方法
実装した静的ページ
実装先は、僕が職業訓練生だった頃に制作したポートフォリオサイトの問い合わせページです。
サイトの雰囲気に合わせた問い合わせページを作ることができたので、概ね満足しています。
使ったツール
githubpagesで公開している自分のポートフォリオサイトに、Googleフォームの機能を利用して問い合わせフォームを実装したいと考え、以下のツールを使いました。
- githubpages
- Googleフォーム
- Googleスプレッドシート
- Google Apps Script（GAS）
- Gmail（送受信の確認で使う）
本来、Googleフォームを一般的な使い方で利用すると、オリジナルのデザインで問い合わせページを作るということができないです。
しかし、今回、htmlにGoogleフォームを組み込むことによって、オリジナルの問い合わせフォーム作成をすることができました。
githubpages
GitHubから提供されている、静的サイトのホスティングサービスのこと。
静的サイトとは、ユーザー操作でページ内容が変わらない、HTML・CSSなどで構築されたサイトのことです。（JavaScriptを使ったアニメーション含むサイトも公開可能です）
https://pengi-n.co.jp/blog/git-githubpages/
githubでバージョン管理する延長でリポジトリを公開するだけで、静的なWebサイトが公開できてしまいます。
githubpagesは動的なWebサイトの公開に使えないので、phpなどで問い合わせフォームを作成したものは公開できないです。
しかし、今回、GASで自動送信機能を実装しつつ、htmlにGoogleフォームを組み込むことで、githubpagesで問い合わせフォーム有りのサイトを公開することができました。
Googleフォーム
Googleフォームとは、Googleのサービスの1つとして提供されているフォーム作成ツールです。
https://form.run/media/contents/enquete/googleform/
使いやすさや無料で使える点などから、アンケートフォームや問い合わせフォーム、キャンペーンへの申し込みフォームなど、様々な用途で利用されています。
問い合わせフォームだけでなくアンケートフォームや申し込みフォームとしても使えるみたい。
作成が簡単なGoogleフォームですが、デメリットとして、「デザインがシンプル」だという点が挙げられます。
Googleフォームは、ヘッダーと質問項目のみというシンプルな作りとなっています。ヘッダー部分には用途に応じた写真・イラスト、もしくは自身で用意した画像を挿入できますが、あくまでもヘッダー部分のみの編集となるため、一見しただけでGoogleフォームで作ったフォームだとわかってしまいます。
https://form.run/media/contents/enquete/googleform/#Google-3
しかし、html,cssにGoogleフォームを組み込むことによって自分の好きなデザインのフォームページを作成することができます。
Googleスプレッドシート
Googleスプレッドシートは、無料で使える表計算ツールのひとつで、ビジネスの場面でも多く活用されています。例えば、関数を使えば、データを自動で計算して、日々の情報管理を効率化できるのです。
https://www.stock-app.info/media/spreadsheet/#GoogleExcel
表計算ツールといえば、「マイクロソフトのExcel」「Googleのスプレッドシート」の二大巨頭(二代巨頭)が思い浮かぶと思うのですが、その片割れです。
Googleフォームで回答してもらった内容は、そのGoogleスプレッドシートにデータベースとして保存されていきます。
回答内容が新規で保存されるたびに、回答者のメールアドレスへメールを自動送信させる機能をつけていくために、GAS（Google Apps Script）を使っていくことになります。
Google Apps Script（GAS）
GAS（Google Apps Script）と呼ばれるプログラミング言語によって、複雑な処理を自動化することも可能です。
https://www.stock-app.info/media/spreadsheet/#GoogleExcel
Googleスプレッドシートの「拡張機能」タブの中に「Apps Script」があります。そこからGAS（Google Apps Script）が使えます。
使ったソースコード
基本的には参考記事で紹介されていたソースコードを使っていますが、問い合わせの項目を増やしたりしたので、それに合わせてhtmlとgasを編集しています。
細かい実装方法については参考記事として紹介した以下の2記事を参照していただきたいです。
▼メール自動送信機能の実装方法
▼htmlにGoogleフォームを組み込む方法
上記の2記事を参考にしつつ、自分が作りたいフォームに合わせてソースコードを編集していくことで目的の実装ができました。
htmlソースコード
<form class="c-form" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSeP1KEKGmIo0GI5YK8xetRjZly3Z_InyGfw73v_yVJW0N0qRw/formResponse" method="POST">
<div class="c-form__item">
<label class="c-form__label">個人or会社</label>
<div class="toggle-buttons">
<input type="radio" id="individual" name="entry.814213936" value="個人">
<label for="individual">個人</label>
<input type="radio" id="company" name="entry.814213936" value="会社">
<label for="company">会社</label>
</div>
</div>
<div class="c-form__item">
<label class="c-form__label" for="field-name">(法人と答えられた方のみ)<br>企業名</label>
<input
name="entry.747982655"
class="c-form__input"
id="field-name"
placeholder="企業名"
type="text"
/>
</div>
<div class="c-form__item">
<label class="c-form__label" for="field-name">(法人と答えられた方のみ)<br>役職名または所属部署名</label>
<input
name="entry.2022887884"
class="c-form__input"
id="field-name"
placeholder="役職名または所属部署名"
type="text"
/>
</div>
<div class="c-form__item">
<label class="c-form__label" for="field-name">氏名<span class="c-form__required">必須</span></label>
<input
name="entry.90102099"
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.1822041573"
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">お問い合わせ内容<span class="c-form__required">必須</span></label>
<textarea
name="entry.566227218"
class="c-form__input"
id="field-message"
placeholder="お問い合わせ内容"
required="required"
></textarea>
</div>
<div class="button-box">
<a href="index.html" class="button totop">戻る</a>
<button type="submit" class="button submit-button">送信する</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='thanks.html';}"
></iframe>cssソースコード
.c-form {
max-width: 600px;
margin: 0 auto 48px;
}
.c-form__item {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.c-form__label,
.c-form__input {
padding: 10px;
}
.c-form__label {
width: 50%;
}
.c-form__input {
width: 50%;
font-size: 16px;
border: solid 1px #fff;
border-radius: 4px;
}
.c-form__input:focus-visible {
outline: #fff auto 1px;
}
.c-form__required {
background-color: Red;
border-radius: 4px;
padding: 5px 5px;
margin: 0 0 0 18px;
}
textarea.c-form__input {
height: 160px;
}
.submit-button{
background-color: green;
}
.totop{
background-color: blue;
}
.c-form__submit button:hover {
color: green;
background-color: transparent;
}
@media (max-width: 640px) {
.c-form,.c-text{
width: 80%;
}
.c-form__item,.c-form__label,.c-form__input{
display: block;
width: 100%;
}
}
GASソースコード
function autoReply() {
var sheet = SpreadsheetApp.getActiveSheet();
var row = sheet.getLastRow();
var name = sheet.getRange(row, 5).getValue();
var mail = sheet.getRange(row, 6).getValue();
var item = sheet.getRange(row, 7).getValue();
var contents = sheet.getRange(row, 8).getValue();
var title = "お問い合わせありがとうございます。";//メールタイトル
//メール本文を作成
var mail_body
= "お問い合わせありがとうございます。\n"
+"下記のとおりお問い合わせを受け付けました。\n\n"
+ "--------------------------------------\n"
+ "○お名前\n"
+ name + "\n\n"
+ "○ご連絡先メールアドレス\n"
+ mail + "\n\n"
+ "○お問い合わせ項目\n"
+ item + "\n\n"
+ "○お問い合わせ内容\n"
+ contents + "\n\n"
+ "---------------------------------------\n\n"
+ "確認後、返信させていただきます";
GmailApp.sendEmail(mail,title,mail_body);//メール送信
}まとめ
以上、「静的ページに自動返信機能付きのオリジナル問い合わせフォームを実装」をした備忘録でした。
最近勉強していたjavascriptが文法的にGASと似ていたのは、嬉しい誤算でした。
htmlコーダーの自分がjavascriptを使ってサービスを作れるようになれば「フロントエンドエンジニアをやっています」と言えそうだし、フロントエンド以外の部分についても知見が増えて、やれることの幅がグッと広がりそうなので、javascriptの学習は引き続きやっていきたいと思います。
