【MW WP Form】出力されるタグ構造早見表
MW WP FORM
WordPress
タグ
プラグイン
こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。
WordPressでお問い合わせフォームを構築する際、使用するプラグインの「MW WP Form」。
確認画面が標準機能として備わっていて便利なプラグインですね。
MW WP Formを使用してお問い合わせフォームを構築する場合、出力されるタグは決められています。
コーダーとプログラマーが別々の作業者の場合、予めコーダーさんへ出力されるタグ構造を伝えておく必要があります。
今回は各フィールドの出力タグを一覧にまとめてみました。
入力項目
日付ピッカー
ショートコード
[mwform_datepicker name="日付ピッカー"]HTML
<input type="text" name="日付ピッカー" size="30" value="">メール
ショートコード
[mwform_email name="メール"]
HTML
<input type="email" name="メール" size="60" value="" data-conv-half-alphanumeric="true">
ファイル
ショートコード
[mwform_file name="ファイル"]
HTML
<input type="file" name="ファイル">
<span data-mwform-file-delete="ファイル" class="mwform-file-delete">×</span>
画像
ショートコード
[mwform_image name="画像"]
HTML
<input type="file" name="画像">
<span data-mwform-file-delete="画像" class="mwform-file-delete">×</span>
年月ピッカー
ショートコード
[mwform_monthpicker name="年月ピッカー"]
HTML
<input type="text" name="年月ピッカー" size="30">
Numberフィールド
ショートコード
[mwform_number name="Numberフィールド" step="1"]
HTML
<input type="number" name="Numberフィールド" value="" step="1">
パスワード
ショートコード
[mwform_password name="パスワード"]
HTML
<input type="password" name="パスワード" size="60" value="">
Rangeフィールド
ショートコード
[mwform_range name="Rangeフィールド" min="0" max="100" step="1"]
HTML
<input type="range" name="Rangeフィールド" value="" min="0" max="100" step="1">
電話番号
ショートコード
[mwform_tel name="電話番号"]
HTML
<span class="mwform-tel-field">
<input type="text" name="電話番号[data][0]" size="6" maxlength="5" value="" data-conv-half-alphanumeric="true"> - <input type="text" name="電話番号[data][1]" size="5" maxlength="4" value="" data-conv-half-alphanumeric="true"> - <input type="text" name="電話番号[data][2]" size="5" maxlength="4" value="" data-conv-half-alphanumeric="true"><input type="hidden" name="電話番号[separator]" value="-">
</span>
<span class="mwform-tel-field"></span>で囲われます。
テキスト
ショートコード
[mwform_text name="テキスト" size="60"]
HTML
<input type="text" name="テキスト" size="60" value="">
テキストエリア
ショートコード
[mwform_textarea name="テキストエリア" cols="50" rows="5"]
HTML
<textarea name="テキストエリア" cols="50" rows="5"></textarea>
URLフィールド
ショートコード
[mwform_url name="URLフィールド" size="60"]
HTML
<input type="url" name="URLフィールド" size="60" value="" data-conv-half-alphanumeric="true">
郵便番号
ショートコード
[mwform_zip name="郵便番号"]
HTML
<span class="mwform-zip-field">〒<input type="text" name="郵便番号[data][0]" size="4" maxlength="3" value="" data-conv-half-alphanumeric="true"> - <input type="text" name="郵便番号[data][1]" size="5" maxlength="4" value="" data-conv-half-alphanumeric="true"><input type="hidden" name="郵便番号[separator]" value="-"></span>
<span class="mwform-zip-field"></span>で囲われます。
選択項目
チェックボックス
ショートコード
[mwform_checkbox name="チェックボックス" children="選択肢1,選択肢2,選択肢3" separator=","]
HTML
<span class="mwform-checkbox-field horizontal-item">
<label>
<input type="checkbox" name="チェックボックス[data][]" value="選択肢1">
<span class="mwform-checkbox-field-text">選択肢1</span>
</label>
</span>
<span class="mwform-checkbox-field horizontal-item">
<label>
<input type="checkbox" name="チェックボックス[data][]" value="選択肢2">
<span class="mwform-checkbox-field-text">選択肢2</span>
</label>
</span>
<span class="mwform-checkbox-field horizontal-item">
<label>
<input type="checkbox" name="チェックボックス[data][]" value="選択肢3">
<span class="mwform-checkbox-field-text">選択肢3</span>
</label>
</span>
<input type="hidden" name="チェックボックス[separator]" value=",">
<input type="hidden" name="__children[チェックボックス][]" value="{"\u9078\u629e\u80a21":"\u9078\u629e\u80a21","\u9078\u629e\u80a22":"\u9078\u629e\u80a22","\u9078\u629e\u80a23":"\u9078\u629e\u80a23"}">
上記の通りかなりチェックボックスは特殊なタグ構造になります。
コーダーさんには予め「この構造でコーディングしてください」と伝えておかないと二度手間になってしまいます。
ラジオボタン
ショートコード
[mwform_radio name="ラジオボタン" children="選択肢1,選択肢2,選択肢3"]
HTML
<span class="mwform-radio-field horizontal-item">
<label>
<input type="radio" name="ラジオボタン" value="選択肢1">
<span class="mwform-radio-field-text">選択肢1</span>
</label>
</span>
<span class="mwform-radio-field horizontal-item">
<label>
<input type="radio" name="ラジオボタン" value="選択肢2">
<span class="mwform-radio-field-text">選択肢2</span>
</label>
</span>
<span class="mwform-radio-field horizontal-item">
<label>
<input type="radio" name="ラジオボタン" value="選択肢3">
<span class="mwform-radio-field-text">選択肢3</span>
</label>
</span>
<input type="hidden" name="__children[ラジオボタン][]" value="{"\u9078\u629e\u80a21":"\u9078\u629e\u80a21","\u9078\u629e\u80a22":"\u9078\u629e\u80a22","\u9078\u629e\u80a23":"\u9078\u629e\u80a23"}">
チェックボックス同様ラジオボタンも特殊なタグ構造になります。
セレクトボックス
ショートコード
[mwform_select name="セレクトボックス" children="選択肢1,選択肢2,選択肢3"]
HTML
<select name="セレクトボックス">
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
</select>
<input type="hidden" name="__children[セレクトボックス][]" value="{"\u9078\u629e\u80a21":"\u9078\u629e\u80a21","\u9078\u629e\u80a22":"\u9078\u629e\u80a22","\u9078\u629e\u80a23":"\u9078\u629e\u80a23"}">
戻るボタン
ショートコード
[mwform_bback value="back"]戻る[/mwform_bback]
HTML
<button type="submit" name="submitBack" value="back">戻る</button>
※確認画面でのみ表示されます。
ボタン
ショートコード
[mwform_bbutton name="ボタン" value="button"]ボタン[/mwform_bbutton]
HTML
<button type="button" name="ボタン" value="button">ボタン</button>
確認ボタン
ショートコード
[mwform_bconfirm value="confirm"]確認画面へ[/mwform_bconfirm]
HTML
<button type="submit" name="submitConfirm" value="confirm">確認画面へ</button>
※入力画面のみで出力されます。
送信ボタン
ショートコード
[mwform_bsubmit name="送信ボタン" value="send"]送信する[/mwform_bsubmit]
HTML
<button type="submit" name="送信ボタン" value="send">送信する</button>
※確認画面のみで出力されます。
ボタン項目（input）
戻るボタン
ショートコード
[mwform_backButton value="戻る"]
ショートコード
<input type="submit" name="submitBack" value="戻る">
※確認画面でのみ表示されます。
ボタン
ショートコード
[mwform_button name="ボタン"]
HTML
<input type="button" name="ボタン" value="ボタン">
確認ボタン
ショートコード
[mwform_confirmButton value="確認ボタン"]
HTML
<input type="submit" name="submitConfirm" value="確認ボタン">
※確認画面でのみ表示されます。
確認・送信
ショートコード
[mwform_submitButton name="確認・送信" confirm_value="確認画面へ" submit_value="送信する"]
HTML：入力画面
<input type="submit" name="submitConfirm" value="確認画面へ">
HTML：確認画面
<input type="submit" name="確認・送信" value="送信する">
※入力画面と確認画面で出力されるタグが異なります。
送信ボタン
ショートコード
[mwform_submit name="送信ボタン" value="送信する"]
HTML
<input type="submit" name="送信ボタン" value="送信する">
※確認画面でのみ表示されます。
エラー項目
Akismetエラー
ショートコード
[mwform_akismet_error]
HTML
<span class="error">Akismetエラー</span>
エラーメッセージ
ショートコード
[mwform_error keys="エラー表示したいフィールドのname属性"]
HTML
<span class="error">未入力です。</span>
※バリデーションエラーを表示したい項目のname属性を指定します。複数ある場合はカンマ区切りで値を指定します。
その他の項目
カスタムメールタグ
ショートコード
[mwform_custom_mail_tag name="カスタムメールタグ"]
HTML
<span class="mwform-custom-mail-tag-field">フックで返される文字列</span>
ショートコード
[mwform_hidden name="hiddenフィールド"]
HTML
<input type="hiddenフィールド" value="">
まとめ
以上、「MW WP Form」が出力する各フィールドのタグ構造を見てきました。特に気にしなくても良いフィールドから、事前に共有しておかないとプラグイン導入後、CSSの調整が必要になってしまいそうなフィールドまで様々ありました。
なるべく作業効率を上げるためにもこのような点は事前に作業者同士で共有したいですね。そのためのツールとしてこのページをご活用いただけると嬉しいです。
