楽しく働くフクミのブログ：FAN&FUN

楽しく働くフクミのブログ

楽しく働くフクミのブログ：FAN&FUN

楽しく働くフクミのブログ

GoogleフォームをカスタマイズしてWordPressのウィジェットに設置してみる

, …
約6分
GoogleフォームをカスタマイズしてWordPressのウィジェットに設置してみる

今迄はWordpressでのお問合せフォームには、超鉄板の Contactform7 と言うプラグインばかりを使用していました。

Contactform7のメリットとしては、


  • 問い合わせ受け付けのメール連絡先とそのメール本文がカスタマイズ出来る
  • 問い合わせた方にカスタマイズしたサンクスメールなどが送れる
  • 別のプラグインを追加すれば内部にデータベースが保持出来る
  • 更にそのデータベースをGoogleのスプレッドシートにリアルタイムで表示が出来る
  • Googleアナリティクスと連携されればコンバージョンが計測出来る
などなど…数多く有ります。

このContactform7は多機能なのに使い易く、素晴らしいプラグインだと本当に感謝しながら使わせてもらっています。

※Contactform７のリンク
https://contactform7.com/ja/

しかしながら今回は一念発起して、Googleフォームのカスタマイズをトライしてみたいと思います！

※Googleフォームのリンク
https://www.google.com/intl/ja_jp/forms/about/

どうしてGoogleフォームなのか？そもそもGoogleフォームのメリットは？

それはズバリ、Googleスプレッドシートと直接連携しているからです！

以前の社内では、表計算と言うとMicrosoftのExcelが定番でした。（表計算以外にワープロ的に使用する事も多々有りましたが…本当に多々でしたね。）
しかしながら現在はGoogleのGSUITEを使用していて、その中にはExcelの代わりになるGoogleスプレッドシートと言うのが有るのですが…これがメチャクチャ便利なのです！

Googleフォームに記入してもらうと、そのデータはそのままGoogleスプレッドシートに記入されているのです。

そもそも問い合わせなどのデータは、目的が有り、その対応の為に入手している訳です。
だから入手したデータをどの様に活用するかと言うのが重要であり、そのデータ活用にはGoogleスプレッドシートがとても便利だと思っています。

まとめますと、GoogleフォームはGoogleスプレッドシートに直接連携しているのが最大のメリットです！
Contactform7も含めてその他の手段では、Googleスプレッドシートに吐き出すにはどうしても一手間以上が必要となってしまうのです。

※このGoogleスプレッドシートに関しては色々な思いが有るので、是非別記事に書こうと思っています。

Contactform7では出来たが、Googleフォームでは難しい事

Googleフォームは素晴らしいWEBアプリで、多機能なフォームを本当に簡単に作成する事が可能です。
しかしながら、それをWEBなどに転用しようとすると…工夫しなければどうしても陳腐になってしまうのです！

元々、Googleフォームで用意されているのは、

  1. フォームのリンク先を入手
  2. フォームのリンク先をメールで連絡（本文にフォームを含めるのも可）
  3. iframeで埋め込む
と言う選択肢しか無いので、WEBに転用するのであれば選択肢は③しか無い訳です。
…しかしながら、思いっきり ” Googleフォームでやってるよ ” と言う感じ丸出しになってしまいます。

そしてwidth、height、frameborder、marginheight、marginwidthしか調節出来ないのです…格好良くない！！！

WEBに埋め込む為に、先ずは自作でformを作る

一見してGoogleフォームに見えない様にするには、HTMLで書いたformとGoogleフォームを結び付け、formからGoogleフォームにデータを吐き出させれば良い訳です。
Googleフォームを埋め込む手順はザックリと以下の通りです。

  1. HTMLで最低限のformを作る
  2. Googleフォームでも同じ項目を網羅する様にフォームを作る
  3. Googleフォームのformタグのactionとinputタグのnameの値を調べ、それぞれのタグの中に入力する

これで自作したformとGoogleフォームが連携される様になる訳です。

先ずはformを作る

本サイトで実装する為に先ず作ったformはこの様な感じでした。

※入力必須にしたいinputタグの項目は、inputタグに

required
と入れれば良いでしょう。

※入力例を表示させるには、inputタグの中に 

placeholder="こちらが入力例です ◯☓△"
などと入れれば良いでしょう。

Googleフォームでも同じ項目を網羅する様にフォームを作る

formで作成した様に、御社名・御名前・御電話番号・メールアドレス・お問い合わせ内容が網羅されたGoogleフォームを作って下さい。

自作したformとGoogleフォームを結び付ける

これがちょっと面倒です…。

  1. 作成している画面のURLでは無く、右上の送信ボタンを押すとポップアップされる中から、真ん中にあるチェーンアイコンのボタンを押して共有リンクを表示させ、そのリンク先へ移動
  2. 移動先のページをGoogleクロームなどのブラウザであればF12キーを押してデベロッパーツールを表示させる
  3. デベロッパーツールでCtrl.+Fキー（Macの場合）にて上部に対する検索窓を表示させ、検索窓に ” action ” と入れてElements内で 
    form action="XXXX/formResponse"
    を探し、コピーして、自作したformの中のformタグの中にペーストする

    4. ※検索窓を下部のFilter窓と間違えない様に注意！

  4. 続けてデベロッパーツールの検索窓に ” entry ” と打ち込み、 
    name="entry.XXXX"
    となっている、名前から判断してformの各項目に対応する箇所の 
    name="entry.XXXX"
    をコピーし、formの対応する各inputタグの中にペーストする

…ふぅっ、出来ましたでしょうか？
間違いが無ければ、これで自作したformとGoogleフォームが連携された事になります。

GoogleフォームをCSSで格好良くカスタマイズする

このままだとGoogleフォームとは連携しているものの、見た目はガタガタのままです。
それぞれお好きな様にHTMLやCSSで形を整えたら完成です！

因みに当サイトでは最終的にこの様にしてみました。

Googleフォームカスタマイズの今後の課題

どうでしょうか？
一見してGoogleフォームには見えないですし、素人作りの割りに普通に見えますよね？

きちんとGoogleフォームからGoogleスプレッドシートに入力されていますし、問題は無い様にも見えますが…のままだと未だ未だ幾つかの問題が有るのです。


  • 問題１：入力後に遷移されるサンキューページがGoogleフォームのまま
  • 問題２：コンバージョンが計測出来ない

実は問題１の対処も試みたのですが…上手くいきませんでした。
引き続きトライしていきたいと思います！

どちらかと言うと本当に問題なのはコンバージョンの計測が出来ない事です。
サンキューページのURLの動的な部分を割愛すれば良いだけなのか…こちらも以降トライしてみたいと思います！