メインコンテンツまでスキップ

お問い合わせフォーム作成

Contact Form 7 を使用する​

WordPress の管理画面でContact Form 7のプラグインをインストールする

参考にしたサイト



ローカルで確認する場合​

WP Mail SMTP by WPFormsプラグインが必要

こちらを参照



REST API での注意点​

  1. 送信するフォームの中身に、フォームで使用するyour-nameなどとは別に_wpcf7_unit_tagというものが必要。これの値は特に決まっていなさそう。
  2. エンドポイントに使用する ID はコンタクトフォームを作成した投稿のポスト ID を使う。

1.に関して​

下記のようにhidden属性を指定して<form>タグの中に入れれば渡せる

<div class="hidden">
  <input type="hidden" name="_wpcf7_unit_tag" value="awedfa" />
</div>

2.に関して​

作成したコンタクトフォームの URL にあるPOST IDを使用する

注意

ショートコードにある ID を指定するというサイトもあったが、エンドポイントが見つからないというエラーが出るので注意

Contact ID



ページ遷移が勝手にされてしまう​

POSTを送ったら成功でも失敗でもリクエスト先のURLにページが遷移してしまう

<script>タグを使って勝手にページ遷移しないようにする

<script>
  const contactForm = document.getElementById("contactForm") as HTMLFormElement;
  const action = contactForm.getAttribute("action");

  contactForm.addEventListener("submit", async (event) => {
    /// 自動的なページ遷移の無効化
    event.preventDefault();
    const formData = new FormData(contactForm);
    const res = await fetch(action, { body: formData, method: "POST" });
    const data = await res.json();
    if (data.status === "validation_failed") {
    }
  });
</script>