説明
Cotact Form 7にGoogle推奨 の「マテリアルデザイン」風デザインを追加することで、レスポンシブでインタラクティブなデザインに生まれ変わります。
Contact Form 7 に新しいスタイルを
このプラグインは、すでにインストールされたContact Form 7のタグにショートコードを追加し、マテリアルデザイン風のテーマを上書きさせることができます。
Contact Form 7にマテリアルデザインを
ライブデモビデオで、本プラグインで作成できる問い合わせフォームのデザインプレビューと詳しい操作方法をご確認ください。
V2では何が新しくなりましたか?
- 新しいマテリアルデザインを採用しています。テキスト入力および選択フィールドは、アウトライン化されたボック型デザインです。テキスト入力欄に内部ラベルが追加されました。詳細は以下のスクリーンショットで確認できます。
- ボタンデザインの多様化。エレベート(標準)、非エレベート、アウトライン。
- IE11、iOS8 +、他モダンブラウザにも対応。
- カスタム CSS の構文強調表示が可能。
- 旧マテリアルデザインの使用も可能。
Contat Form 7をよりインタラクティブなデザインにしましょう
あなたの問い合わせフォームを、ユーザーがより直感的に使用できるようなデザインにします。フィールドのラベルはプレースホルダーとして組み込まれ、テキストフィールドを選択されたときにフローティングされます。チェックボックスとラジオボタンには、クリックする動くアニメーションを施しています。送信ボタンには、マテリアルデザインの「リップル」エフェクトを組み込んでいます。その他にもいろいろな仕掛けがありますよ!
現在のバージョンでのサポート内容:
- ライトテーマまたはダークテーマ
- テキスト入力欄(テキスト、Eメール、URL、電話番号、日付など)(ボックス型デザインもしくはアウトライン型デザイン)
- テキストエリアは自動でサイズ変更が可能です
- ドロップダウンメニューの選択(ボックス型デザインもしくはアウトライン型デザイン)
- チェックボックス
- ラジオボタン
- 承諾確認チェックボックス
- ファイルのアップロード
- 送信ボタン (スピナーの読み込みを含む)
- クイズ
- ReCaptcha認証
- その他 設定(認証・成功メッセージなど)
PRO版:
- 色とフォントをカスタマイズする
- 入力欄をカラム型に配置する
- ラジオボタンとチェックボックスからスイッチに変更
- テキストアイコンと選択フィールドを追加
- カードで入力欄をセクションにグループ化
- Eメールでのサポート
あなたのワードプレスサイトを閉じることなく、いつでもPRO版にアップグレードが可能です。
他のプラグインとも問題なく動作します:
- Contact Form 7 ライブプレビュー
- ワードプレス用Mailchimp
- Contact Form 7 向け条件付き入力欄
- Contact Form 7 マルチステップ型問合せフォーム
- ワードプレスページでのreCaptcha認証を非表示(Contact Form 7ページでのみreCaptcha認証を表示)
- Contact Form 7での複数のファイルアップロード(標準)
問い合わせフォーム(レスポンシブデザイン)
「 マテリアルデザイン風 Contact Form 7」はレスポンシブデザインに対応しています。様々な画面サイズに合わせてデザインを自動調整します。
問い合わせフォームのスタイル
「 マテリアルデザイン風 Contact Form 7」では、マテリアルデザインで推奨されている配色とフォントが問い合わせフォームに適用されますが、PRO版ではフォントや色を好みに合わせて変更できます。
スクリーンショット
インストール
- zipファイルを
/wp-content/plugins/
ディレクトリにアップロードし、解凍 - ワードプレスの「プラグイン」メニューから本プラグインを有効化してください
または、「プラグイン」 > 「新しく追加」をクリック、「material design for contact form 7」を検索し、WordPress のダッシュボードにインストールしてください。
FAQ
- マテリアルデザインとは?
-
マテリアルデザインとは、Google によって制定された、ウェブサイトやアプリの表示・動作の仕方を定めたガイドラインです。Googleのほとんどのアプリ、例えばAndroid IOS自体でも、マテリアルデザインが採用されています。
- マテリアルデザインのテーマもダウンロードが必要ですか?
-
いいえ!マテリアルデザインの良いところは、このスタイルを好きなエリアにだけ組み込める点にあります。要するに、マテリアルデザインを問い合わせフォームにのみ採用し、他のウェブサイトには変更を加えないということも可能なのです。
あなたのワードプレスのウェブサイトに(もともとあるテーマを崩さずに)Material Design風 問い合わせフォームを追加する方法については、WordPress Material Design(英語)をご参照ください。
- どのようにこのプラグインを使用するのですか?
-
すべてのドキュメントは、「コンタクトフォーム」の「ヘルプ」 (画面右上) 内、「Material Design」にすべての掲載されています。
詳細なチュートリアルは、How to apply Material Design to Contact Form 7(英語)をご参照ください。
- デザインがおかしな風に見えてしまいます!
-
一部のテーマがサイト全体をマテリアルデザイン風に上書きする場合があります。このような問題が発生した場合、あなたの問い合わせフォームのURLをサポートフォーラム に投稿してください。担当者が修正します。
評価
Great Plugin
Amazing!!!
Excellent support, plugin works great
Superior Customer Service
Good Plugin, Awesome Customer Care!
Perfect and beautifull design. Great support
貢献者と開発者
マテリアルデザイン風 Contact Form 7 はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。
貢献者変更履歴
2.3.2
- Added translations! Russian, Japanese, French, German and Spanish
2.3.1
- Update to allow translation of shortcode generator
2.3.0
- Made plugin translateable
2.2.2
- Allow
default:get
on select fields
2.2.1
- Fixed outlined fields autofill issue
- Update docs to work in latest cf7
2.2.0
- Changed outlined fields to no longer use svg
- Added icons as a pro feature
2.1.6
- Added a datepicker polyfill
2.1.5
- Some CSS fixes for iOS date fields and labels
2.1.4
- Fix columns on tight-spaced forms
2.1.3
- Fix a PHP compatibility error
2.1.2
- Fix an old bug in pre CF7v5 acceptance fields
2.1.1
- Fix a bug in the upgrade from v1 process
2.1.0
- Integrate with Multifile Upload Field for Contact Form 7
2.0.0
- MAJOR UPDATE
- Entirely new Material Design library
- Text and select fields now come in boxed or outlined variants
- ボタンデザインの多様化。エレベート(標準)、非エレベート、アウトライン。
- Textareas have an inner label
- Better browser support
- Custom CSS syntax highlighting
1.8.1
- Fix a few bugs and an error that occured on older PHP versions
1.8.0
- MAJOR NEW FEATURE: Shortcode Generator UI. No more manual shortcode creation and constantly referring to the documentation.
- Slightly darkened the default label colour and input border
1.7.7
- Fix an issue created by the 1.7.6 on some systems
1.7.6
- Update the acceptance shortcodes to work with the latest CF7 update
1.7.5
- Fixed a PHP warning when no custom styles had been set
- GDPR compliance
1.7.4
- Fixed a bug where you needed to toggle “Use custom styles” off and on again before it actually worked
1.7.3
- Fixed a checkout issue
1.7.2
- Behind-the-scenes updates
1.7.1
- Fixed a JavaScript error in last release
1.7.0
- Add customization option for button colours
- Allow organising checkboxes and radios into columns
- Fix “Changes you made may not have been saved” message on unedited forms
- Allow hiding admin customize message on front end
- Fix close button on ad for premium version
- Update Freemius API
- Better default styles for text field labels
1.6.2
- Add a fix for themes that turn the submit input into a button
1.6.1
- Added integration with Contact Form 7 Live Preview plugin
1.6.0
- Added more customization options
- Updated Freemius SDK
- Added a shortcode to ensure layout attributes work when deeply nested
- Fix a Firefox bug with select options on dark theme
- Added some CSS to make themes less likely to override styles
1.5.18
- Freemius SDK update, fixes a bug with staging/deployment
- Added an affiliate program – earn money by promoting the plugin
1.5.17
- Fix a bug with file inputs inside conditional field groups
1.5.16
- Fix a bug with Safari and multi-column layouts
1.5.15
- Added customize link to front end forms
1.5.14
- Allow integration with other plugins
- Updated documentation
1.5.13
- Update Freemius SDK
1.5.12
- Fix a bug with required select fields
1.5.11
- Fix a bug with text field default values
1.5.10
- Fix a bug with quiz field
- Dequeue Roboto if not needed
1.5.9
- Fix a couple of IE Edge bugs
1.5.8
- Fix acceptance field bug
1.5.7
- Fix iOS datepicker bug
- Fix a CSS conflict with a WooThemes theme
1.5.6
- Improve file upload styles
1.5.5
- Update min-height of autosizing textareas
1.5.4
- Feature: auto-resizing textareas
- Better escaping of attributes and html
- Better customization for file input
- More consistent checkbox alignment with long and short labels
1.5.3
- Make [md-text] shortcode work with html5 datepicker
1.5.2
- Fix a negative margin issue with CSS grid
1.5.1
- Minor behind the scenes updates
1.5.0
- [Premium version] allow turning checkboxes and radios into switches
- Update to fix vertical spacing with CSS grid
1.4.0
- Added file upload field
1.3.3
- Added spacing options
- Added support for quiz and recaptcha
1.3.2
- Improved docs
1.3.1
- Minor bug fixes
- Ensure CF7 plugin is active
1.3.0
- Added plugin sub-menu page
- Add pro version info
1.2.0
- Under the hood updates
1.1.0
- Refactored CSS to be more specific
- Added dark theme option
1.0.0
- First release