Material Design for Contact Form 7

説明

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版ではフォントや色を好みに合わせて変更できます。

スクリーンショット

  • シンプルなフォーム
  • アウトラインデザインのシンプルなフォーム
  • フォームフィールドとカスタムカラーのバリエーション増 (PRO版)
  • ダークテーマのサンプル
  • ショートコード生成が可能
  • ショートコード生成が可能

インストール

  1. zipファイルを/wp-content/plugins/ディレクトリにアップロードし、解凍
  2. ワードプレスの「プラグイン」メニューから本プラグインを有効化してください

または、「プラグイン」 > 「新しく追加」をクリック、「material design for contact form 7」を検索し、WordPress のダッシュボードにインストールしてください。

FAQ

マテリアルデザインとは?

マテリアルデザインとは、Google によって制定された、ウェブサイトやアプリの表示・動作の仕方を定めたガイドラインです。Googleのほとんどのアプリ、例えばAndroid IOS自体でも、マテリアルデザインが採用されています。

マテリアルデザインのテーマもダウンロードが必要ですか?

いいえ!マテリアルデザインの良いところは、このスタイルを好きなエリアにだけ組み込める点にあります。要するに、マテリアルデザインを問い合わせフォームにのみ採用し、他のウェブサイトには変更を加えないということも可能なのです。

For more ways to add Material Design to your WordPress site (without changing your theme), see WordPress Material Design.

どのようにこのプラグインを使用するのですか?

すべてのドキュメントは、「コンタクトフォーム」の「ヘルプ」 (画面右上) 内、「Material Design」にすべての掲載されています。

詳細なチュートリアルは、How to apply Material Design to Contact Form 7(英語)をご参照ください。

デザインがおかしな風に見えてしまいます!

一部のテーマがサイト全体をマテリアルデザイン風に上書きする場合があります。このような問題が発生した場合、あなたの問い合わせフォームのURLをサポートフォーラム に投稿してください。担当者が修正します。

The labels are tiny

Some themes have CSS that makes the labels really small. You can fix this in the customizer (Appearance > Customize > Material Design Forms) by setting the option to force default font sizes.

評価

2021年7月30日
Pas facile à prendre en main et il faut un minimum de compétence HTML/CSS (en version gratuite) pour faire des choses sympas. Autant rester sur Contact Form 7 de base !
2021年6月10日
I don't think this plugin is particularly useful in the free version. It only seems to display in Blue and gives this message in customiser once you've wasted your installing it and setting up a form. Use custom styles? Note: you're on the free version. Your style changes will not take effect until you upgrade to pro So from this message and the fact the colours do not change on the front end, I deduce that this plugin is not worth having unless yo choose the paid version. Even then, I didn't rate its styling at all. The Standard CF7 looks better. Sorry!
2021年2月12日
Angus went beyond the call of duty. The level of support was superb. Got the forms working precisely to our needs. Friendly and professionally accomplished. Many thanks!
2020年12月28日
I love it. I was a bit reluctant to use it, but after installing it, got the way the shortcodes need to be implemented, and it is pretty straightforward. I just used the basics, and it works cool right out of the box.
2020年12月27日
Just purchased the PRO version and it is a really good one. Instead to spend lots of time coding to implement material forms, I nade it in minutes. If you deal with forms to collect leads, this plugin is a must have.
68件のレビューをすべて表示

貢献者と開発者

Material Design for Contact Form 7 はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“Material Design for Contact Form 7” は11ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“Material Design for Contact Form 7” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

2.6.4

  • Update deprecated jQuery APIs

2.6.3

  • Update Freemius SDK
  • Update success message styles for latest CF7

2.6.2

  • Update Freemius SDK

2.6.1

  • Fix layout classes bug on mobile devices
  • Fix bug that removed admin notices from the form editor

2.6.0

  • Update Freemius SDK
  • Re-initialise outlined fields when shown in a conditional groups
  • Fix a bug with select fields without include_blank in Firefox
  • Remove the legacy styles option entirely for new users
  • Added a customizer option to force-fix font sizing
  • Minor CSS theme compatibility improvements

2.5.5

  • Add styling for cf7 [response] form tag inside [md-form]
  • Add “secondary” button style

2.5.4

  • Update Freemius SDK
  • Fix for Safari datepickers sometimes being hidden behind other elements
  • Fix one of the nags which kept appearing after being closed

2.5.3

  • Adds CSS to remove duplicate dropdown arrows from select fields on some themes
  • Adds a fast option to download the latest pro version for existing license holders

2.5.2

  • Fixes a bug with include_blank in select fields

2.5.1

  • Updates to comply with the “Contact Form 7” trademark policy

2.5.0

  • Allow exclusive checkboxes to be turned into switches
  • Fields now show invalid state after invalid form submission
  • A fix for avada theme selects

2.4.2

  • Fixed a bug with polyfilled dates in Safari

2.4.1

  • Fixed an upgrade bug
  • Added some CSS to combat some themes overriding our styles
  • Fixed terminology for switches

2.4.0

  • Exposed a JavaScript function to manually initialize the plugin scripts (for use on dynamically loaded forms).

2.3.5

  • Improve file field display
  • Activated max-width fix from 2.3.4

2.3.4

  • Added info about affiliate program in dashboard
  • Added a fix for some themes that set label’s max-width to 100%
  • Security improvements

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