今回はそんな疑問にお答えします。
WordPressであればContact Form7などプラグインを使えば大丈夫ですが、静的サイトでは当然ながらWordPressのプラグインは使えません。
また、特に指定が無ければレスポンシブメールフォームなど使う事も可能です。
レスポンシブ対応の無料お問い合わせフォーム「Responsive Mailform」の使い方とカスタマイズ方法
ただクライアント側から「Googleフォームで実装したい」という指示があったり、さらにデザインをカンプ通りにしたいという要望もあると思います。
今回はGoogleフォームを使ってデザインをカスタマイズしていく方法について解説していきます。
Googleフォームを作成し、カスタマイズに必要な値を取得
まずはGoogleフォームで実装したいお問い合わせフォームの項目を作成します（Googleフォームの作り方は割愛します）
Googleフォームの作成にはGoogleアカウントが必要となりますが、ここでクライアントにアカウント情報を教えて貰うのはなるべく避けたいので、フォームの作成はクライアント側にお願いしましょう。そしてこの後書いてあるnameとactionタグの情報を教えて貰います。
次に右上の目のマークをクリックすると、次の画面になります。
見た目はあまり変わりませんが、カスタマイズに必要な情報を取得する為にはこちらの画面にする必要があります。
そして項目に仮のテキストなどを入力します（赤枠部分）
ここは必須ではありませんが、入力しておいた方がやりやすいです。
そしてこの画面でデベロッパーツール（検証モード）を開きます。
そして「entry.」で検索すると今回のカスタマイズに必要な情報が見つかります（Windowsではctrl+F、Macでは⌘+Fで検索欄が表示されます）
nameのところですね。
あとはformタグ内のactionの値も取得しておきます。
htmlでフォームを作成
次にhtmlでフォームを作成します。
この辺はご自身の環境に合わせて作成して下さい。
<form class="contact" method="post">
<div class="contact__list">
<div class="contact__item">
<label for="name">お名前<span>（※必須）</span></label>
<input
type="text"
name=""
id="name"
placeholder="じゅんぺい"
required
/>
</div>
<div class="contact__item">
<label for="company">メールアドレス<span>（※必須）</span></label>
<input
type="email"
name=""
id="mail"
placeholder="sample@gmail.com"
required
/>
</div>
<div class="contact__item">
<label for="dog">好きな犬種<span>（※必須）</span></label>
<input
type="text"
name=""
id="dog"
placeholder="パピヨン"
required
/>
</div>
<div class="contact__item">
<label for="contents">お問い合わせ内容<span>（※必須）</span></label>
<textarea
name="entry.151970012"
id="contents"
cols="30"
rows="10"
placeholder="お問い合わせ内容が入ります。"
required
></textarea>
</div>
</div>
<div class="submit-btn">
<input type="submit" value="送信"/>
</div>
</form>ここでnameに先ほどデベロッパーツールで確認した値を入れて、formタグにはactionタグを追加します。
するとこのようになります。
<form class="contact" action="https://docs.google.com/forms/～～" method="post">
<div class="contact__list">
<div class="contact__item">
<label for="name">お名前<span>（※必須）</span></label>
<input
type="text"
name="entry.2033431696"
id="name"
placeholder="じゅんぺい"
required
/>
</div>
<div class="contact__item">
<label for="company">メールアドレス<span>（※必須）</span></label>
<input
type="email"
name="entry.174359942"
id="mail"
placeholder="sample@gmail.com"
required
/>
</div>
<div class="contact__item">
<label for="dog">好きな犬種<span>（※必須）</span></label>
<input
type="text"
name="entry.61465666"
id="dog"
placeholder="パピヨン"
required
/>
</div>
<div class="contact__item">
<label for="contents">お問い合わせ内容<span>（※必須）</span></label>
<textarea
name="entry.1095025400"
id="contents"
cols="30"
rows="10"
placeholder="お問い合わせ内容が入ります。"
required
></textarea>
</div>
</div>
<div class="submit-btn">
<input type="submit" value="送信"/>
</div>
</form>あとはcssでデザイン通りにコーディングすればOKです。
送信してみる
ここまで終わったらサーバーにアップしてテスト送信してみます。
するとGoogleフォームの作成画面に回答が来ているのが分かります。
しかし、お問い合わせをした後はこのようにGoogleフォームの送信完了画面が表示されてしまいます。
せっかくお問い合わせフォームのデザインをカスタマイズしても、サンクスページがこれでは残念ですね。
なのでサンクスページも作成し、お問い合わせフォームで送信ボタンを押したら自作のサンクスページに飛ぶようにしたいと思います。
サンクスページを作成
サンクスページの作成自体に変わった事はないので割愛します（ここではファイル名をthanks.htmlにします）
ここで一工夫が必要になるのはお問い合わせフォームの方になります。
まずはformタグにコードを追加します。
<form
action="https://docs.google.com/forms/～～"
method="post"
target="hidden_iframe"
onsubmit="submitted=true;"
>下の2行ですね。
あとはform閉じタグの後あたりにこちらのコードを追記します。
<script type="text/javascript">
var submitted = false;
</script>
<iframe
name="hidden_iframe"
id="hidden_iframe"
style="display: none"
onload="if(submitted) {window.location='thanks.html';}"
></iframe>thanks.htmlについては、作成したサンクスページのファイル名を書きます。
今回はお問い合わせフォームと同じ階層にある設定です。
そして完成形がこちらになります。
<form
action="https://docs.google.com/forms/～～"
method="post"
target="hidden_iframe"
onsubmit="submitted=true;"
>
<div class="contact__list">
<div class="contact__item">
<label for="name">お名前<span>（※必須）</span></label>
<input
type="text"
name="entry.2033431696"
id="name"
placeholder="じゅんぺい"
required
/>
</div>
<div class="contact__item">
<label for="email"
>メールアドレス<span>（※必須）</span></label
>
<input
type="email"
name="entry.174359942"
id="email"
placeholder="sample@gmail.com"
required
/>
</div>
<div class="contact__item">
<label for="dog">好きな犬種 <span>（※必須）</span></label>
<input
type="text"
name="entry.61465666"
id="dog"
placeholder="パピヨン"
required
/>
</div>
<div class="contact__item">
<label for="contents">お問い合わせ内容<span>（※必須）</span></label>
<textarea
name="entry.1095025400"
id="contents"
cols="30"
rows="10"
placeholder="お問い合わせ内容が入ります。"
required
></textarea>
</div>
</div>
<div class="submit-btn">
<input type="submit" value="送信" />
</div>
</form>
<script type="text/javascript">
var submitted = false;
</script>
<iframe
name="hidden_iframe"
id="hidden_iframe"
style="display: none"
onload="if(submitted) {window.location='thanks.html';}"
></iframe>これで送信ボタンを押したら自作のサンクスページに飛ぶようになります。
サンクスページについてはこちらの記事を参考にさせて頂きました。
オリジナルデザインでGoogleフォームを埋め込んで、お問い合わせフォームとスプレッドシートを連携させる裏技！
Googleフォームを使う機会があったらぜひ参考にしてみて下さい。