• HTML,CSSの勉強をしてお問い合わせフォームの見た目を作ったけど、サクッと動作するようにしたい。。。
• PHPの学習はまだ初めてないので、PHPの知識がなくても実装できる方法を知りたい。

今回の記事では上記の内容について、PHPの知識がない方でも簡単にお問い合わせフォームを作れる方法をご紹介します。

基本的なお問い合わせフォームの作り方は、「HTML,CSSで見た目を作る→PHPを使って送信できるようにする」といった流れになり、PHPの知識が不可欠ですが、、、

HTML,CSSで見た目を作る→Googleフォームと連携させる→お問い合わせフォーム完成

今回はこの様な流れでPHPは一切使う事なく解説していきます。

→【HTML】inputタグの使い方まとめ（テキストボックス・パスワード・送信ボタンなど）

Googleフォームでお問い合わせフォームを作る

まず始めに完成形をお見せします。

See the Pen bPxvvE by Shinichi Hikosaka (@shinichi-hikosaka) on CodePen.

右のお問い合わせフォームに何か入力して、送信してみて下さい！

送信完了後、Googleフォームの画面に切り替わり送信が完了した事がご覧いただけたかと思います。

実はこのフォームPHPを一切使う事なく、HTML,CSSで作ったフォームをGoogleフォームと連携させているだけです！

Googleフォームのそもそもの使い方は、作ったフォームをメールやURLで共有したり、HTMLコードも生成されるので、サイトに貼り付けることも可能です。

実際に生成されるHTMLコードを埋め込むとこんな感じになります。

おしゃれなサイトや、独自性の高いポートフォリオにこれが埋め込んであったら、サイトの見た目を悪くしてしまいますよね！

つまり、、、

1. サイトにあったフォームをHTML,CSSを使って作成
2. Googleフォームと連携させる
3. システムは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です！

2.Googleフォームでお問い合わせフォームを作る

まずは https://docs.google.com にアクセスして、Googleアカウントにログインします。

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

次にフォーム作成をしていくのですが、下記の画像を参考に作成して下さい。

詳しく解説すると、

HTML,CSSで作ったフォームは

• 「名前」
• 「メールアドレス」
• 「件名」
• 「メッセージ」

これらの4項目がありますが、Googleフォームを作るときはこの4つの項目と同じものを作ればOKです。

なので不要なものを削除したり、追加したりしましょう！

3.作成したフォームにアクセス

フォームが完成したら、

右上にある「送信」ボタンをクリックして、このリンクをコピーしアクセスしましょう！

URLにアクセスすると、作成したフォームが公開されているのが確認できたと思います。

これだけでもしっかりと機能するのですが、HTML,CSSで作ったフォームと連携させるには一工夫が必要なので、次に解説します。

4.ソースコードからactionとnameを探す

次にGoogleChromeの検証ツールを使ってソースコードから、actionとnameを探して、自分のサイトに貼り付ける作業をします。

↓GoogleChromeの検証ツールの使い方はこちら↓

【Chrome検証ツール使い方】初心者が抑えておくべき便利な４つの機能の使い方

まず始めに検証ツールを右クリック→検証で立ち上げます。

※Chromeブラウザでないと表示されません。

すると下にソースコードがずらっと並んで知るので、<form action=”ここ” を探します。

自力で探すのは大変なので、検索ボックスで「<form」と検索するとすぐに見つける事ができます。

コピーしたURLをそのまま作っているサイトの「action=”ここに貼り付け”」ここに貼り付けましょう。

nameも同じ要領でコピーしてサイトに貼っていきます。

Googleフォームのカスタマイズ方法まとめ

いかがでしたでしょうか！

サクッとお問い合わせフォームを作りたい方にはとってもオススメの方法です！

また問い合わせ情報をGoogleのクラウドで管理できるのもまたいいですね！

この記事を参考にぜひ作ってみて下さい！

最後までご覧頂きありがとうございました！