Контактная форма 7 является плагином WordPress невероятно популярен для создания контактных форм. Позволяет создавать формы без HTML-кодирования. эти формы может предложить такие функции, как ЗАЩИТНЫЙ, скачивая файлы, обзорные поля и т.п ...

Хотя стиль 7 контактной формы по умолчанию является достаточным для большинства основных контактных форм, вам часто приходится его менять.

Это изменяет структуру формы по умолчанию, чтобы сделать ее более доступной. Он также добавляет короткий код [отзывчивый] над формой, чтобы в случае ошибки при отправке она указывалась в форме.

Если вы никогда не создавали веб-сайт WordPress, узнайте Как установить блог WordPress с помощью FTP-клиента

Для стандартной формы код, сгенерированный плагином:

[ответ] Ваше имя (обязательно) [text * your-name id: your-name] Ваш E-mail (обязательно) [email * your-email id: your-email] Ваша тема [text your-subject id: your-subject] Ваше сообщение [textarea your-message id: your-message] [submit «Отправить»]

Некоторые плагины для настройки Контактной формы 7

1. Форма обратной связи 7 Style

Le плагин Форма обратной связи 7 Style имеет несколько стилей на выбор.

Для пользователей темы Twenty Fifteen также существует совместимый стиль.

Чтобы применить стиль, перейдите к Стили контактов> Быстрое редактирование Проверьте форму, в которой вы хотите применить стиль, затем нажмите " Обновление .

2. Форма обратной связи 7 Skins

Чтобы использовать скины Contact Form 7, создать новый Контактная форма и прокрутите страницу вниз до раздела Скины. Вы можете выбрать шаблон и стиль для своей формы.

Вы найдете модели, посвященные формамсобытия, регистрация и уведомление.

Так выглядит форма опроса в стиле «Топаз» с использованием темы «Двадцать пятнадцать».

3. Материал Дизайн для контактной формы

Эти стили основаны на стиле Материал Дизайн.

Этот плагин предлагает вам удалить форму по умолчанию и использовать ее шорткоды.

Вот пример с темой Гестии. Обратите внимание на плавающую метку, когда указатель перемещается в поле формы.

Проверка контактной формы 7 на некоторых Темы WordPress

Форма обратной связи с темой WordPress ColorMag

Большую часть времени контактная форма 7 унаследует стиль вашей темы WordPress. Это случай с темой Коралловый Dark.

Форма обратной связи с темой WordPress ColorMag

Вот форма без нестандартного стиля. Он наследует цвет синей кнопки Тема ColorMag для WordPress.

Я начал с загрузки фотографии для использования в качестве фонового изображения для формы и изменения кода меток формы с серого на белый с синей тенью на тексте.

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

Отображение сообщений об ошибках / успехах при отправке формы также следует изменить, чтобы они отображались правильно.

GIF, вращающийся при отправке формы, не отображался правильно, я нашел альтернативу Loading.io и сослался на нее с помощью CSS.

Вот итоговая форма:

Вот код:

div.wpcf7 {margin: 0; обивка: 1.5em; background: url ('your_background_image_url_here'); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .wpcf7 метка, .wpcf7-submit {цвет: белый; тень текста: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-form-control {10px 0 20px 0; } .wpcf7 .wpcf7-submit: hover {background: #186d8e; } .wpcf7-form-control: focus {border: 2px solid #289dcc; } div.wpcf7-response-output {background: #F8F8F8; выравнивание текста: по центру; ширина: 92.5%; поле: 1em 0em 1em 0em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } span.wpcf7-not-valid-tip {background: #F8F8F8; дисплей: встроенный блок; ширина: авто; заполнение: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } div.wpcf7 .ajax-loader {background-image: url ('your_loading_image_url_here'); ширина: 50px; высота: 50px; }

Если вам не нужно писать каракули в коде, мы предлагаем вам взглянуть на наш 10 WordPress плагины для создания контактной формы в вашем блоге

Ознакомьтесь также с альтернативами 3 премиум-класса, которые помогут вам создать контактные формы. 

1. Контактная форма W8

W8 Contact Form — один из плагинов Контактная форма самый популярный на WordPress. Он предлагает множество функций, таких как отправка нескольким получателям, поддержка анимации, неограниченное создание форм, различные стили и множество дополнительных параметров настройки.

Кроме того, он предлагает вашему веб-сайту или блогу профессиональную систему, которая упрощает общение с вашими клиентами. Вы сможете настроить все свои формы в соответствии со своими потребностями и вкусами.

скачать | Демонстрация | веб-хостинг

2. Форма обратной связи

Форма обратной связи - это отзывчивый плагин WordPress и простой инструмент, но с богатыми возможностями настройки, который позволяет отображать понятную и обнадеживающую форму, в которой ваши посетители могут связаться с вами, оставив свое сообщение.

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

Просто установите адрес электронной почты, на который вы хотите получать сообщения, и используйте его, чтобы развивать свой бизнес в наиболее выгодном направлении.

скачать | Демонстрация | веб-хостинг

3. Slick Popup Pro

Slick Popup Pro — это Расширение WordPress довольно простой и легкий, который преобразует любую форму, созданную плагином Contact Form 7 в всплывающем окне. Она использует форму и превращает ее в красивое и совершенно отзывчивое всплывающее окно.

Всплывающая форма может иметь несколько применений, в том числе: форма для сбора информации, Контактная форма, регистрационная форма, форма предложения, форма предложения / жалобы и другие.

скачать | Демонстрация | веб-хостинг

Рекомендуемые ресурсы

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

• Плагины 6 WordPress для проверки CAPTCHA на ваших формах
• Как добавить контактную форму с WordPress Контактная форма 7
• Как создать формы, совместимые с GDPR на WordPress

Заключение

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

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

А пока расскажите о своем Комментарии и предложения в специальном разделе.

...