Material Design for Contact Form 7

Описание

Контактные формы в Contact Form 7 могут стать такими интерактивными, как в мобильном приложении. Стоит только добавить тему Google «Материальный дизайн».

Стиль Contact Form 7

Наш плагин предоставляет набор шорткодов, которые ставятся вокруг тегов форм CF7 и применяют к ним тему материального дизайна.

Материальный дизайн для Contact Form 7 в действии

Уделите 30 секунд своего времени и посмотрите как могли бы выглядеть Ваши контактные формы. Посмотрите видео ниже и/или попробуйте интерактивную демоверсию.

Что нового в версии 2.0?

  • Используется новый материальный дизайн. Текстовые поля и выпадающие списки теперь доступны в подчеркнутом (boxed) и обведенном (outlined) вариантах. Текстовые поля теперь имеют внутренний шаблон. Посмотрите скриншоты ниже.
  • Новые типы кнопок. Приподнятая (elevated — по умолчанию), неприподнятая (unelevated) и обведенная (outlined).
  • Улучшенная поддержка браузеров. IE11, iOS8+ и все современные браузеры.
  • Для пользовательского CSS теперь доступно выделение синтаксиса
  • Вы можете продолжить использование оригинальных стилей, если хотите.

Формы Contact Form 7 могут стать более интерактивными

Сделайте так, чтобы поля Ваших форм реагировали на действия пользователей более интуитивно. Внутренний текст полей в начале представляет собой плейсхолдер и исчезает при нажатии на поле. Нажатие на чекбоксы и радиокнопки анимировано. Кнопки подтверждения обладают эффектом «пульсации». И многое другое!

В настоящее время поддерживается:

  • Светлая и темная темы оформления
  • Доступны подчеркнутый и обведенный вид для текстовых полей (включая текст, e-mail, URL-адрес, номер телефона, дату)
  • Текстовые поля с возможностью включения автоматического изменения размера
  • Доступны подчеркнутый (boxed) и обведенный (outlined) вид для выпадающих списков
  • Чекбоксы (флажки)
  • Радиокнопки
  • Флажки согласия / принятия
  • Поле загрузки файла
  • Кнопка подтверждения (включая колесо загрузки)
  • Тесты (викторины)
  • ReCaptcha
  • Другое (подтверждение / сообщения об успехе и т.д.)

Pro-версия:

  • Производите пользовательскую настройку цветов и шрифтов
  • Выстраивайте поля в столбцы
  • Превращайте радиокнопки и чекбоксы (флажки) в переключатели
  • Добавляйте иконки для текста и выпадающих списков
  • Группируйте поля в разделы с помощью карточек
  • Прямая поддержка по электронной почте

Вы можете обновить плагин до pro-версии, не покидая WordPress.

Высокая совместимость с этими плагинами:

Гибкие контактные формы

Материальный дизайн для Contact Form 7 — это полностью гибкая тема для Contact Form 7. Она адаптируется под размер экрана и работает на любом устройстве.

Стиль контактных форм

Плагин «Материальный дизайн для Contact Form 7» по умолчанию устанавливает стандартные цвета и шрифты материального дизайна Google. Но вы можете использовать кастомизатор WordPress для изменения шрифтов и цветов на Ваш вкус, если Вы являетесь пользователем Pro-версии.

Скриншоты

  • Простая форма
  • Простая форма с использованием стиля с обводкой
  • Больше полей и пользовательские цвета (pro-версия)
  • Пример темной темы оформления
  • Генератор шорткодов
  • Генератор шорткодов

Установка

  1. Загрузите zip-файл в каталог /wp-content/plugins/ и распакуйте его
  2. Активируйте плагин через меню «Плагины» в WordPress

ИЛИ перейдите в «Плагины» > «Добавить новый», и выполните поиск «материальный дизайн для contact form 7» для установки через панель управления WordPress.

Часто задаваемые вопросы

Что такое материальный дизайн?

Материальный дизайн (Material Design) — это разработанный Google набор рекомендаций, который описывает как должен выглядеть и вести себя Ваш сайт или приложение. Материальный дизайн используется в большей части приложений Google, включая саму ОС Android.

Нужна ли тема Material Design?

Совсем необязательно! Материальный дизайн прекрасен тем, что Вы можете применять его в тех местах, в которых сами хотите. Будет отлично, если материальный дизайн используется только в Ваших формах, а не во всем сайте.

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

Как пользоваться этим плагином?

Всю документацию можно найти, нажав на «Помощь» (в правой верхней части экрана) и затем на «Материальный дизайн» на экране редактирования форм CF7.

Для более подробного руководства, посмотрите Как установить материальный дизайн для Contact Form 7.

У меня все это выглядит по-другому!

В некоторых темах установлены стили, которые перекрывают стили материального дизайна. Если это Ваш случай, опубликуйте ссылку на Вашу страницу с формами на форуме поддержки, и мы поможем Вам решить эту проблему.

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.

Отзывы

20.02.2020
Easy to use, makes CF7 looking very nice and professional. Oh, and it makes it responsive too. Even the free version is awesome. And if you have some little issue with it, don’t worry, it offers perfect customer care 🙂
14.02.2020
Man you need to listen to feedback and be more subtle in the way you push the Pro features. If you're not going to offer them, then don't let us put in lots of time in the Theme Customize panel, only to find out later that all the work you put in is for nothing... unless of course - we upgrade. 1 star.
22.12.2019
aggressive premium ads. limit functionality for free version. not sure how to make it work rtl.
22.12.2019
Great support and overall amazing plugin, very responsive and easy to use.. only plugin on the market that had the features I needed
Посмотреть все 59 отзывов

Участники и разработчики

«Material Design for Contact Form 7» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

«Material Design for Contact Form 7» переведён на 8 языков. Благодарим переводчиков за их работу.

Перевести «Material Design for Contact Form 7» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

Журнал изменений

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

  • Плагин теперь можно переводить

2.2.2

  • Доступен код default:get в выпадающих списках

2.2.1

  • Исправлена ошибка с автозаполнением обведенных полей
  • Файлы обновлены для работы с последней версией CF7

2.2.0

  • Обведенные поля больше не поддерживают SVG
  • Добавлены иконки для pro-версии

2.1.6

  • Добавлен календарь для выбора даты (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

  • Исправлена ошибка совместимости с PHP

2.1.2

  • Исправлена старая ошибка в полях подтверждения для CF7 версий ранее v5

2.1.1

  • Исправлена ошибка, возникающая в процессе обновления с версии v1

2.1.0

  • Произведена интеграция с плагином Multifile Upload Field for Contact Form 7

2.0.0

  • БОЛЬШОЕ ОБНОВЛЕНИЕ
  • Полностью новая библиотека Material Design
  • Текстовые поля и выпадающие списки теперь доступны в подчеркнутом (boxed) и обведенном (outlined) вариантах
  • Новые типы кнопок. Приподнятая (elevated — по умолчанию), неприподнятая (unelevated) и обведенная (outlined).
  • Textareas have an inner label
  • Улучшена поддержка браузеров
  • Выделение синтаксиса для пользовательского CSS

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