実装作戦
Google Apps Script
× WordPress
WordPressにはContact Form 7やWPFormsなど、定番のフォームプラグインがある。しかし今回の構成では使わない判断をした。理由は明確だ。
このサイトはカスタムHTMLブロックで完全にデザインをコントロールする戦術を採用している。プラグインが生成するフォームHTMLは独自のクラス構造を持ち、ブランドのデザインシステムと統合するのが難しい。スタイルの上書きに膨大なCSSが必要になる。
ならば最初から自分でHTMLフォームを書き、バックエンドだけGoogle Apps Scriptに任せる構成の方がシンプルで強固だ。
・WordPressにデータを保存しない（セキュリティ上有利）
・問い合わせデータはGoogleスプレッドシートで一元管理
・プラグインゼロ → サイトが軽量に保たれる
・Google Apps ScriptはGoogleアカウントがあれば無料
構成はシンプルだ。フォームの送信データがGoogle Apps Scriptを経由し、Googleスプレッドシートに記録される。同時にメール通知も飛ぶ。
カスタムHTML
非同期送信
Script
スプレッドシート
自動通知
フォームはページ遷移なしの非同期送信（fetch API）で処理する。送信後はフォームを非表示にして完了メッセージを表示するUXだ。ページリロードが発生しないため、体験がスムーズになる。
var sheet = SpreadsheetApp
.getActiveSpreadsheet()
.getActiveSheet();
var data = JSON.parse(e.postData.contents);
sheet.appendRow([
new Date(),
data.name,
data.email,
data.message
]);
MailApp.sendEmail({…});
return ContentService
.createTextOutput(JSON.stringify({result:’ok’}))
.setMimeType(ContentService.MimeType.JSON);
}
ContactページのカスタムHTMLブロックに、フォームHTMLとJavaScriptを記述する。フォームはブランドのデザインシステムに完全準拠したスタイルで実装した。
.addEventListener(‘submit’, async function(e) {
e.preventDefault();
const data = {
name: form.name.value,
email: form.email.value,
message: form.message.value
};
const res = await fetch(GAS_URL, {
method: ‘POST’,
body: JSON.stringify(data)
});
// 完了メッセージを表示
showComplete();
});
Contactページのデザインは、サイト全体のデザインシステムに完全準拠させた。黒背景・ゴールドアクセント・Bebas Neue・Share Tech Mono。フォームのinputフィールド・テキストエリア・送信ボタンすべてがブランドカラーで統一されている。
送信ボタンは通常時はゴールド（#b8922a）だが、送信中はテキストが「SENDING…」に変わり、操作不能になるUXを実装した。完了後はフォームを非表示にして完了ブロックを表示する。これによりページ遷移なしで完結する体験を実現した。
問い合わせフォームも、戦術の一部だ。」 — 実装完了後の所感
実装完了後、実際にフォームからテスト送信を行い、以下をすべて確認した。
- プラグインゼロのカスタムContactフォームを実装完了
- Google Apps Script + Googleスプレッドシートによるバックエンド構成を確立
- fetch APIによる非同期送信（ページ遷移なし）を実現
- Gmail自動通知メールの受信を確認済み
- フォームデザインをブランドシステム（黒×ゴールド）に完全統合
- テスト送信によりエンド・ツー・エンドの動作を確認済み
