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.

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

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

Отзывы

16.09.2019
I'm so glad to bought this application. I did a very stylish and professional form design with using material design according to my customers request. Also i tried this plugin with 3rd party cf7 plugins. that was successful working. I also asked help from support service and support service was really friendly and they solved my issue quickly. Thanks a lot 🙂
19.06.2019
This plugin basically does everything you want it to do with your Contact Form 7 contact form. Responsive and nice to the eye. Even the free version makes the contact form look nice and professional without having to go out of your way to spend hours on writing css to make cf7 look good. 10/10 would install again.
Посмотреть все 52 отзыва

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

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

Участники

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

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

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

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

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

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