WordPressサイトにGoogleスプレッドシート連携の入力フォームをつくる手順【2024年最新】

今回はWordPress上のサイトのフォームから、Googleスプレッドシートに情報を書き込む実装についてご紹介します。

本記事では任意のメッセージと、メッセージが送信された時間のふたつの情報をスプレッドシートに記録してゆきます。

1.Googleスプレッドシートを作成

2.Google Apps Scriptにコードを設置

次にPHPから送信される情報を受け取り、スプレッドシートに入力する部分のスクリプトを設置します。ここでスプレッドシート内のどの列にどの情報を入れるかの制御をすることになります。

上部メニューの「拡張機能>Apps Script」からプロジェクトを開くと、下図のような画面が開きますのでこちらに指定のコードをコピペしましょう。

function doPost(e) {
  // POSTした内容を取得
  var message = e.parameter.message;
  var date    = e.parameter.date;
  // スプレッドシートへの書き込み
  var spread = SpreadsheetApp.getActiveSpreadsheet();
  var lastRow = spread.getSheets()[0].getLastRow();
  spread.getSheets()[0].getRange((lastRow + 1), 1).setValue(message);
  spread.getSheets()[0].getRange((lastRow + 1), 2).setValue(date);
  // returnの設定
  var jsonData = {
    message: message,
    date: date,
    result: 'ok'
  }
  return ContentService.createTextOutput(JSON.stringify(jsonData))
    .setMimeType(ContentService.MimeType.JSON);
}

スクリプトを設定したら「新しいデプロイ」をしましょう。

デプロイ完了後にWebアプリのURLが発行されますので、そちらを控えておきましょう。送信側のPHP内で記載が必要になります。

※スクリプトを変更する場合は再度「新しいデプロイ」を行って発行されたURLも変更するようにしてください。

3.WordPressテーマフォルダにファイル一式を格納

ajax-spreadsheets.php

JSファイルからAjaxで情報を受け取り、Google Apps Scriptに送信するまでの制御をするPHPプログラムです。項目を追加したり、識別名が変わったりする場合は調整が必要です。

<?php
if (isset($_POST['message'])){

  /* Googleスプレッドシートに送信 */
  date_default_timezone_set('Asia/Tokyo');
  $url = 'https://script.google.com/macros/s/.../exec';
  $data = array(
    'message' => $_POST['message'],
    'date' => date("Y-m-d H:i:s"),
  );
  $context = array(
    'http' => array(
      'method'  => 'POST',
      'header'  => implode("\r\n", array('Content-Type: application/x-www-form-urlencoded',)),
      'content' => http_build_query($data)
    )
  );
  $response_json = file_get_contents($url, false, stream_context_create($context));
  $response_data = json_decode($response_json);

} else {

  echo 'false';

}
?>

ajax-spreadsheets.js

HTMLのフォームから情報を受け取り、入力状況をチェック、問題なければajax-spreadsheets.phpに情報を送る制御をしています。項目が増えたり、識別名が変わる場合は調整が必要です。

jQuery(function() {

  /* 送信ボタン押下 */
  $('#spreadsheets-send').click(function() {

    let message = document.getElementById('spreadsheets-message').value;

    if(message==''){

      alert('メッセージを入力してください。');

    } else {

      send_opinion(message);

    }
    return false;

  });

  /* APIへの情報送信 */
  function send_opinion(message){

    jQuery.ajax({
      type: "POST",
      url: 'https://.../wp-content/themes/.../ajax-spreadsheets.php',
      data: {
        message: message
      },
      success: function(response) {
        alert('メッセージを送信しました。');
      }
    });

  }

});

page-spreadsheets.php

WordPressの固定ページテンプレートです。テンプレート化することで、固定ページで使用することが可能になります。ここではajax-spreadsheets.jsの読み込みんで、フォームの内容をJSに伝えるようにしています。

<?php
/**
* Template Name: PageSpreadsheets
*/
?>
<!DOCTYPE html>
<html lang="ja">
<head>

	<meta name="robots" content="noindex">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
	<title>Googleスプレッドシート連携</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
	<script type="application/javascript" src="https://.../wp-content/themes/.../ajax-spreadsheets.js"></script>

</head>
<body>

<form>
<textarea id="spreadsheets-message" rows="1" placeholder="メッセージを入力してください。"></textarea>
<button id="spreadsheets-send">送信する</button>
</form>

</body>
</html>

4.WordPress固定ページでフォームのテンプレートファイルを設定

page-spreadsheets.phpをテーマフォルダに格納すると、自動的に固定ページのテンプレート内で該当テンプレートを選択できるようになりますので、そちらを設定した固定ページを作ればフォームの完成です。

執筆者情報

田所 雄介

田所 雄介

Web制作事務所タドワークス代表。Webマーケティングをベースにしたコンテンツ設計からWeb開発まで、幅広い実践的スキルを持つジェネラリスト。【Web】https://tadworks.jp/