【Contact Form 7】フォームにclassを付与する方法

<form>にclassを付与する方法

ショートコードにhtml_classを追記することで付与できます。

例

エラー: コンタクトフォームが見つかりません。

出力結果

<form action="/form/#wpcf7-f72-o2" method="post" class="wpcf7-form init form form-test" novalidate="novalidate" data-status="init">

<input>、<textarea>等にclassを付与する方法

コンタクトフォーム編集画面にclass:を追記することで付与できます。

例

<label> 氏名
[text* your-name class:form-control] </label>
<label> メッセージ本文 (任意)
[textarea your-message class:form-control] </label>
[submit class:btn class:btn-primary "送信"]

出力結果

<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false" />
<textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea form-control" aria-invalid="false"></textarea>
<input type="submit" value="送信" class="wpcf7-form-control wpcf7-submit btn btn-primary" />