MANUAL
Contact Form 7 デザイン管理システムの使い方
このプラグインは、Contact Form 7で作成したお問い合わせフォームの見た目を、管理画面から簡単に変更できるプラグインです。
フォーム本文を大きく作り直さなくても、デザインタイプ・色・幅・角丸・ボタンなどを調整できます。
基本の流れ
Contact Form 7でフォームを作成
通常通り、Contact Form 7でお問い合わせフォームを作成します。
固定ページにショートコードを貼る
Contact Form 7で発行されたショートコードを、固定ページに貼り付けます。
デザイン設定を保存
「設定 → CF7デザイン設定」からデザインタイプや色を選び、保存します。
設定画面の場所
WordPress管理画面から、以下の場所を開きます。
デザインタイプ、フォーム最大幅、角丸、背景色、入力欄の色、ボタン色などを変更できます。
変更後は、各ブロック右下の「保存する」ボタンを押してください。
選べるデザインタイプ
シンプル
基本的で見やすい標準デザインです。
カード型
項目ごとにカードで区切る、分かりやすいデザインです。
やさしい角丸
丸みのある、やわらかい印象のデザインです。
スタイリッシュ
白背景と細い線を使った、すっきりしたデザインです。
士業・企業向け
信頼感を出しやすい、直線的なデザインです。
整体院・クリニック向け
淡い色と丸みを使った、やさしいデザインです。
フォーム本文の設定例
Contact Form 7のフォーム本文は、下記のような標準的な形がおすすめです。
必須項目は、[text* your-name] のように * を付けます。
フォーム設定例を開く
<label>お名前
[text* your-name akismet:author autocomplete:name]
</label>
<label>電話番号もしくは携帯番号
[tel* tel-476 placeholder "例:09012345678"]
</label>
<label>メールアドレス
[email* your-email akismet:author_email autocomplete:email]
</label>
<label>メールアドレス（確認）
[email* your-email_confirm autocomplete:email]
</label>
<label>郵便番号
[text* zip id:zip placeholder "住所自動入力 例:4260001"]
</label>
<label>都道府県
[text* pref id:pref]
</label>
<label>市区町村
[text* city id:city]
</label>
<label>番地～
[text* addr id:addr]
</label>
<label>建物名・部屋番号
[text addr2 id:addr2]
</label>
<label>ご相談希望日時、お問合せ内容
※箇条書きでも構いません。
[textarea* your-message]
</label>
<label>ご希望の返信方法
[radio radio-547 use_label_element default:1 "メールで返信して欲しい" "電話に掛けてきて欲しい"]
</label>
<label>海外からのいたずら防止の為のクイズ（ご理解下さい）
[quiz quiz-460 "「平成」の次は漢字2文字で|令和"]
</label>
[submit "送信する"]必須ラベルについて
Contact Form 7では、フォームタグに * を付けると必須項目になります。
このプラグインでは、必須項目を自動判定して、公開画面に赤い「必須」ラベルを表示します。
[text* your-name] は必須項目です。[text your-company] は任意項目です。
フォーム本文に手動で <span>必須</span> を追加する必要はありません。
Akismet用オプションについて
Akismetを使用している場合は、名前欄とメールアドレス欄に下記の指定を入れておくと、スパム判定の参考になります。
[text* your-name akismet:author autocomplete:name]
[email* your-email akismet:author_email autocomplete:email]
メールアドレス確認欄には、akismet:author_email は付けなくて大丈夫です。
固定ページにフォームを表示する方法
Contact Form 7でフォームを作成すると、ショートコードが表示されます。
そのショートコードを固定ページに貼り付けると、フォームが表示されます。
[contact-form-7 id="123" title="お問い合わせ"]このプラグインを有効化している場合、表示されたフォームに自動でデザインが適用されます。
よくある質問
Contact Form 7本体を変更する必要はありますか？
いいえ。Contact Form 7本体を変更する必要はありません。
既存のフォームにも使えますか？
はい。既存のContact Form 7フォームにも使用できます。古い装飾HTMLが多い場合は、フォーム本文をシンプルに整理するとより綺麗に表示されます。
必須ラベルが表示されません。
[text* your-name] のように、フォームタグに * が付いているか確認してください。
デザインが反映されません。
設定保存後、ブラウザキャッシュやWordPressキャッシュを削除して確認してください。
注意事項
このプラグインは、Contact Form 7のフォームデザインを整えるためのプラグインです。
メール送信設定、送信先、迷惑メール対策などは、Contact Form 7本体の設定を使用します。