ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

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

ツール関連
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

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のクラウドで管理できるのもまたいいですね!

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

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

HikoPro
HikoPro

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

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
ツール関連
HikoPro Blog

コメント

タイトルとURLをコピーしました