WordPressで独自テーブルにフォームデータを格納する。バリデーションや非同期通信もやってみる。

■背景

仕事のため、必要だったため。
あまり記事もなく、調査が面倒だった。
自分共有用として。

mysqlのテーブル作成は記載していない。

■概略

処理の流れは以下

1. フォームの送信ボタンをクリック時に、javascript起動（バリデーション、送信前の確認メッセージ、非同期で自身の固定ページにpost送信）

2. 自身の固定ページにpost送信するので、配置しているショートコードがキック

3. 使用しているテーマのメソッドがキック

■固定ページ

html

<h2>アンケート</h2>
<form action="" name="survey_form">
  氏名：<input id="full_name" name="full_name" required="" type="text" />
  →注意：wordpressはname属性に「name」とすると、post送信時にエラーとなる
  
  〜その他フォームなど〜
  
  <button id="survey_form" type="submit" onclick="manageSurvey_form();">送信</button>
</form>

javascript（送信ボタンクリック時に呼び出される）

<script>
  function manageSurvey_form() {
    /* 送信前のバリデーションをする */
    const full_name = document.getElementById('full_name').value;

    validation_msgs = checkSurvey_form(full_name);

    if(validation_msgs !== "") {
      alert(validation_msgs);
      return false;
    }

    // 確認メッセージを生成する
    confirmMessage =  '以下の内容で送信します。\n'
                        + '氏名：' + full_name;
  
    // 確認メッセージを表示する
    if (window.confirm(confirmMessage)) {
      // formdata作成
      const id = document.getElementById('survey_form');
      const form_data = new FormData(id);
      form_data.set('full_name',full_name);
			
      // 送信処理
      submitSurvey_form(form_data).catch(alert);
    }
  }

  // アンケートの入力値をチェックする
  function checkSurvey_form(full_name, company, mail) {
    /* バリデーション*/
    let validation_msgs = [];

    if(full_name === ""){ 
      validation_msgs.push('氏名を入力してください'); 
      
      〜他　バリデーション〜
    }
    
    return formated_validation_msgs;
  }

  // 非同期でアンケートをpost送信する
  async function submitSurvey_form(form_data) {
    // 自分自身の固定ページにデータを送信することで、同じ固定ページに配置したショートコードをキックする
    const response = await fetch("", {
        method: 'POST',
        body: form_data
    });

    if (response.ok){
     　// post送信成功時の処理
    } else {
      throw new Error(response.status);
    }
  }
</script>

ショートコード

[store_survey]

■使用しているテーマの：funcitons.php

//　ファイルダウンロードログをDBに格納する
function storeSurvey) {
  if(isset($_POST) 
      && !empty($_POST)
      && !empty($_POST['file_name'])){

    // DB接続情報取得
    global $wpdb;
    // テーブル名にはプレフィックス（wp_）は記載しない
    $tableName = $wpdb->prefix . "テーブル名";
    
    $wpdb->insert($tableName,
      array( 'file_name' => $_POST['file_name'] ),
      array( '%s' )
    );
  }
}
add_shortcode('store_survey', 'storeSurvey');