ブログ

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

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

WordPress・制作技術Tips

株式会社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をインストールするの解説画像

これで準備完了です。

CF7 Google Sheets Connectorの設定方法

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

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

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

CF7 Google Sheets Connectorの設定方法の解説画像

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

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

1.プラグインとGoogleアカウントを連携するの解説画像

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

1.プラグインとGoogleアカウントを連携するの解説画像(2)

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

1.プラグインとGoogleアカウントを連携するの解説画像(3)

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

1.プラグインとGoogleアカウントを連携するの解説画像(4)

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

1.プラグインとGoogleアカウントを連携するの解説画像(5)

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

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

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

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

2.スプレッドシートを作成するの解説画像

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

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

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

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

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

3.スプレッドシートにCF7作成時に設定したタグを入力するの解説画像(2)

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

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

4.「CF7 Google Sheets Connector」にスプレッドシートの解説画像

①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末尾の数字です。

4.「CF7 Google Sheets Connector」にスプレッドシートの解説画像(2)

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

4.「CF7 Google Sheets Connector」にスプレッドシートの解説画像(3)

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

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

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

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

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

まとめ

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

WordPressサイトの保守・更新についてはホームページ保守・運用サポートホームページ更新サポートもご覧ください。

制作会社・広告代理店様へ|コーディングやWordPress実装のリソースが不足している場合、ENVY DESIGNの外注パートナーサービス「KUROCO コーディング外注」でご相談を承っています。14年・50社以上の協業実績があり、NDA対応も可能です。

出典

関連記事

株式会社ENVY DESIGN

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

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

Webサイト制作のご依頼・お見積りはお気軽に

資料ダウンロード

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

お問い合わせ・ご相談

ホームページ制作・Webサイト制作や保守・更新・運用などでお悩みの方はお気軽にご相談ください。

お電話でのお問い合わせ

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

平日10:00-18:00

03-6883-8292