PR

静的ページにオリジナルデザインの自動返信機能付き問い合わせフォームを実装

静的ページにオリジナルデザインの自動返信機能付き問い合わせフォームを実装 HTML/CSS

職業訓練生時代に制作したポートフォリオサイトがあるのですが、そのサイトに問い合わせフォームを実装できたらいいなぁと思い、色々調べてみました。

その結果、以下のことが分かりました。

  • 静的ページでも問い合わせフォームの実装が可能
  • 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と同じだったため、javascriptの知識を使って編集することができました。

Google Apps Script(GAS)は、大部分でJavaScriptの文法に準じているので、基本的な制御構造や式、文法はJavaScriptと共通しています。

https://trends.codecamp.jp/blogs/media/difference-word234

GASの文法がjavascriptをベースに作られていることを知らなかったけど、触りはじめると、「これ、javascriptじゃん」ってなって、ちょっとテンション上がった

参考記事

2022年12月に投稿された以下のquiita記事を見つけ、こちらを参考に実装を進めました。

お問い合せフォームをGithubとGoogle Formで用意する - Qiita
はじめに完全に無料で運用出来るお問い合わせフォームを作成したいと思い作成しました。完成したもののリンク警告※ …

この記事の中で参考記事として紹介されている記事も読んで参考にさせてもらった感じです。

▼メール自動送信機能の実装方法

Google フォームでお問い合わせフォームを作り、自動返信メールを送る | nansystem
静的サイトにお問い合わせフォームを設定したい。 その場合、AWS lambdaやGoogle Cloud Functionsでお問い合わせがあったことを知らせるアプリケーションを作成するか、 他サービスのフォームを埋め込むことになる。 この...

▼htmlにGoogleフォームを組み込む方法

Google FormをHTML/CSSでデザインしたフォームで運用する方法

実装した静的ページ

実装先は、僕が職業訓練生だった頃に制作したポートフォリオサイトの問い合わせページです。

WEB PORTFOLIO by KANTARO NAKAYA

サイトの雰囲気に合わせた問い合わせページを作ることができたので、概ね満足しています。

使ったツール

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サイトが公開できてしまいます。

GitHub Pages サイトを作成する - GitHub Docs
新規または既存のリポジトリ内に、GitHub Pages サイトを作成できます。

githubpagesは動的なWebサイトの公開に使えないので、phpなどで問い合わせフォームを作成したものは公開できないです。

しかし、今回、GASで自動送信機能を実装しつつ、htmlにGoogleフォームを組み込むことで、githubpagesで問い合わせフォーム有りのサイトを公開することができました。

Googleフォーム

Googleフォームとは、Googleのサービスの1つとして提供されているフォーム作成ツールです。
使いやすさや無料で使える点などから、アンケートフォームや問い合わせフォーム、キャンペーンへの申し込みフォームなど、様々な用途で利用されています。

https://form.run/media/contents/enquete/googleform/

問い合わせフォームだけでなくアンケートフォームや申し込みフォームとしても使えるみたい。

Google Forms: オンライン フォーム作成ツール | Google Workspace
Google Forms を使用して、さまざまな質問形式でオンライン フォームやアンケートを作成しましょう。どのデバイスでもリアルタイムで結果を分析できます。

作成が簡単な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記事を参照していただきたいです。

▼メール自動送信機能の実装方法

Google フォームでお問い合わせフォームを作り、自動返信メールを送る | nansystem
静的サイトにお問い合わせフォームを設定したい。 その場合、AWS lambdaやGoogle Cloud Functionsでお問い合わせがあったことを知らせるアプリケーションを作成するか、 他サービスのフォームを埋め込むことになる。 この...

▼htmlにGoogleフォームを組み込む方法

Google FormをHTML/CSSでデザインしたフォームで運用する方法

上記の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を通してフロントエンド以外の部分についても知見が増えて、やれることの幅がグッと広がりそうなので、javascriptの学習は引き続きやっていきたいと思います。

▼javascriptの学習1冊目として使った書籍

タイトルとURLをコピーしました