探求ボーイ

はじめに

Wordpressでお問い合わせデータをスプレッドシートに保存する際は通常、Contact Form 7 + CF7 Google Sheets Connector で実現できるのだが、Wordpressのバックアッププラグイン「BackWPup」と一緒に稼働することができない為、別の方法を検討した。
そこで今回、Google Sheets Connectorプラグインは使わずにGASの自作スクリプトで対応することにした。
Wordpress プラグインを使わずに構築出来たため、他の環境でも実現可能な構成だと思う。
もし、同様の問題で悩んでいる方がいればぜひ参考にしてほしい。
※GASとはGoogle App Scriptの略。

構成について

まず最初に全体の構成について説明する。大きな括りとしては2つになる。
①お問い合わせ完了時にデータをJSON化してGASにポストする。
②GAS側で受け取ったJSONデータをスプレッドシートに書き込む。
という構成で実現している。
①では、送信イベント時に実行するJSコードを作成し、Wordpressのfunctions.phpに追記する。詳細のコードは後述する。
②では、①でPOSTされたデータを受け取り、スプレッドシートに書き込むGASを作成する。こちらも詳細のコードは後述する。
概要は以上である。それでは次に実際のコードと設定方法について説明していく。

POSTされたデータをスプレッドシートに書き込む

まずはデータを受け取る側のGASから説明していこうと思う。
最初にお問い合わせデータを保存したいスプレッドシートを用意する。
新規作成でも既存のシートでもどちらでも大丈夫です。
次に、GASを作成する為、AppScriptのエディタを開く。
スプレッドシートのメニューから、拡張機能⇒App Scriptでエディタが開く。

そうすると、myFunctionとだけ記載された空っぽのエディタが開くので、下記のコードで上書きします。

このコードをそのまま貼り付けてください。

function doPost(e){
  let postContent = e.postData.getDataAsString();
  main(postContent);
  let output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.JSON);
  output.setContent(JSON.stringify({ message: "success"}));
  return output;
}
function main(message){
  let json = JSON.parse(message);
  let sheetId = 'ここにシートIDを記載する。';
  let sheet = SpreadsheetApp.openById(sheetId).getSheetByName(json.sh);
  let headerRowNum = 1;
  let headerRow = sheet.getDataRange().getValues()[headerRowNum - 1];
  let idColomnNum = getIdColomnNum(headerRow);
}
// データの左端カラムの位置を取得。
function getIdColomnNum(headerRow){
  let i = 0
  for (const header of headerRow){
    if (header === ""){
      i++;
      continue;
    } else {
      break;
    }
  }
  return i + 1;
}
// insertメソッド
function insertRows(sheet, headerRow, jsonMessage){
  for (let row of jsonMessage.rows){
    let rowArray = []
    for (let colName of headerRow){
      rowArray.push(row[colName])
    }
    sheet.appendRow(rowArray);
  }
}

貼り付けたコードの中の「ここにシートIDを記載する。」の部分を変更しましょう。
シートIDの確認方法は最初に作成したスプレッドシートを開きます。
URLのd/から後ろの文字列がシートIDになります。

シートIDをコピーし、コードに貼り付けたら、エディタの保存ボタンを押し、コードをプロジェクトに保存します。

そして、GASの最後の設定になります。
右上のデプロイのボタンから新しいデプロイを選択します。

デプロイタイプを選択します。

種類の選択からウェブアプリを選択します。

右下のデプロイボタンをクリックします。
設定項目が表示されますので、新しい説明文にはご自分が分かりやすいものを、次のユーザーとして実行には自分のGoogleアカウントを、最後のアクセスできるユーザーには全員を指定し、右下のデプロイボタンを押します。

デプロイが完了したら、デプロイIDとURLが表示されます。
URLはJavascriptのコードで使用するのでコピーして保存しておいて下さい。

これで、GAS側の設定は完了となります。
次はお問い合わせフォームの設定です。

お問い合わせ時にJSONデータをPOSTする

まずは、functions.phpを開きます。

そして、下記のコードを貼り付けてください。

<?php
add_action( 'wp_footer', function () { //<footer>内で実行します
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  var inputs = event.detail.inputs;
  const now = new Date();
  const now_yyyymmddhis = now.getFullYear() + "-" + (now.getMonth() + 1)  + "-" + now.getDate() + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
  let contact_data = {"contact_at": now_yyyymmddhis}
  for (var i = 0; i < inputs.length; i++) {
    if (contact_data[inputs[i].name]) {
      contact_data[inputs[i].name] += ', ' + inputs[i].value;
    } else {
        contact_data[inputs[i].name] = inputs[i].value;
    }
  }
  var fetch_url = 'ここにデプロイURLを記載する。';
  fetch(fetch_url, {
    method: 'post',
    headers: {
      'Content-Type': 'application/json',
    },
    mode: 'no-cors',
    body: JSON.stringify({"sh": "ここにシート名を記載する", "start_p": 1, "rows": [contact_data]})
  })
  .then(response => {
    console.log('catch response.');
  })
  .then(json => {
    console.log('catch json.');
  })
  .catch(err => {
    // エラー処理
    console.log('catch err.');
    console.log(err);
  });
});
</script>
<?php
}, 10, 0 );
?>

ここに「デプロイURLを記載する。」の箇所にGASでデプロイした際に保存しておいたデプロイURLを貼り付けてください。
次に、下記コードの「ここにシート名を記載する」の部分にスプレッドシートのシート名を記載して下さい。※日本語よりも半角英数を推奨します。

body: JSON.stringify({"sh": "ここにシート名を記載する", "start_p": 1, "rows": [contact_data]})

シート名は画像の部分のことです。

コードが書き換えれたら、functions.phpを保存して下さい。
Wordpress側の設定も完了です。
そして最後にスプレッドシートの1行目にお問い合わせフォームの項目名を記載していきます。
記載した場所にお問い合わせデータが書き込まれていきますので、文字列が違うと正しく反映されませんのでご注意ください。
それでは、WordpressからContact Form 7の編集画面を開きます。
必要な情報はformのname属性に設定される値です。your-name, your-email, your-subject, your-messageがname属性の値になります。

これらをスプレッドシートに記載していきます。
一番左にはcontact_atと記載して下さい。ここにはお問い合わせ日時が入ります。

以上で、WordpressのContact Form 7からSpreadsheetへのデータ保存が出来るようになりました。
プラグインの干渉などで困った際はこちらの構成もぜひ検討してみてはいかがでしょうか。

参考にしたサイト

rooter.jp

探求ボーイ

ブログ×プログラミング×マーケティング

Wordpressでお問い合わせデータをスプレッドシートに連携する

はじめに

構成について

POSTされたデータをスプレッドシートに書き込む

お問い合わせ時にJSONデータをPOSTする

参考にしたサイト

ブログサービス開発ブートキャンプ

はじめに

このサイトで身につくスキル

ブログサービスを作るのに必要な知識・ツール

プログラミングスキル

WEBサイト制作スキル

データベーススキル

早速やってみよう！