WordPress

  1. HOME
  2. WordPress
  3. MW WP Form フォームタグで出力されるHTMLまとめ

MW WP Form フォームタグで出力されるHTMLまとめ

WordPress

フォーム作成に便利なWordPressプラグインMW WP Form。
CSSでレイアウトをカスタマイズする際など、どのようなHTMLが出力されるのか事前に知りたりとき用にコードをまとめてみました。

入力項目

日付

タグ

[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>

Monthpicker

タグ

[mwform_monthpicker name="Monthpicker"]

HTML

<input type="text" name="Monthpicker" size="30" value="">

Number フィールド

タグ

[mwform_number name="Numberフィールド"]

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フィールド"]

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>

テキスト

タグ

[mwform_text name="テキスト"]

HTML

<input type="text" name="テキスト" size="60" value="">

テキストエリア

タグ

[mwform_textarea name="テキストエリア"]

HTML

<textarea name="テキストエリア" cols="50" rows="5"></textarea>

URL フィールド

タグ

[mwform_url name="URLフィールド"]

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>

選択項目

チェックボックス

タグ

[mwform_checkbox name="チェックボックス" children="選択肢1,選択肢2,選択肢3"]

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="{&quot;\u9078\u629e\u80a21&quot;:&quot;\u9078\u629e\u80a21&quot;,&quot;\u9078\u629e\u80a22&quot;:&quot;\u9078\u629e\u80a22&quot;,&quot;\u9078\u629e\u80a23&quot;:&quot;\u9078\u629e\u80a23&quot;}">

ラジオボタン

タグ

[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="{&quot;\u9078\u629e\u80a21&quot;:&quot;\u9078\u629e\u80a21&quot;,&quot;\u9078\u629e\u80a22&quot;:&quot;\u9078\u629e\u80a22&quot;,&quot;\u9078\u629e\u80a23&quot;:&quot;\u9078\u629e\u80a23&quot;}">

セレクトボックス

タグ

[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="{&quot;\u9078\u629e\u80a21&quot;:&quot;\u9078\u629e\u80a21&quot;,&quot;\u9078\u629e\u80a22&quot;:&quot;\u9078\u629e\u80a22&quot;,&quot;\u9078\u629e\u80a23&quot;:&quot;\u9078\u629e\u80a23&quot;}">

ボタン項目（button）

戻るボタン

※確認画面表示時に戻るボタンを出力します。

タグ

[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="戻る"]

HTML：確認画面

<input type="submit" name="submitBack" value="戻る">

ボタン

タグ

[mwform_button name="ボタン" value="ボタン"]

HTML

<input type="button" name="ボタン" value="ボタン">

確認ボタン

※入力画面表示時に確認ボタンを出力します。

タグ

[mwform_confirmButton value="確認ボタン"]

HTML：入力画面

<input type="submit" name="submitConfirm" value="確認ボタン">

確認・送信

※入力画面と確認画面で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>

エラーメッセージ

※バリデーションエラーを表示したい項目のname属性を指定。複数ある場合はカンマ区切りで値を指定。

タグ

[mwform_error keys="name"]

HTML

<span class="error">未入力です。</span>

その他の項目

カスタムメールタグ

フィルターフック mwform_custom_mail_tag_mw-wp-form-xxx で返される値を画面表示することができるショートコードです。

このショートコードを設置するだけでは何も動作しませんが、 mwform_custom_mail_tag_mw-wp-form-xxx と組み合わせることで画面表示に加え、メール送信・データベース保存が可能になります。入力された会員番号に紐づくデータを確認画面に表示してメール送信する、といったことが可能になります。

タグ

[mwform_custom_mail_tag name="カスタムメールタグ"]

HTML

<span class="mwform-custom-mail-tag-field">フックで返される文字列</span>

hiddenフィールド

タグ

[mwform_hidden name="hiddenフィールド "value=""]

HTML

<input type="hiddenフィールド" value="">

参考サイト

MW WP Form ショートコード

あなたにおすすめの記事