WPホームページ研究所運営サポートチーム監修のオムスビ（@OMUSUVIcom）です。
Contact Form 7はフォーム属性に対するカスタマイズも柔軟な実装が可能となっています。本日はidやclassやplaceholderをフォーム要素へ追記する記述方法をまとめさせていただきました。ウェブサイト内に設置したお問い合わせフォームを細部までカスタムする場合はぜひご参照くださいませ。
目次
１. デフォルトのフォーム
[text* your-name]▼出力された状態のソース
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false">
２. idを差し込む記述法
[text* your-name id:Name01]▼出力された状態のソース
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="Name01" aria-required="true" aria-invalid="false">３. classを差し込む記述法
[text* your-name class:Name01]▼出力された状態のソース
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required Name01" aria-required="true" aria-invalid="false">４. 透かし文字（Placeholder）を差し込む記述法
[text* your-name placeholder "例）山田 太郎"]▼出力された状態のソース
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="例）山田 太郎">５. idとclassとPlaceholderを同時に差し込む記述法
[text* your-name id:Name01 class:Name01 placeholder "例）山田 太郎"]▼出力された状態のソース
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required Name01" id="Name01" aria-required="true" aria-invalid="false" placeholder="例）山田 太郎">６. classを複数個まとめて差し込む記述法
[text* your-name class:Name01 class:Name02 class:Name03]▼出力された状態のソース
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required Name01 Name02 Name03" aria-required="true" aria-invalid="false">７. idと複数個のclassとPlaceholderを差し込む記述法
[text* your-name id:Name01 class:Name01 class:Name02 class:Name03 placeholder "例）山田 太郎"]▼出力された状態のソース
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required Name01 Name02 Name03" id="Name01" aria-required="true" aria-invalid="false" placeholder="例）山田 太郎">８. 実例（divタグで括る設置）
<div class="form-group">
[text* your-name id:cfName class:form-control placeholder "例）山田 太郎"]
</div>▼出力された状態のソース
<div class="form-group">
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" id="cfName" aria-required="true" aria-invalid="false" placeholder="例）山田 太郎"></span>
</div>９. 番外（formへ差し込む時）
[contact-form-7 id="5" title="コンタクトフォーム 1" html_id="contactForm" html_class="form-horizontal"]▼出力された状態のソース
<form action="/#wpcf7-f5-o1" method="post" class="wpcf7-form form-horizontal" novalidate="novalidate" id="contactForm">
ソースは省略
</form>最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
