ブログ

エンヴィデザインの取り組みやナレッジをお届けします。

Contact Form7の送信内容をスプレッドシートに自動で反映する方法(CF7 Google Sheets Connecto)

WordPress

株式会社ENVY DESIGN

フロントエンドエンジニア

WordPressのお問い合わせフォーム用プラグイン、Contact Form7(以下CF7)
CF7で作成したフォームから届くお問い合わせの内容をスプレッドシートにまとめたい、というご要望があるかもしれません。

そんな時は「CF7 Google Sheets Connector」というプラグインを使うと、届いたお問い合わせ内容を自動でスプレッドシートに反映する事ができます。

プラグインの設定方法をわかりやすくご紹介していきます。

※CF7でフォームが既に作られている前提です。もしCF7がインストールされていない場合は「CF7 Google Sheets Connector」をインストール時にエラー文が出るので、先にCF7をインストール、フォームを作成してください。

CF7 Google Sheets Connectorをインストールする

プラグインのキーワードに「CF7 Google Sheets Connector」で検索し、「今すぐインストール」をクリック→有効化をクリックします。
直接インスールする場合はこちら

これで準備完了です。

CF7 Google Sheets Connectorの設定方法

設定の手順は以下のようになります。

  1. プラグインとGoogleアカウントを連携する
  2. スプレッドシートを作成する
  3. スプレッドシートにCF7作成時に設定したフォームタグを入力する
  4. 「CF7 Google Sheets Connector」にスプレッドシートの必要情報を入力する

まずはWordPress管理画面の左側メニューのCF7(メールアイコンお問い合わせ)をクリックすると表示されるメニュー内に「Google sheets」というメニューが追加されているのでクリックします。

1.プラグインとGoogleアカウントを連携する

表示される画面内の「Sign In with Google」というボタンをクリックします。

連携するGoogleアカウントを選択する画面に移りますので、今回連携したいアカウントをクリックします。

ログイン画面が出るので「次へ」をクリックします。

アクセスを求める画面が出るので「すべて選択」にチェックを入れて「続行」ボタンをクリックします。

最初の設定画面に戻るので「Google Access Code」欄を見るとコードが入っているはずです。
右側の「Save」ボタンをクリックします。

これでGoogleアカウントの連携は完了です。

2.スプレッドシートを作成する

お問い合わせの回答を自動でまとめていく用にスプレッドシートを新規作成します。
スプレッドシートサイトのプラス「+」のマークをクリックすると新規のスプレッドシートが表示されます。
※先ほどGoogleアカウントで連携したアカウントで作成してください。Googleアカウントが複数ある場合、連携していない別のアカウントでスプレッドシートを作成しても自動で反映されていかないので注意です。

スプレッドシート左上のタイトル箇所に任意のタイトルを入力します。こちらは後ほど設定の際に必要となるので必ず何かタイトルを入力する必要があります。
今回は「サイトからのお問合わせ」としました。

3.スプレッドシートにCF7作成時に設定したタグを入力する

スプレッドシートの1行目にCF7でフォーム作成時のフォームタグのnameの部分をそれぞれ入れていきます。画像だと赤枠の「your-name」「your-email」「your-message」の部分です。

「date」と「time」を入れておくとお問い合わせフォームから送信された日付と時間を受け取ることができます。

下部のシートタブ名も後ほど入力する際に必要な箇所ですが特に変更せずにデフォルトの「シート1」のままでも問題はありません。今回は「お問合せ」と変更しました。

4.「CF7 Google Sheets Connector」にスプレッドシートの必要情報を入力する

プラグインCF7で作成したフォームを開いてタブの一番右側に追加されている「Google Sheets」を開くとスプレッドシートの情報4つ入力する欄があるので入れていきます。

①Google Sheet Nameはスプレッドシートのタイトル名です。

②Google Sheet IDはスプレッドシートのURLの
https://docs.google.com/spreadsheets/d/この部分/edit#gid=0
です。

③Google Sheet Tab Nameはスプレッドシートの下部のシート名です(デフォルトは「シート1」今回は「お問合せ」)

④Google Sheet IDはスプレッドシートのURL末尾の数字です。

入力完了したら「保存」をクリックします。
正しく入力されていると「Google Sheet link」をクリックすると連携しているスプレッドシートが開きます。

これで設定は完了しました。

CF7で作成したフォームから送信された内容がスプレッドシートに自動的に反映されていくはずなので確認してみてください。

確認画面用のContact Form 7 Multi-Step Formsを使用している場合

フォームから直接送信完了ではなく確認画面を作成する為にContact Form 7 Multi-Step Formsを利用している場合も多いと思います。

Contact Form 7 Multi-Step Formsを利用している場合は通常のフォームと確認画面用のフォームの両方に入れると2通分取得してしまうので、スプレッドシートの情報は通常フォームのみに入れるのが良いと思います。

まとめ

お問合せのメールをメールソフトだけで管理していると他のメールに紛れて探すのに時間がかかったりしますよね。
スプレッドシートにまとめておくと管理しやすくとても便利になるので、ぜひ今回ご紹介した方法を活用してみてください。

株式会社ENVY DESIGN

フロントエンドエンジニア

株式会社ENVY DESIGNフロントエンドエンジニア。コーディングとCMS構築を主に担当。フリーランス出身、色々なサイト制作に携わった経験を元に、実装中の気付きや技術的な情報を発信してきます。

よくある質問

オンラインでの集客を強化し、
ビジネスを成長へと導きます。

資料ダウンロード

Web制作に関する資料と会社紹介をダウンロードできます。

お問い合わせ・ご相談

Webサイト制作後や制作後の運用などでお悩みの方はお気軽にご相談ください。

お電話でのお問い合わせ

お電話でのお問い合わせをご希望の方は、こちらからお気軽にご連絡ください。

平日9:30-18:30

03-6883-8292