Как настроить форму Контактный формуляр 7

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

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

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

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

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

[response] <label> ваше имя </ label> [текст * имя вашего имени: ваше имя] <label for = "your-email"> Ваш адрес электронной почты (обязательно) < / label> [email * your-email id: your-email] <label for = "your-subject"> Тема </ label> [text your-subject id: your-subject] <label for = "ваше сообщение "> Ваше сообщение </ label> [textarea your-message id: ваше сообщение] [отправить" Отправить "]

Некоторые плагины для настройки Контактной формы 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.

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

...