WordPressのContact Form 7を使いAPI経由でフォームと送信する

CMSサービス、フォームメールのバックエンドサービスが出始めていますが、クライアントの都合でなかなかそういったサービスを使えないこともあります。
Wordpressを使いつつ、HeadlessCMSとして使う想定の中でフォーム送信機能もWordpress側で持たせてあげたい、という要件はきっとある(はず)。

※ Wordpress全般に言えることですが、Contact Form7はちょこちょこ脆弱性が見つかって攻撃されているなどの問題もあります。そういうところも含めてWordPressでの運用を愛せる方が自己責任で行ってください

なんでこの記事をかいたのか

Contact Form7のAPIを叩く記事はQiitaにもあったが、記述が片手落ちでそのとおりにやってもうまくいかなかった。
よりシンプルに十全な記事を書くことを目的としています。

参考にしたURL

前提

• WordpressにContact Form7が入っている
• 実装サンプルはReact typescript fetchですがなんでも

URL エンドポイント

Contact Form 7のエンドポイントはこちらになります。

https://<サイトのURL>/wp-json/contact-form-7/v1/contact-forms/<FORM_ID>/feedback

FORM_IDには、フォームのショートコードに書かれているIDを入れてあげます
[contact-form-7 id="<この数字>" title="コンタクトフォーム"]

<form onSubmit={this.handleSubmit}>
  <input type="text" placeholder="" name="your-name" value={this.state.name} onChange={this.handleChange} />
</form>

Reactの場合、formのonSubmitのイベントで処理するとかんたんです。
name属性には、Contact Form7のフォームに指定したnameを入れてあげましょう

const API_URL = 'https://<サイトのURL>/wp-json/contact-form-7/v1/contact-forms/<FORM_ID>/feedback'
handleSubmit = async (event) => {
    event.preventDefault();
    const formElement = event.target;
    const body = new FormData(formElement);
    const res = await fetch(API_URL, {
      method: 'POST',
      body: body,
    })
  }

あとはサーバーサイドのバリデーション結果や送信完了はレスポンスで返ってきますので、そのあたりをうまく処理してあげたら完了です