

- HTML,CSSの勉強をしてお問い合わせフォームの見た目を作ったけど、サクッと動作するようにしたい。。。
- PHPの学習はまだ初めてないので、PHPの知識がなくても実装できる方法を知りたい。
今回の記事では上記の内容について、PHPの知識がない方でも簡単にお問い合わせフォームを作れる方法をご紹介します。
基本的なお問い合わせフォームの作り方は、「HTML,CSSで見た目を作る→PHPを使って送信できるようにする」といった流れになり、PHPの知識が不可欠ですが、、、
HTML,CSSで見た目を作る→Googleフォームと連携させる→お問い合わせフォーム完成
今回はこの様な流れでPHPは一切使う事なく解説していきます。
→【HTML】inputタグの使い方まとめ(テキストボックス・パスワード・送信ボタンなど)
✔︎こんな方にオススメ
- HTML.CSSでフォームを作ったが実際に送信させたい方
- PHPの知識を使わずにお問い合わせフォームを実装させたい方
- 自分のポートフォリオサイトのお問い合わせフォームを設置したい方
Googleフォームでお問い合わせフォームを作る
まず始めに完成形をお見せします。
See the Pen bPxvvE by Shinichi Hikosaka (@shinichi-hikosaka) on CodePen.
右のお問い合わせフォームに何か入力して、送信してみて下さい!
送信完了後、Googleフォームの画面に切り替わり送信が完了した事がご覧いただけたかと思います。
実はこのフォームPHPを一切使う事なく、HTML,CSSで作ったフォームをGoogleフォームと連携させているだけです!
✔︎Googleフォームを使うメリット
- 面倒なPHPコードを書く手間が省ける
- プログラミング初心者でも簡単にお問い合わせフォームを作れる
- 運用面でも万能→お問い合わせリストをスプレッドシートに反映できる
- Googleと言う安心感
Googleフォームのそもそもの使い方は、作ったフォームをメールやURLで共有したり、HTMLコードも生成されるので、サイトに貼り付けることも可能です。
実際に生成されるHTMLコードを埋め込むとこんな感じになります。
おしゃれなサイトや、独自性の高いポートフォリオにこれが埋め込んであったら、サイトの見た目を悪くしてしまいますよね!
つまり、、、
- サイトにあったフォームをHTML,CSSを使って作成
- Googleフォームと連携させる
- システムはGoogle、見た目は自分好みのフォームが完成
この様な流れで作成すると自分好みのフォームが作れます!

では早速僕と一緒に作っていきましょう!
1.HTML,CSSでフォームの見た目を作る
まず始めにHTMl,CSSを使ってサイトの雰囲気にあったお問い合わせフォームを作ってみましょう!
→ 僕のポートフォリオのフォームはこんな感じです!(参考にしてもらってOK)
<div class="form">
<form action="GoogleフォームのURL" method="post">
<input type="text" name="Googleフォームからコピペ" placeholder="Your Name">
<input type="email" name="Googleフォームからコピペ" placeholder="Your Email">
<input type="text" name="Googleフォームからコピペ" placeholder="Subject">
<textarea name="Googleフォームからコピペ" rows="5" cols="30" placeholder="messages..."></textarea>
<button type="submit" name="submit" class="btn btn-info ">Submit</button>
</form>
</div>
僕の方で最低限サイトに必要なお問い合わせフォームのHTMLコードを用意しました!
これをそのままサイトに貼って、CSSで自分好みにカスタマイズしてもらってOKです!
action=”GoogleフォームのURL”とname=”Googleフォームからコピペ”
これらはGoogleフォームを作った後にコピペするので今はそのままでOKです!
2.Googleフォームでお問い合わせフォームを作る
まずは https://docs.google.com にアクセスして、Googleアカウントにログインします。

するとフォームを作成する画面になるので、特に変わったお問い合わせフォームでなければ、テンプレートで用意されている「連絡先情報」をクリックしましょう!
次にフォーム作成をしていくのですが、下記の画像を参考に作成して下さい。

詳しく解説すると、
HTML,CSSで作ったフォームは
- 「名前」
- 「メールアドレス」
- 「件名」
- 「メッセージ」
これらの4項目がありますが、Googleフォームを作るときはこの4つの項目と同じものを作ればOKです。
なので不要なものを削除したり、追加したりしましょう!
HTML,CSSで作ったフォームの形式と、Googleフォームの形式は同じにしましょう!
3.作成したフォームにアクセス

フォームが完成したら、
右上にある「送信」ボタンをクリックして、このリンクをコピーしアクセスしましょう!
URLにアクセスすると、作成したフォームが公開されているのが確認できたと思います。
これだけでもしっかりと機能するのですが、HTML,CSSで作ったフォームと連携させるには一工夫が必要なので、次に解説します。
4.ソースコードからactionとnameを探す
次にGoogleChromeの検証ツールを使ってソースコードから、actionとnameを探して、自分のサイトに貼り付ける作業をします。
↓GoogleChromeの検証ツールの使い方はこちら↓
まず始めに検証ツールを右クリック→検証で立ち上げます。
※Chromeブラウザでないと表示されません。

すると下にソースコードがずらっと並んで知るので、<form action=”ここ” を探します。
自力で探すのは大変なので、検索ボックスで「<form」と検索するとすぐに見つける事ができます。
mac → command+F で検索ボックスがでてきます。
コピーしたURLをそのまま作っているサイトの「action=”ここに貼り付け”」ここに貼り付けましょう。

nameも同じ要領でコピーしてサイトに貼っていきます。
名前のinputには名前のnameを
メールアドレスのinputにはメールアドレスのnameをそれぞれ間違えない様にしましょう!

action、nameの貼り付けが終わったら完成です!
実際にちゃんと動くか確認しましょう!
お疲れ様でした!
Googleフォームのカスタマイズ方法まとめ

PHPの知識がなくても簡単にお問い合わせフォームができるんだね!
知らなかった〜〜!
いかがでしたでしょうか!
サクッとお問い合わせフォームを作りたい方にはとってもオススメの方法です!
また問い合わせ情報をGoogleのクラウドで管理できるのもまたいいですね!
この記事を参考にぜひ作ってみて下さい!
最後までご覧頂きありがとうございました!