【Contact Form 7】出力されるHTMLタグ構造のまとめ

RELEASE / 2024.1.13 UPDATE / 2024.01.13

Contact Form 7

HTMLタグ

WordPress

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

WordPressでお問い合わせフォームを作成する際に使用する人気プラグインの「Contact Form 7」。
このプラグインに限らず、プラグインで生成するフィールは予めHTMLのタグ構造が決められています。
そのためプラグインが出力するHTMLタグ構造に合わせてコーディングする必要があります。
今回の記事では「Contact Form 7」でフォームフィールドを生成した際に出力されるHTMLタグ構造をまとめてみました。

この記事の目次を表示

1 出力されるHTMLタグ構造のまとめ
2 まとめ

出力されるHTMLタグ構造のまとめ

「Contact Form 7」でフォームフィールドを生成する項目は以下のものが存在しています。

テキスト
メールアドレス
URL
電話番号
数値
日付
テキストエリア
ドロップダウンメニュー
チェックボックス
ラジオボタン
承認確認
クイズ
ファイル
送信ボタン

それぞれ実際に出力されるHTMLタグの構造は異なっています。
それでは実際に使用すると出力されるHTMLタグの構造を以下にまとめてみました。

テキスト

「テキスト」は以下のようなコードが生成されます。

[text field-text]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-text">
    <input size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" value="" type="text" name="field-text" />
</span>

メールアドレス

「メールアドレス」は以下のようなコードが生成されます。

[email field-mail]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-mail">
    <input size="40" class="wpcf7-form-control wpcf7-email wpcf7-text wpcf7-validates-as-email" aria-invalid="false" value="" type="email" name="field-mail" />
</span>

URL

「URL」は以下のようなコードが生成されます。

[url field-url]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-url">
    <input size="40" class="wpcf7-form-control wpcf7-url wpcf7-text wpcf7-validates-as-url" aria-invalid="false" value="" type="url" name="field-url" />
</span>

電話番号

「電話番号」は以下のようなコードが生成されます。

[tel field-tel]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-tel">
    <input size="40" class="wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel" aria-invalid="false" value="" type="tel" name="field-tel" />
</span>

数値

「数値」は項目タイプが「スピンボックス」と「スライダー」の2種類あります。

スピンボックス

「数値：スピンボックス」は以下のようなコードが生成されます。

[number field-number]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-number">
    <input class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number" aria-invalid="false" value="" type="number" name="field-number" />
</span>

スライダー

「数値：スライダー」は以下のようなコードが生成されます。

[range field-number]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-number">
    <input class="wpcf7-form-control wpcf7-range wpcf7-validates-as-number" min="0" max="100" aria-invalid="false" value="50" type="range" name="field-number" />
</span>

日付

「日付」は以下のようなコードが生成されます。

[date field-day]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-day">
    <input class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" aria-invalid="false" value="" type="date" name="field-day" />
</span>

テキストエリア

「テキストエリア」は以下のようなコードが生成されます。

[textarea field-textarea]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-textarea">
    <textarea cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" name="field-textarea"></textarea>
</span>

ドロップダウンメニュー

「ドロップダウンメニュー」は以下のようなコードが生成されます。

[select field-select "選択肢1" "選択肢2" "選択肢3"]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-select">
    <select class="wpcf7-form-control wpcf7-select" aria-invalid="false" name="field-select">
        <option value="選択肢1">選択肢1</option>
        <option value="選択肢2">選択肢2</option>
        <option value="選択肢3">選択肢3</option>
    </select>
</span>

「空の項目を先頭に挿入する」にチェックを入れた場合

「空の項目を先頭に挿入する」にチェックを入れた場合、以下のようなコードが生成されます。

[select field-select include_blank "選択肢1" "選択肢2" "選択肢3"]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-select">
    <select class="wpcf7-form-control wpcf7-select" aria-invalid="false" name="field-select">
        <option value="">&#8212;以下から選択してください&#8212;</option>
        <option value="選択肢1">選択肢1</option>
        <option value="選択肢2">選択肢2</option>
        <option value="選択肢3">選択肢3</option>
    </select>
</span>

チェックボックス

「チェックボックス」は以下の設定が可能です。

ラベルを前に、チェックボックスを後に配置する
個々の項目をlabel要素で囲む
チェックボックスを排他化する

チェックを入れない場合、それぞれチェックを入れた場合に分けて見ていきましょう。

チェックを入れない場合

どの項目もチェックを入れない場合、以下のようなコードが生成されます。

[checkbox field-checkbox "選択肢1" "選択肢2" "選択肢3"]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-checkbox">
    <span class="wpcf7-form-control wpcf7-checkbox">
        <span class="wpcf7-list-item first">
            <input type="checkbox" name="field-checkbox[]" value="選択肢1" />
            <span class="wpcf7-list-item-label">選択肢1</span>
        </span>
        <span class="wpcf7-list-item">
            <input type="checkbox" name="field-checkbox[]" value="選択肢2" />
            <span class="wpcf7-list-item-label">選択肢2</span>
        </span>
        <span class="wpcf7-list-item last">
            <input type="checkbox" name="field-checkbox[]" value="選択肢3" />
            <span class="wpcf7-list-item-label">選択肢3</span>
        </span>
    </span>
</span>

「ラベルを前に、チェックボックスを後に配置する」にチェックを入れた場合

「ラベルを前に、チェックボックスを後に配置する」にチェックを入れた場合、以下のようなコードが生成されます。

[checkbox field-checkbox label_first "選択肢1" "選択肢2" "選択肢3"]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-checkbox">
    <span class="wpcf7-form-control wpcf7-checkbox">
        <span class="wpcf7-list-item first">
            <span class="wpcf7-list-item-label">選択肢1</span>
            <input type="checkbox" name="field-checkbox[]" value="選択肢1" />
        </span>
        <span class="wpcf7-list-item">
            <span class="wpcf7-list-item-label">選択肢2</span>
            <input type="checkbox" name="field-checkbox[]" value="選択肢2" />
        </span>
        <span class="wpcf7-list-item last">
            <span class="wpcf7-list-item-label">選択肢3</span>
            <input type="checkbox" name="field-checkbox[]" value="選択肢3" />
        </span>
    </span>
</span>

「個々の項目を label 要素で囲む」にチェックを入れた場合

「個々の項目を label 要素で囲む」にチェックを入れた場合、以下のようなコードが生成されます。

[checkbox field-checkbox use_label_element "選択肢1" "選択肢2" "選択肢3"]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-checkbox">
    <span class="wpcf7-form-control wpcf7-checkbox">
        <span class="wpcf7-list-item first">
            <label>
                <input type="checkbox" name="field-checkbox[]" value="選択肢1" />
                <span class="wpcf7-list-item-label">選択肢1</span>
            </label>
        </span>
        <span class="wpcf7-list-item">
            <label>
                <input type="checkbox" name="field-checkbox[]" value="選択肢2" />
                <span class="wpcf7-list-item-label">選択肢2</span>
            </label>
        </span>
        <span class="wpcf7-list-item last">
            <label>
                <input type="checkbox" name="field-checkbox[]" value="選択肢3" />
                <span class="wpcf7-list-item-label">選択肢3</span>
            </label>
        </span>
    </span>
</span>

「チェックボックスを排他化する」にチェックを入れた場合

「チェックボックスを排他化する」にチェックを入れた場合、以下のようなコードが生成されます。

[checkbox field-checkbox exclusive "選択肢1" "選択肢2" "選択肢3"]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-checkbox">
    <span class="wpcf7-form-control wpcf7-checkbox wpcf7-exclusive-checkbox">
        <span class="wpcf7-list-item first">
            <input type="checkbox" name="field-checkbox" value="選択肢1" />
            <span class="wpcf7-list-item-label">選択肢1</span>
        </span>
        <span class="wpcf7-list-item">
            <input type="checkbox" name="field-checkbox" value="選択肢2" />
            <span class="wpcf7-list-item-label">選択肢2</span>
        </span>
        <span class="wpcf7-list-item last">
            <input type="checkbox" name="field-checkbox" value="選択肢3" />
            <span class="wpcf7-list-item-label">選択肢3</span>
        </span>
    </span>
</span>

ラジオボタン

「ラジオボタン」は以下の設定が可能です。

ラベルを前に、チェックボックスを後に配置する
個々の項目をlabel要素で囲む

チェックを入れない場合、それぞれチェックを入れた場合に分けて見ていきましょう。

チェックを入れない場合

どの項目もチェックを入れない場合、以下のようなコードが生成されます。

[radio field-radio default:1 "選択肢1" "選択肢2" "選択肢3"]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-radio">
    <span class="wpcf7-form-control wpcf7-radio">
        <span class="wpcf7-list-item first">
            <input type="radio" name="field-radio" value="選択肢1" checked="checked" />
            <span class="wpcf7-list-item-label">選択肢1</span>
        </span>
        <span class="wpcf7-list-item">
            <input type="radio" name="field-radio" value="選択肢2" />
            <span class="wpcf7-list-item-label">選択肢2</span>
        </span>
        <span class="wpcf7-list-item last">
            <input type="radio" name="field-radio" value="選択肢3" />
            <span class="wpcf7-list-item-label">選択肢3</span>
        </span>
    </span>
</span>

「ラベルを前に、チェックボックスを後に配置する」にチェックを入れた場合

「ラベルを前に、チェックボックスを後に配置する」にチェックを入れた場合、以下のようなコードが生成されます。

[radio field-radio label_first default:1 "選択肢1" "選択肢2" "選択肢3"]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-radio">
    <span class="wpcf7-form-control wpcf7-radio">
        <span class="wpcf7-list-item first">
            <span class="wpcf7-list-item-label">選択肢1</span>
            <input type="radio" name="field-radio" value="選択肢1" checked="checked" />
        </span>
        <span class="wpcf7-list-item">
            <span class="wpcf7-list-item-label">選択肢2</span>
            <input type="radio" name="field-radio" value="選択肢2" />
        </span>
        <span class="wpcf7-list-item last">
            <span class="wpcf7-list-item-label">選択肢3</span>
            <input type="radio" name="field-radio" value="選択肢3" />
        </span>
    </span>
</span>

「個々の項目を label 要素で囲む」にチェックを入れた場合

「個々の項目を label 要素で囲む」にチェックを入れた場合、以下のようなコードが生成されます。

[radio field-radio use_label_element default:1 "選択肢1" "選択肢2" "選択肢3"]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-radio">
    <span class="wpcf7-form-control wpcf7-radio">
        <span class="wpcf7-list-item first">
            <label>
                <input type="radio" name="field-radio" value="選択肢1" checked="checked" />
                <span class="wpcf7-list-item-label">選択肢1</span>
            </label>
        </span>
        <span class="wpcf7-list-item">
            <label>
                <input type="radio" name="field-radio" value="選択肢2" />
                <span class="wpcf7-list-item-label">選択肢2</span>
            </label>
        </span>
        <span class="wpcf7-list-item last">
            <label>
                <input type="radio" name="field-radio" value="選択肢3" />
                <span class="wpcf7-list-item-label">選択肢3</span>
            </label>
        </span>
    </span>
</span>

承認確認

「承認確認」は以下のようなコードが生成されます。

[acceptance field-confirmation optional] 承認確認 [/acceptance]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-confirmation">
    <span class="wpcf7-form-control wpcf7-acceptance optional">
        <span class="wpcf7-list-item">
            <label>
                <input type="checkbox" name="field-confirmation" value="1" aria-invalid="false" />
                <span class="wpcf7-list-item-label">承認確認</span>
            </label>
        </span>
    </span>
</span>

クイズ

「クイズ」は以下のようなコードが生成されます。

[quiz field-quiz "クイズ1|回答1" "クイズ2|回答2" "クイズ3|回答3"]

ブラウザでは以下のHTMLタグが出力されます。
作成したクイズの中からランダムで一つ表示されます。

<span class="wpcf7-form-control-wrap" data-name="field-quiz">
    <label>
        <span class="wpcf7-quiz-label">クイズ1</span>
        <input size="40" class="wpcf7-form-control wpcf7-quiz" autocomplete="off" aria-required="true" aria-invalid="false" type="text" name="field-quiz" />
    </label>
    <input type="hidden" name="_wpcf7_quiz_answer_field-quiz" value="b4bbd1959c41b3efbd3177e7c11035e0" />
</span>

ファイル

「ファイル」は以下のようなコードが生成されます。

[file field-file]

ブラウザでは以下のHTMLタグが出力されます。

<span class="wpcf7-form-control-wrap" data-name="field-file">
    <input size="40" class="wpcf7-form-control wpcf7-file" accept="audio/*,video/*,image/*" aria-invalid="false" type="file" name="field-file" />
</span>

送信ボタン

「送信ボタン」は以下のようなコードが生成されます。

[submit "送信する"]

ブラウザでは以下のHTMLタグが出力されます。

<input class="wpcf7-form-control wpcf7-submit has-spinner" type="submit" value="送信する" />

まとめ

いかがでしたでか？
「Contact Form 7」を使用した際に出力される各フィールドのHTMLタグ構造は単純なものもあれば、知らなければ二度手間になってしまうような構造のものまで様々ですね。
予め使用するプラグインが決まっているのであれば、これらのHTMLタグ構造をコーダーに共有しておきたいですね。