Contact Form 7 (CF7) HTMLタグ自動変換ツール

HTMLとCSSで綺麗にコーディングした静的フォームを、Contact Form 7の管理画面に移植する「地味で面倒な作業」を自動化します。
元のHTML構造（divやlabelの囲み）はそのまま維持し、<input> や <textarea> だけをCF7専用のショートコードに一括変換します。

1. フォームの変換（HTML → CF7ショートコード）

左側のエリアにコーディング済みのHTMLを貼り付けると、右側にCF7用のコードが生成されます。
※対応タグ：text, email, tel, textarea, select, submit

2. サンクスページ（完了画面）への転送スクリプト生成

CF7の送信が完了した後、指定した「送信完了ページ（thanks.html等）」へ自動でリダイレクトさせるためのJavaScriptコードを生成します。

📄 生成されたリダイレクトスクリプト

お使いのテーマの footer.php の </body> の直前などに貼り付けてください。 

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = 'https://example.com/thanks/';
}, false );
</script>

⚠️ サンクスページへの転送は「非推奨」なのになぜ必要？

Contact Form 7の公式ドキュメントでは、完了画面へのリダイレクトは「ユーザー体験を損なうため非推奨」とされています。
標準機能である「送信ボタンの下に『ありがとうございます』と緑色のメッセージが出るだけ」のAjax通信が最も美しい挙動だと作者様は提唱しています。

👑 それでも現場で「リダイレクト」が必須な理由

しかし、実際のWeb制作やWebマーケティングの現場では、以下の理由から「完了画面（URLの変更）」がほぼ100%求められます。

  • コンバージョン（CV）計測： Googleアナリティクスや各種Web広告において、「/thanks/」というURLに到達したことをゴール（CV）として設定するのが最も確実で運用しやすいため。
  • コンバージョンタグの発火： 特定のページが開かれた時にだけ発火させたい外部の計測タグ（Yahoo広告など）を仕込むため。
  • クライアントの安心感： 画面が明確に切り替わらないと、「本当に送れたの？」と不安になり何度もボタンを押してしまうユーザーが一定数存在するため。
❌ 古いやり方（on_sent_ok）は使えません！
過去のブログ記事などを見ると、CF7の「その他の設定」タブに on_sent_ok: "location = '/thanks/';" と書く手法が紹介されていますが、この機能は2017年末に完全に廃止されています。
現在は、上記ツールで生成した wpcf7mailsent イベントを用いたDOMイベントリスナー（JavaScript）をテーマ内に記述するのが公式が案内している唯一の正解です。

🚀 おまけ：CF7の読込ファイルを「お問い合わせページ」だけにして軽量化する

Contact Form 7はデフォルト状態だと、フォームが存在しないページも含めた「サイト内の全ページ」で専用のJSとCSSを読み込んでしまいます。
これがPageSpeed Insights（表示速度）のスコア低下の原因になるため、実務では functions.php に以下のコードを追記して、お問い合わせページ（例：スラッグが contact のページ）でのみ読み込ませる軽量化処理を行います。 

<?php
function my_cf7_optimization() {
  // お問い合わせページ以外ではCF7のJS/CSSを読み込まない（デキューする）
  if ( ! is_page( 'contact' ) ) {
    wp_dequeue_script( 'contact-form-7' );
    wp_dequeue_style( 'contact-form-7' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_cf7_optimization', 20 );
?>