【WordPress】Contact Form 7のフォームにマテリアルデザインテーマを追加するMaterial Design for Contact Form 7

WordPress

January 22, 2018

Material Design for Contact Form 7
Material Design for Contact Form 7はContact Form 7にGoogleのマテリアルデザインテーマを追加することで、フォームをアプリのように見せることができるプラグイン。

Material Design for Contact Form 7プラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> Material Design for Contact Form 7を検索
有効化にし、Contact Form 7を有効化にします。
Material Design for Contact Form 7
コンタクトフォームを追加します。フォームにマテリアルデザインを追加する場合は[md-form]でフォーム全体をラップします。
テーマを変更する場合はthemeを追加します。
Example:[md-form theme="dark"]
フィールド間の垂直方向のスペースを小さくする場合はspacingを追加します。
Example:[md-form spacing="tight"]

Material Design for Contact Form 7
その他詳しくは画面右上のヘルプから確認もできます。
※ラップとは[md-submit][submit "Send"][/md-submit]のようにタグで閉じることになります。終了タグは開始タグと同じですが/が追加されます。

[md-form] フォーム全体をラップします。
[md-raw] 任意の要素をラップ
[md-text] テキスト、電子メール、URL、電話番号、日付と日付のフォームタグをラップ
[md-textarea] テキストエリアのフォームタグをラップ
[md-select] ドロップダウンメニューのフォームタグをラップ
[md-checkbox] チェックボックスのフォームタグをラップ
[md-radio] ラジオフォームタグをラップ
[md-accept] 同意タグをラップ
[md-file] ファイルアップロードタグをラップ
[md-quiz] クイズフォームタグをラップ
[md-captcha] キャプチャフォームタグをラップ
[md-submit] 送信ボタンのフォームタグをラップ

Material Design for Contact Form 7

Latest Posts

Related Posts