ホームページ

【便利】ContactForm7とGoogleスプレッドシートを連携させる方法

 

ContactForm7とGoogleスプレッドシートは連携できるの?

 

今回はそんな疑問にお答えしていきます。

 

ContactForm7をCSVとして出力できるプラグインもありますが、今回ご紹介する方法を使うとカンタンにGoogleスプレッドシートと連携することができます。

 

Googleスプレッドシートに出力できればクラウドに保存されているためいつでも最新のデータが呼び出せますよね

 

特に企業ホームページで顧客管理などにContactForm7を使っている場合にはとても便利。

 

では、さっそく設定の手順をご紹介していきます。

 

連携の手順

ContactForm7とGoogleスプレッドシートを連携させる手順
連携の手順

 

ContactForm7とGoogleスプレッドシートを連携させる手順を簡単にご紹介するとこんな感じです。

 

簡単な流れ

  • Googleスプレッドシートの準備
  • プラグインのインストール
  • プラグインの設定
  • 認証する

 

1つずつ解説していきます。

 

手順1:Googleスプレッドシートの準備

最初にスプレッドシートの準備をします。

 

スプレッドシートのファイル名とシート名はあとで使うので分かりやすいものにしておきましょう。

 

今回は下記の名前で設定しておきます。

ファイル名:file

シート名:sheet

 

Googleスプレッドシート
Googleスプレッドシート

日本語だとエラーが発生する可能性があります。アルファベットで名前をつけましょう。

 

次にシート内にタグを入れていきます。

 

初期設定では下記のようなタグになっているので、今回はそのまま使っていきます。

your-name

your-email

your-subject

your-message

 

Googleスプレッドシートはこんな感じですね。

 

Googleスプレッドシート
Googleスプレッドシート

 

ここでの注意点は二つです。

注意点2つ

  •  ContactForm7のタグと全くタグを使う
  • メールのタグを使う(フォームのタグではない)

 

手順2:プラグインのインストール

CF7 Google Sheet Connectorというプラグインを使用します。

 

WordPressの「プラグイン」⇨「新規追加」から検索してもダウンロードが可能です。

 

ちなみに、こんな感じのプラグインです。

 

CF7 Google Sheet Connector
CF7 Google Sheet Connector

 

ダウンロードが完了したら有効化しましょう。

 

手順3:プラグインの設定

「お問い合わせ」⇨「コンタクトフォーム」⇨「今回設定するフォームを選択」の順に移動してください。

 

下記の画面の一番右に「Google Sheets」というタブが出てくるので選択してください。

 

ContactForm7
ContactForm7

 

次に、一番上の「Google Sheet Settings」を入力していきます。

 

Google Sheet Settings
Google Sheet Settings

 

下記の項目を入力していきます。

 

Google Sheet Name

さっき設定したGoogleスプレッドシートのファイル名です。

 

本記事では「file」と設定しました。

 

Google Sheet Id

GoogleスプレッドシートのURLを見てください。

docs.google.com/spreadsheets/d/16rE7LE8RCHmx3L3Ma****************/edit#gid=0
※https://は省略

 

URLの中の赤字部分を入れてくだい。

 

Google Sheet Tab Name

さっき設定したGoogleスプレッドシートのシート名です。

 

本記事では「Sheet」と設定しました。

 

Google Tab Id

GoogleスプレッドシートのURLを見てください。

 

docs.google.com/spreadsheets/d/16rE7LE8RCHmx3L3Ma****************/edit#gid=0
※https://は省略

 

URLの中の一番最後の赤くなっている数字を入れてくだい。

 

これで設定は完了です。

 

手順4:認証する

「お問い合わせ」⇨「Google Sheets」の順に移動してください。

 

最後に認証をするためコードを入力します。

 

下記の流れで認証しましょう。

 

まずは「Get Code」を押してください。

 

Get Code
Get Code

 

すでにGoogleにログインした状態だと、下記の画面が出てくるはずですので「許可」を押してください。

 

権限の付与
権限の付与
 

 

こちらも許可を押してください。

 

権限の付与
権限の付与
 

 

こちらも「許可」を押してください。

 

権限の付与
権限の付与

 

すると下記の画面が出てくるのでコードをコピーしてください。

 

※本記事ではセキュリティの関係上コードの一部を黒塗りしてあります。

 

権限の付与
権限の付与

 

コピーしたコードを先ほどの「Get Code」のボタンの右側にペーストして「Save」を押してください。

 

「Get Code」の画面
「Get Code」の画面

 

しばらく待ってこの画面が出てきたら設定完了です。

 

連携の際の注意点

ContactForm7とGoogleスプレッドシートを連携させる際の注意点
連携の際の注意点

 

ContactForm7とGoogleスプレッドシートを連携させる際の注意点を2つご紹介します。

 

  • Googleスプレッドシートの全権限を許可→情報漏洩
  • 問い合わせフォーム編集後のエラー

 

1つずつ解説していきます。

 

Googleスプレッドシートの全権限を許可→情報漏洩

Googleスプレッドシートの表示や編集なども許可されてしまいます。

 

セキュリティ上、心配な方は大事なデータを他のアカウントに写しておいた方がいいですね。

 

問い合わせフォーム編集後のエラー

問い合わせフォームの質問内容や選択肢を編集・変更すると、回答内容が連携されないというエラーが起こる場合があります。

 

エラーが起こった場合は、再度コードを取得して認証すると連携できます。

 

まとめ:連携して仕事効率化

ContactForm7とGoogleスプレッドシートを連携して仕事効率化
連携して仕事効率化

 

ContactForm7とGoogleスプレッドシートを連携させると、問い合わせ内容の管理が10倍便利になります。

 

ちなみに、私の勤務先は私立学校ですが、求人応募の管理、入学問い合わせの管理などに使っています。

 

企業ホームページを使っている方や顧客情報管理、求人情報管理、Q&Aリストなど様々なことに使えるので使ってみましょう。

 

今回は以上です。

-ホームページ