フォームデータをJSON形式でPOSTする

ついでにフォームコーディングとバリデーションも

jQuery + Ajax

https://api.jquery.com/jQuery.ajax/

jQuery(function($){

	$contactForm = $('#contact-form');

	// バリデーション

	// JSONデータ送信
	$contactForm.submit(function(ev) {
		ev.preventDefault();

		var data = {
			contact_type: $('input[name="contact_type"]').val(),
			nickname: $('input[name="nickname"]').val(),
			xxx: [{
				xxxx: $('input[name="address.postcode"]').val(),
				xxxx: $('input[name="address.prefecture"]').val(),
			}]
		}

		$.ajax({
			method: "POST",
			url: "https://jsonplaceholder.typicode.com/posts", //ダミーに使えるオンラインサービスURL
			// url: "./receive.php",
			dataType: 'json',
			contentType: 'application/json',
			data: JSON.stringify(data)
		})
		.done(function(data) {
			alert(JSON.stringify(data));
			window.location.href = "/contact/thankyou/";
		})
		.fail(function(err) {
			window.location.href = "/contact/error/";
		});
	});
});

receive.php

<?php
$json = file_get_contents( 'php://input' );
echo $json;

ajaxを介して管理者へメールを送信する場合

jQuery

  jQuery('input.validate, textarea.validate, select.validate').each(function () {
    $this = jQuery(this);

    //バリデーション

  // --- JSONデータ送信 ---
  var originalData = {
    family_name: jQuery('input[name="family_name"]').val(), //お名前（姓）
    first_name: jQuery('input[name="first_name"]').val(), //お名前（名）
  };

	// 外部フォームへの送信処理
    jQuery
      .ajax({
        method: "POST",
        url: "https://jsonplaceholder.typicode.com/posts",
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify(originalData),
      })
      .done(function (apiResponse) {
        sendEmail(originalData);
      })
      .fail(function (jqXHR, textStatus, errorThrown) {
        window.location.href = homeurl + 'contact/error/';
      });

  // メール送信
  function sendEmail(data) {
    jQuery.ajax({
        method: "POST",
        url: "/sendmail/index.php",
        data: data
    })
    .done(function(response) {
        window.location.href = 'contact/thankyou/';
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
        window.location.href = 'contact/error/';
    });
  }
});

/sendmail/index.php

サイトのルートに置く

<?php
// お問い合わせフォームから送られたデータ（姓&名）を管理者メールアドレスに送信
// フォームはform-contact.phpに記述
// 入力されたフォームデータ（姓&名）は /assets/js/contact.js を介して受信

mb_language( 'Japanese' );
mb_internal_encoding( 'UTF-8' );

if ( 'POST' === $_SERVER['REQUEST_METHOD'] ) {
	$family_name = htmlspecialchars( $_POST['family_name'] ?? '', ENT_QUOTES, 'UTF-8' );
	$first_name  = htmlspecialchars( $_POST['first_name'] ?? '', ENT_QUOTES, 'UTF-8' );

	$to       = 'admin@example.com';
	$subject  = 'example.comに問合わせがありました';
	$message  = "以下の氏名で問い合わせがありました。\n \n氏名 $family_name $first_name";
	$headers  = "From: no-reply@example.com\r\n";
	$headers .= "Reply-To: no-reply@example.com\r\n";
	$headers .= 'X-Mailer: PHP/' . phpversion();

	mail( $to, $subject, $message, $headers );
}

JavaScriptのfetch() メソッド使う方法

const formEl = document.querySelector('.form');
formEl.addEventListener('submit', event => {
	event.preventDefault();

	const formData = new FormData(formEl);
	const data = Object.fromEntries(formData);

	fetch('https://reqres.in/api/users', {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json'
		},
		body: JSON.stringify(data)
	})
	.then(res => res.json())
	.then(data => console.log(data))
	.catch(error => console.log(error));
});

AXIOS を使う方法

formEl.addEventListener('submit', event => {
	event.preventDefault();

	const formData = new FormData(formEl);
	const data = Object.fromEntries(formData);
	axios.post('https://reqres.in/api/users', data)
	.then(function (response) {
		console.log(response.data);
	})
	.catch(error => console.log(error));
});

HTTP レスポンスステータスコード

情報レスポンス (100–199)
成功レスポンス (200–299)
リダイレクトメッセージ (300–399)
クライアントエラーレスポンス (400–499)
サーバーエラーレスポンス (500–599)

https://developer.mozilla.org/ja/docs/Web/HTTP/Status