Contact Form 7はWordPressのフォーム作成プラグインの中でも非常に高い人気を誇ります。
しかし、実際の案件ではmultiformやconfirm、displayといったサブプラグインとの連携が求められることが多く、
その際にはフィールド形式の違いを考慮して適切な変換を行う必要があります。
複雑なフォーム構成や入力確認画面の導入時にも、構造を意識した整備が欠かせません。
Contact Form 7の構文はシンプルで汎用的ですが、他プラグインで再利用するには一部の構文を変換する必要があります。
たとえば、[text* your-name]のような必須フィールドは、multiformプラグインでは[multiform "your-name"]の形式に変える必要があります。
このような変換は手作業だと非常に煩雑になるため、ツールでの自動変換が実務では重宝されます。
CF7では<label>や<div>などのHTMLタグとショートコードを混在させるケースが一般的です。
構文変換を行う際には、これらHTMLタグを保持したままフィールド部分だけを安全に変換する工夫が必要になります。
HTMLの構造を壊さずにショートコードを変換する処理は、品質維持の面でも極めて重要です。
confirmやdisplayといった拡張ショートコードは、確認画面や内容表示専用のケースで使われます。
これらのショートコードは、通常の入力フィールドとは別に処理されるため、[confirm your-email]や[display your-message]のように、
表示専用として適切に変換することで、ユーザーの入力内容を確認画面などでそのまま再利用できます。
多段階フォームや確認画面付きのフォームを構築するには、Contact Form 7単体では不十分なケースも多く、
multiformプラグインなどの導入が検討されます。
このとき、各入力フィールドの名前・構文・バリデーションの整合性を維持しながら変換を行うことが、安定したフォーム挙動を実現する鍵となります。
const input = document.getElementById('input');
ユーザーが入力するフィールド（テキストエリア）を取得します。
const pluginRadios = document.querySelectorAll('input[name="plugin"]');
どの変換形式（Multiform・Confirmなど）を使うか、ラジオボタンで選択できるようにしています。
function getSelectedPlugin() {
return document.querySelector('input[name="plugin"]:checked').value;
}
ラジオボタンの現在の選択値を取得する関数。変換処理時にどの形式で出力するかを判断します。
次に、実際の変換を行うconvertText関数の中身を見てみましょう。
const textWithPlaceholders = text.replace(/<[^>]*>/g, (match) => {
htmlTags[tagIndex] = match;
return `__HTML_TAG_${tagIndex++}__`;
});
フォームの中に<br>や<strong>などHTMLが含まれていても、変換対象から除外するためにプレースホルダーに置き換えています。
const fieldPattern = /\[(text\*?|email\*?|...|submit)\s+([^\]]+)\]/g;
この正規表現で、CF7 のフィールド（例：[text name]）をすべて拾い上げます。text*のような必須指定にも対応。
if (fieldType === 'submit') return match;
submitボタンは変換不要なため、スキップします。
const name = fieldName.split(/\s+/)[0].replace(/['"]/g, '');
フィールド名の抽出時には、オプション（placeholderなど）を排除して、最初の単語だけを拾っています。
convertedField = `[multiform "${name}"]`;
選択されたプラグインの形式に合わせて変換します（confirmやdisplayにも対応）。
return convertedText.replace(/__HTML_TAG_(\d+)__/g, ...);
最後に、一時的に退避させていたHTMLタグを元に戻します。
input.addEventListener('input', updateOutput);
入力内容が変更されたらリアルタイムで変換を実行。
pluginRadios.forEach(radio => {
radio.addEventListener('change', updateOutput);
});
プラグイン形式を切り替えたときも、すぐに出力を更新します。