GICOH

AppSheetでWordPressのお問い合わせ(Contact Form7)を管理する方法

Written by

gicoh

in

WordPressからのお問い合わせ

弊社のブログはWordPressで作成しているのですが、WordPressのお問い合わせフォームは「Contact Form7」を利用しています。お問い合わせが発生するとメールで通知がされるのですが、回答したか？折り返しの連絡がきているのか？などは、担当者がメールを確認して実施しており、地味にストレスがかかっている状態でした。

そこで、WordPressからのお問い合わせをAppSheetで管理しよう！となり、実現方法を検討しました。

今回の内容は大きく２つになります。

  1. WordPressのお問い合わせ内容をスプレッドシートへ転記
  2. スプレッドシートのお問い合わせ内容をAppSheetで管理

WordPress(Contact Form7)からGoogleスプレッドシートへの連携

実現方法の検討

AppSheetでお問い合わせを管理するためには、スプレッドシートにデータを書き込み必要があります。実現方法として思いつくのは、

  1. GASを使って、Gmail受信時にスプレッドシートへ内容を転記
  2. 「CF7 Google Sheets Connector」を使ってスプレッドシートへ転記

の２つです。

案①のGASを使った方法は、今後「Contact Form7」以外のお問い合わせフォームに変更しても、メールは送信されるため、WordPressのプラグインに依存せずに実現できます。

一方、「Contact Form7」は現時点で事実上のデファクトスタンダードですので、直ぐに開発が止まることは考えづらいです。そのため今回は案②の「CF7 Google Sheets Connector」を使った方法で、お問い合わせフォームの内容をスプレッドシートへ連携します。

「CF7 Google Sheets Connector」の設定

WordPress管理画面から、プラグインの新規追加で「CF7 Google Sheets Connector」と検索をしてインストール、有効化します。

新規プラグインを追加

WordPressの管理画面に移動し、左メニューから「プラグイン」を選択します。表示された画面上で表示される「新規プラグインを追加」をクリックします。

CF7 Google Sheets Connectorのインストール・有効化

キーワードに「CF7 Google Sheets Connector」を入力し、表示されたCF7 Google Sheets Connectorの「今すぐインストール」をクリックします。

インストールが完了したら、「有効化」を実施します。

表示が「有効」に変わったら、プラグインのインストールと有効化は完了です。


CF7 Google Sheets Connectorの設定

WordPress管理画面＞お問い合わせ＞Google Sheetsから、「CF7 Google Sheets Connector」の設定を行います。

「CF7 Google Sheets Connector」の設定画面のGoogle Sheetsのコードを入れる部分にある「Sign in with Google」を選択します。

Googleアカウントの選択画面になりますので、使用するアカウントを選択します。複数のアカウントをお持ちの場合は、適切なものを選択するか「別のアカウントを使用」でログインし選択して下さい。
※このGoogleアカウントは、通知とスプレッドシートの管理者になるアカウントです。


「GSheetConnector for WP Contact Forms が Google アカウントへのアクセスを求めています」と出てきます。

画面に表示された「すべて選択」をクリックして、「Googleドライブのファイルに関する情報の参照です。」と「Googleスプレッドシートのすべてのスプレッドシートの参照、編集、作成、削除です。」にチェックされたことを確認して、「続行」をクリックします。

「CF7 Google Sheets Connector」の先程の画面に自動的に戻り、コードが反映されていることが分かります。コードが入ったことを確認し、「Save」ボタンを選択します。

これでGoogleアカウントへの接続は完了です。

問い合わせを転記するスプレッドシートの準備

スプレッドシートの作成

先ほど連携を許可したGoogleアカウントで、スプレッドシートを新規作成し、回答を受け取る設定をしていきます。

私たちの場合ですが、すでに案件管理のためにAppSheetのアプリを作成しており、「マイドライブ＞appsheet＞data」のアプリフォルダ内に、データ保存用の「DB」スプレッドシートが存在するので、そのスプレッドシートを使用します。

スプレッドシートを開いて、「問合せ」シートを追加します。

スプレッドシートに項目を設定します。通常はコンタクトフォームの「お問い合わせ」で良いですが、私たちのサイトは「お問い合わせ確認画面」を用意しているため、「お問い合わせ確認画面」を開きます。

開いたコンタクトフォームの項目をスプレッドシートに設定します。

AppSheetでの管理項目として以下の項目を追加し、その後ろにコンタクトフォームの項目をスプレッドシートに設定します。

#項目(スプレッドシートに設定)項目（ラベル）説明
1問合せ番号問合せ番号AppSheet管理用のユニークキーとなる項目
2ステータスステータス問い合わせの状況管理用項目
3担当担当問い合わせ現対応者
4date問合せ日コンタクトフォームから連携される問合せ日（自動で設定）
5time問合せ時間コンタクトフォームから連携される時間（自動で設定）
6your-nameお名前コンタクトフォームの「お名前」
7your-emailメールアドレスコンタクトフォームの「メールアドレス」
8is-corporation個人法人コンタクトフォームの「個人法人」
9your-company会社名コンタクトフォームの「会社名」
10your-messageお問い合わせ内容コンタクトフォームの「お問い合わせ内容」
11privacy-policy個人情報の取り扱いご確認コンタクトフォームの「個人情報の取り扱いご確認」
12備考備考備考
13作成日時作成日時問い合わせ時に日時を追加
14更新日時更新日時レコードの更新時に日時を更新

WordPress管理画面＞お問い合わせ＞コンタクトフォームから、スプレッドシートに反映したいフォームを選択し、編集をしていきます。

「Google Sheet Settings」の各項目に、先ほどのスプレッドシートの値を入力していきます。

#項目名説明例
1Google Sheet Nameスプレッドシートのファイル名DB
2Google Sheet IDスプレッドシートのID1Cuy2Iyz4GA7-FcAcBM**********************
3Google Sheet Tab Nameスプレッドシートのタブ名問合せ
4Google Tab IDスプレッドシートのタブID48482125

図のようにコピペができたら、右上の保存を押して、設定が完了になります。

保存をしてから「Google Sheet Link」を押してみましょう。先程作った、スプレッドシートが開けば、成功です。

問い合わせ内容がスプレッドシートに転記されるか動作確認

お問い合わせ内容のテスト送信

これまで設定した「CF7 Google Sheets Connector」が正しく動作するかを確認します。WordPressのお問い合わせフォームに値を入力し、送信を行います。

スプレッドシートに値が入っていることを確認する

スプレッドシートに値が転記できているか確認します。

AppSheet側の設定を実施

スプレッドシートをAppSheetに追加

まずは、先ほど作成した「問合せ」をAppSheetのDataへ追加します。

※既存のアプリへ追加しているため「案件」などのDataがすでに存在していますが、今回作成する「問合せ」は、「問合せ」だけで動作します。他のDataは無視して頂いて大丈夫です。

ポップアップされる「Add data」にて、以下を実施します。

  1. 「Google Sheets」を選択します。
  2. 「DB」スプレッドシートが格納されているパスまで移動
  3. 「DB」スプレッドシートを選択
  4. 「Select」をクリック

DBスプレッドシートのタブ（Excelでいうところのシート）のうち、どのタブを選択するか聞かれるので、「問合せ」にチェックをいれます。この時アクセス権限は「Update,Add,Delete」とします。

選択した状態で「Add 1 table」をクリックします。

Dataに「問合せ」が追加されますので、Dataの各設定を実施していきます。初期値から変更を加えた項目に赤枠を付けています。

初期値から変更を加えた項目だけ、以下に記載します。

#項目変更内容
1問合せ番号・SHOW?のチェックを外す
・INITTAL VALUEにUNIQUEID()を指定
2ステータス・TYPEをEnumへ変更
・INITTAL VALUEに「未対応」を指定
・ValuesにEnum値を追加（後述）
3your-message・TYPEをLongTextへ変更
4備考・TYPEをLongTextへ変更
5作成日時・INITTAL VALUEにNOW()を指定
6更新日時・INITTAL VALUEにNOW()を指定
7問い合わせタイトル・Vatual Columnとして追加
・INITTAL VALUEに数式を指定（後述）
8KEY・Vatual Columnとして追加
・INITTAL VALUEに数式を指定（後述）

ステータスのEnum値に以下のValueを追加します。

本当は「CF7 Google Sheets Connector」がスプレッドシートへ値を追加したタイミングで、Automationを起動し、初期値の設定をしたいところですが、AppSheetを経由せずにスプレッドシートを更新しているため、難しそうなため今回は初期値が「blank」となります。

一覧に表示するタイトルとして、「会社名＋お名前」の項目を用意します。ただ、法人でない場合もあるため、個人の場合は「お名前」だけ表示するようにします。

CONCATENATE(
  if([is-corporation]="法人",
    CONCATENATE([your-company],
    " "),
    ""
  ),
  [your-name]
)

テーブルの主キー項目を用意します。「CF7 Google Sheets Connector」から連携された場合は、「メールアドレス＋日付＋時刻」を主キーとします。一方、AppSheetの画面から手入力する場合もあるため、「問合せ番号 : UNIQUEID()]も追加しておき、キー項目が重複することが無いようにします。

CONCATENATE([your-email],[date],[time],[問合せ番号])

画面レイアウトの設定

Dataが作成できたので、画面のレイアウトを作成します。「PRIMARY NAVIGATION」の横の「＋」ボタンを押し、「問合せ」画面を追加します。

追加した「問合せ」画面の設定を行います。

  1. View name：問合せ
  2. For this data ：問合せ
  3. View type：dick
  4. Positon：last
  5. Sort by：data,time
  6. Group by：ステータス
  7. Primary header：問い合わせタイトル
  8. Secondary header：date

画面の動作確認

WordPressから新規にお問い合わせを実施します。以下の内容でフォームに入力し、送信を実施しすると、

AppSheetの「問合せ」画面に、新しいレコードが追加されていることが分かります。

また、新規に追加することも可能です。

まとめ

今回の対応で、以下が出来るようになり、ワードプレスからの問い合わせ状況を見える化し、共通・管理できるようになりました。

  • WordPressのお問い合わせフォームの内容を「CF7 Google Sheets Connector」を使ってスプレッドシートへデータの転記を行いました。
  • AppSheetに「問合せ」画面を追加し、スプレッドシートに転記された内容を管理できるようになりました。

Comments

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

More posts