こんにちは。

Contact Form 7の実装の要件で、サンクスページの代わりにボタンに「送信されました！」と表示させたいということで試行錯誤しました。

アクションフックとか使うかなと思ったんですが、調べたらJavaScriptで対応できたのでメモ代わりに残しておきます。

結論

先に実装済みのコードを紹介するとこんな感じです。

  const button = document.getElementById("js-formSend")

  document.addEventListener("wpcf7submit", function (event) {
    if (event.detail.status === "mail_sent") {
      button.classList.add("is-success")
      button.textContent = "送信されました！"
      button.disabled = true
    }
  })

フォームの送信ボタンにはjs-formSendというidをつけています。
また、送信成功に応じてボタンにclassも追加しています。
送信後に再度送信が押せないようにボタンに対してdisabled属性もつけています。

カンタンな解説

Contact Form 7で送信すると成功でも不成功でもwpcf7submitというイベントが発火するのですが、そのイベントの中でステータスを確認できるようになっています。

console.logで確認すると良いと思います。

  document.addEventListener("wpcf7submit", function (event) {
    console.log(event.detail.status)
  })

ステータスに応じて好きなように処理を入れればOKです！

参考

Contact Form 7の投稿時に実行されるフック「wpcf7_mail_sent」について調べる
【Contact Form 7】送信後のメッセージを上に表示させる方法+送信後フォームを消す方法
Contact Form 7 の独自フック一覧