ダウンロード

マテリアルデザイン風 Contact Form 7

作者: Contact Form 7 Addons

説明

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自体でも、マテリアルデザインが採用されています。

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

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

あなたのワードプレスのウェブサイトに（もともとあるテーマを崩さずに）Material Design風 問い合わせフォームを追加する方法については、WordPress Material Design（英語）をご参照ください。

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

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

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

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

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

評価

Superior Customer Service

Theme was overriding the plug in. Derp! They added 2 lines of CSS and done. They found the problem in 2 seconds and had me up and running fast. Thanks Angus!
41件のレビューをすべて表示

貢献者と開発者

マテリアルデザイン風 Contact Form 7 はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“マテリアルデザイン風 Contact Form 7” は7ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“マテリアルデザイン風 Contact Form 7” をあなたの言語に翻訳しましょう。

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

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

変更履歴

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

メタ

評価

すべて表示

サポート

過去2ヶ月以内に解決した問題:

11 / 11

サポートフォーラムを表示

寄付

このプラグインが進歩するようにサポートしたいですか?

このプラグインに寄付