HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

【PHP知識不要】Googleフォームを使ってサイトにお問い合わせを作る方法【カスタマイズ自由】

約7分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
Web系のフリーランスとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

【PHP知識不要】Googleフォームを使ってサイトにお問い合わせを作る方法【カスタマイズ自由】
HikoPro
HikoPro

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

  • 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コードを埋め込むとこんな感じになります。

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

つまり、、、

  1. サイトにあったフォームをHTML,CSSを使って作成
  2. Googleフォームと連携させる
  3. システムはGoogle、見た目は自分好みのフォームが完成

この様な流れで作成すると自分好みのフォームが作れます!

Hiko
Hiko

では早速僕と一緒に作っていきましょう!

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をそれぞれ間違えない様にしましょう!

Hiko
Hiko

action、nameの貼り付けが終わったら完成です!

実際にちゃんと動くか確認しましょう!

お疲れ様でした!

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

ネコ君
ネコ君

PHPの知識がなくても簡単にお問い合わせフォームができるんだね!

知らなかった〜〜!

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

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

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

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

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

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)