弊社でお受けするサイト制作案件では主にWordPressを使用しています。
そして基本的にお問い合わせフォームの設置もご依頼されることが多くあります。
弊社ではお問い合せフォーム設置の際は、おそらく国内のプラグインでは1番有名なContactForm7を利用して実装するようにしています。
カスタマイズが簡単にできたり、自動返信メールなども対応可能ということで大変便利なプラグインなのですが、たまに「お問い合わせ内容をGoogleのスプレッドシートに記録されるようにしてほしい」というご相談をいただくことがありました。

そこで今回はContactForm7とGoogleスプレッドシートを連携させる方法をご紹介したいと思います。

「CF7 Google Sheet Connector」をインストール

【WordPress管理画面】プラグイン > 新規追加

プラグイン管理画面から「新規追加」をクリックして「CF7 Google Sheet Connector」で検索します。

赤枠のプラグインをインストールします。

連携用のスプレッドシートの作成

次にお問い合わせ内容を連携させるためのスプレッドシートを新規作成します。
いくつか設定しないといけないことがあるので順に説明します。

「スプレッドシート名」と「タブ名」を設定する

今回は、
スプレッドシート名 : cf7-contact
タブ名 : contact-sheet
とそれぞれつけました。
名前は何でもいい（半角英数字）のですが、あとから見たときにわかりやすい名前がいいと思います。

「お問合せフォームの項目」を設定する

次に、ContactForm7で利用しているお問い合わせ内容の全項目をスプレッドシートの1行目に入力します。
この設定をして次の項目の連携設定をすると、スプレッドシートの2行目以降にお問い合わせ内容が反映されていきます。

スプレッドシート連携の設定

【WordPress管理画面】お問い合わせ > お問合せフォーム > Google Sheetsタブ

まず、Google Sheet Settingsの項目に必要事項を入力していきます。

上から「①スプレッドシート名」「②スプレッドシートID」「③タブ名」「④タブID」となっています。

スプレッドシート名は先ほど作成したスプレッドシートの「cf7-contact」、タブ名は「contact-sheet」を入力します。
「スプレッドシートID」と「タブID」は以下を参考にして入力してください。

・スプレッドシートIDの確認方法

スプレッドシートのURLの「*****」の部分がスプレッドシートIDになります。

https://docs.google.com/spreadsheets/d/*****/edit#gid=0

・タブIDの確認方法

スプレッドシートのURLの最後の「edit#gid=0」内の数字「0」がタブIDになります。

https://docs.google.com/spreadsheets/d/*****/edit#gid=0

必要事項を入力したら、「保存」ボタンをクリックします。

次にスプレッドシートとの連携をします。

【WordPress管理画面】お問い合わせ > Google Sheets

「Google Access Code」の横にある「Get Code」をクリックすると、Googleアカウント認証のページへ遷移します。

順番に3つ承認画面が表示されるので、全て「許可」を選択します。

最後の画面でコードが表示されるので、そのコードをコピーしてください。
※このコードは非常に大切なものなので、他人には絶対に共有しないようにしてください。

その後、先程の管理画面のコード入力欄にコードを入力して「保存」ボタンをクリックします。

これでお問い合せフォームとスプレッドシートの連携設定は完了です。

動作確認

最後にお問い合せフォームを送信して、送信内容がスプレッドシートに反映されているか確認してみましょう。

問題なく反映されていれば連携は完了です！
もし反映されないなどエラーが発生した場合は、もう一度最初からやり直してみてください。認証したGoogleアカウントがスプレッドシートを作成したGoogleアカウントと同一のものでないと連携はできません。

さいごに

CF7 Google Sheet Connectorを利用すれば、簡単にGoogleスプレッドシートとお問い合わせフォームを連携させることができるようになります。
お問い合わせの管理が非常に効率的に行えると思いますので、お困りの方はぜひお試しください！

SNSみてるとセカオワのドラゲナイはもう懐メロなんだろうなって感じました。
マエダです。
（´-`）.｡oO (え？懐メロって死語ですか？

さて、みんな大好きJavaScript。
おもしろいシンタックスをご紹介します。

文字列型へのキャスト

var a = 1;
console.log(typeof(a)); // number
var b = "" + a;
console.log(typeof(b)); // string

数値型へのキャスト

var a = "1";
console.log(typeof(a)); // string
var b = ~~a;
console.log(typeof(b)); // number

配列の重複削除

const array1 = ["a","b","b","c","a"];
const array2 = [...new Set(array1)];
console.log(array2); // ["a","b","c"]

オブジェクトの値渡し

var object1 = ["a","b"];
var object2 = object1;
object2[0] = "c";
console.log(object1); // ["c","b"]
console.log(object2); // ["c","b"]

JavaScriptではオブジェクト型は参照渡しとなります。
以下のようにすればプリミティブ型のように値渡しとすることができます。

var object1 = ["a","b"];
var object2 = JSON.parse(JSON.stringify(object1));
object2[0] = "c";
console.log(object1); // ["a","b"]
console.log(object2); // ["c","b"]

僕の場合、どんなプログラミング言語もなのですが、ときどき触るとはじめましてになりがちです；

ドラゲナイ