Contact Formの送信結果をGoogleスプレッドシートに保存する方法

WordPressを利用しておくと大抵問い合わせページとしてTakayuki Miyoshi氏が開発した「Contact Form 7」というプラグインを利用することが多い。

このプラグインをそのまま利用するだけでも高機能で、大抵のサイトであれば純正のまま問い合わせの役割は果たすことができるだろう。

しかし、Yuichiro ABE氏はこのContact Formをさらに高機能化させるプラグインである「Contact Form 7 add confirm」を開発した。

これにより、Contact Form 7は問い合わせ時の動作も多様化するだけでなく、高機能な申し込みフォームなど「Form（フォーム）」として更に活用できることになる。

今回の記事ではさらに「CF7 Google Sheet Connector」というプラグインを利用して、GoogleフォームのようにContact Formの送信した結果をGoogleスプレッドシートに保存していく設定手順を紹介する。

Contact Form 7のインストール

プラグインの新規追加にて「Contact Form」と入力する。

そうするとTOPに「Contact Form 7」が表示されるので、こちらをインストールして有効化しよう。

Contact Form 7とは？

WordPressを使ってブログやHPを構築したことのある方であれば、誰でも知っている程有名なプラグインだ。

WordPressというシステムを利用してHPを構築した場合、「プラグイン」という機能を利用してWordPressに機能を追加することができる。

このContact Form 7もまたプラグインなのだが、これを追加することによってよくある問い合わせのページが簡単に作ることができる。

参考までに、当サイトの問い合わせページもこのContact Form 7を利用して作成している。

CF7 Google Sheet Connectorのインストール

先程のContact Form 7と同様に、プラグイン追加画面にて「CF7 Google Sheet Connector」と入力しよう。

表示された「CF7 Google Sheet Connector」をインストールして、有効化しておく。

CF7 Google Sheet Connectorとは？

「Contact Form 7」と「Contact Form 7 add confirm」の知名度は高いが、このCF7 Google Sheet Connectorを知っている人は意外と少ない。

このCF7 Google Sheet Connectorでは、今回の記事のタイトルがまさに機能の全てで、Contact Form 7と連携させることにより、そのフォームから送信された情報を設定しておいたGoogleスプレッドシートに保存することができるプラグインだ。

Googleスプレッドシートとの連携

いよいよ、GoogleスプレッドシートとCF7 Google Sheet Connectorを連携させる。

簡単そうで意外と手間な作業なので、1つずつ着実にこなしていこう。

CF7 Google Sheet Connectorの初期設定

CF7 Google Sheet Connectorをインストールしたら、プラグイン一覧画面より「Settings」をクリックする。

「Integration」タブの「Google Sheets」欄にある「Get Code」ボタンをクリックする。

するとGoogleのアカウント選択画面が開かれるので、自分がメインに使っているアカウントを選択する。

そのまま進んでいくと、「このコードをコピーし、アプリケーションに切り替えて貼り付けてください。」と書かれた画面が表示されるので、これをコピーする。

このコードを先程の「Google Access Code」欄に貼り付けて「Save」ボタンをクリックすると連携が完了する。

Googleスプレッドシートの作成

まずは保存されるGoogleスプレッドシートを作成しよう。

Google Driveを開き、任意の場所で右クリックして「Googleスプレッドシート」を選択する。

Googleスプレッドシートの作成が完了したら、実際に今回連携させたいContact Form 7の画面に合わせて設定を行っていく。

当サイトの場合だとほとんど初期値となっているが下記のようになっている。

これにおける、「your-name」「your-email」「your-subject」「your-message」という項目名を、先程のGoogleスプレッドシートの1行目にそれぞれ記載する。

Contact Form 7の画面を開くと気づいたかもしれないが、タブに新しく「Google Sheets」という項目が正常にインストールされていると表示される。

ここを設定して保存することで連携が完了する。

設定はそれぞれ下記のように設定を行う。

• Google Sheet Name
  →Googleスプレッドシート自体のタイトル
• Google Sheet Tab Name
  →スプレッドシートのタブの名称。作ったままだと「シート1」となっている部分の名称だ。

「Google Sheet Id」と「Google Tab Id」についてはGoogleスプレッドシートのURLに着目する必要がある。

「保存」ボタンをクリックすると、以上で設定作業は終了だ。

実際に自分でContact Form 7から送信してみて、自動的にGoogleスプレッドシートに内容が記載されているかテストを行おう。

まとめ

今回の記事では、Contact Formの送信結果をGoogleスプレッドシートに保存する方法を紹介した。

Contact Form 7はContact Form 7 add confirmを組み合わせることでGoogleフォームよりも拡張性に優れたフォームを作成することができる。

問い合わせだけでなく、申し込みフォームとしても利用でき、さらに今回の方法でGoogleスプレッドシートに随時保存することもできるのでぜひ試してみてほしい。