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>