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

Contact Form 7 はホームページに簡単にお問い合わせフォームを設置できるWordPressプラグインです。
今回はCSSでレイアウトをカスタマイズする際など、どのようなHTMLが出力されるのか事前に知りたりとき用にコードをまとめてみました。

フォーム

テキスト

タグ

[text text-xxx]

HTML

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

メールアドレス

タグ

[email email-xxx]

HTML

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

URL

タグ

[url url-xxx]

HTML

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

電話番号

タグ

[tel tel-xxx]

HTML

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

数値（スピンボックス）

タグ

[number number-xxx]

HTML

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

数値（スライダー）

タグ

[range number-xxx]

HTML

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

日付

タグ

[date date-xxx]

HTML

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

テキストエリア

タグ

[textarea textarea-xxx]

HTML

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

ドロップダウンメニュー

タグ

[select menu-xxx "選択技1" "選択技2" "選択技3"]

HTML

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

チェックボックス

タグ

[checkbox checkbox-xxx "選択技1" "選択技2" "選択技3"]

HTML

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

オプション

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

ラジオボタン

タグ

[radio radio-xxx default:1 "選択技1" "選択技2" "選択技3"]

HTML

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

オプション

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

承諾確認

タグ

[acceptance acceptance-xxx] 同意する [/acceptance]

HTML

<span class="wpcf7-form-control-wrap acceptance-xxx">
    <span class="wpcf7-form-control wpcf7-acceptance">
        <span class="wpcf7-list-item">
            <label>
                <input type="checkbox" name="acceptance-xxx" value="1" aria-invalid="false">
                <span class="wpcf7-list-item-label">同意する</span>
            </label>
        </span>
    </span>
</span>

オプション

• このチェックボックスをデフォルトでチェックされた状態にする
• これの挙動を反対にする

クイズ

タグ

[quiz quiz-xxx "日本の首都は?|東京"]

HTML

<span class="wpcf7-form-control-wrap quiz-xxx">
    <label>
        <span class="wpcf7-quiz-label">ブラジルの首都は?</span> 
        <input type="text" name="quiz-xxx" size="40" class="wpcf7-form-control wpcf7-quiz" autocomplete="off" aria-required="true" aria-invalid="false">
    </label>
    <input type="hidden" name="_wpcf7_quiz_answer_quiz-xxx" value="2c30c33054b6c25e705681221f39dbf6">
</span>

reCAPTCHA

reCAPTCHA を使うには、まず API キーペアの設定が必要です。詳しくは [reCAPTCHA](https://contactform7.com/recaptcha/) を参照してください。

ファイル

タグ

[file file-xxx]

HTML

<span class="wpcf7-form-control-wrap file-xxx">
    <input type="file" name="file-xxx" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.ppt,.pptx,.odt,.avi,.ogg,.m4a,.mov,.mp3,.mp4,.mpg,.wav,.wmv" aria-invalid="false">
</span>

送信ボタン

タグ

[submit]

HTML

<input type="submit" value="送信" class="wpcf7-form-control wpcf7-submit">
<span class="ajax-loader"></span>