Contact form 7 дизайн формы: Изменяем стили для contact form 7. Три готовых решения

Contact form 7 настройка внешнего вида

Изменить стили Contact Form 7

После установки плагина Contact Form 7 и вывода формы на страницу, она выглядит примерно так.

Согласитесь, не очень выразительно. Но её вид можно легко поправить.

Если вы умеетe изменять/добавлять стили CSS, вероятно, вы захотите начать со стилизации полей.

Затем, чтобы усилить сочетание с вашей темой, можно поправить стили для всей формы.

Как задать стиль только для конкретного поля? Предположим, вы хотите изменить стили для необязательного поля ‘Тема‘, которое присутствует в форме по умолчанию после активации плагина.

Всего лишь нужно добавить ID для нужного поля в шаблоне формы.

После чего можно прописывать свои стили CSS.

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

Изменить стили формы с помощью Contact Form 7 Style — для ленивых

Скачайте плагин и установите. В меню ‘Contact Style’ нажмите ‘Add New’.

Выберите элемент для стилизации.

Настройки стилизации идентичны для каждого элемента.

choose element state — normal — обычное состояние, hover — вид при наведении

width / height — ширина/высота элемента

background — color — цвет фона, image — картинка в качестве фона, position — положение, size — размер, repeat — повтор

margin / padding — отступы/поля

border — width — толщина границы, style — стиль границы, color — цвет, radius — скругление

position — позиция элемента

Настройки кликабельны и интуитивны, экспериментируйте.

Вы можете смотреть превью во время стилизации. Отметьте вверху страницы контактную форму и нажмите Generate Preview. Область просмотра находится внизу.

Вид формы ‘После’ 5 минут экспериментирования:

Готовые стили для Contact Form 7

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

Плагин Contact Form 7 Style содержит несколько предустановленных стилей. Правда они относятся к праздничным событиям.

Для более повседнего использования обратите внимание на плагин Contact Form 7 Skins. Образцы бесплатных скинов вы можете посмотреть здесь //cf7skins.com/skins/styles/

Вот еще плагин Form Styles For Contact Form 7 с простыми, но симпатичными предустановленными стилями.

Простая и чистая форма контактов — Contact Form Clean and Simple — с разметкой Bootstrap, Google капчей и спам-фильтрами. Кстати, обратите внимание, довольно популярный плагин.

Если вы поищете самостоятельно в интернете, уверен, вы найдете многочисленные шаблоны и стили для Contact Form 7.

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

Приветствую вас, уважаемый читатель! Сегодня я покажу вам, как создать форму обратной связи с автором сайта/блога в вордпресс, при помощи популярного плагина Contact Form 7 (более 5 млн. установок). В пост включено: правильная настройка Contact Form 7, защита от спама, как изменить и настроить внешний вид формы. А также указал на основные причины — почему не работает и не отправляет письма контактная форма .

Контактная форма является важным средством для поддержки связи со своими читателями и наоборот. Чиркнуть личное письмецо, сделать предложение автору (от которого он не сможет отказаться), задать вопрос, отправить какой нибудь файл и многое другое. Все это возьмет на себя и не разгласит посторонним ценную информацию, наша контактная форма WordPress Contact Form 7. Вот, как то, так. Написал так написал, самому аж понравилось.

О, письмо пришло! Контактная форма 7 молодец

Не буду вас утомлять, уважаемый читатель, всякой писаниной — перейдем к делу. Установка и правильная настройка модуля для Вордпресс — контактная форма 7.

Плагин WordPress Contact Form 7

Плагин для WP Contact Form 7

Contact Form 7 может управлять многочисленными контактными формами, где вы можете гибко настраивать содержимое форм и почты с достаточно простой разметкой. Формы имеют встроенную поддержку Ajax отправки, CAPTCHA, спам фильтра Akismet и не только.

Все манипуляции производим в админке вордпресс. Для того, чтобы установить плагинчик, в разделе «Плагины» нажимаем «Добавить новый». Вводим в окошко «Поиска» Contact Form 7. Естественно он отобразится первым. Кликаем кнопку «Установить:

Как установить плагин

После успешной установки не забудьте его активировать. Полдела сделано. Следующий шаг, это — настройка вашей контактной формы.

Contact form 7 настройка

Находим в панели управления появившийся новый раздел «Contact Form 7» — пункт «Контактные формы». На данной странице у вас уже будет готовая по умолчанию форма контактов. С номером 1.

Контактная форма № 1 по умолчанию

Из картинки видно, что по умолчанию представлена стандартный вариант формы для связи и готовый шорткод для вставки на новую страницу, запись или на боковую панель (через текстовый виджет). Contact form 7 внешний вид по умолчанию, установленная на отдельной странице сайта:

Внешний вид: Стандартная контактная форма на сайте WordPress

Если вы хотите просто посмотреть, проверить или изменить, то есть, добавить к ней дополнительные поля, тогда нажмите пункт «Изменить». Скрин выше.

Откроется страница «Редактировать контактную форму». Плагин на русском языке и поэтому вам разобраться что к чему, будет очень легко. Вкладка «Шаблон формы». Вы можете изменить шаблон формы под свои нужды.

Например, чтобы добавить в шаблон формы тег поле для загрузки файла, нужно: Отметить мышкой место для вставки тега (лучше всего после сообщения) и нажать соответствующею вкладку «файл». С помощью этой функции вы можете разрешить пользователям загружать свои файлы через вашу форму, а затем вам будет отправлено электронное письмо с вложениями файлов:

Редактировать контактную форму. Вкладка файл

Откроется окно — Генератор тега формы: файл:

Чтобы прикрепить файл загруженный к почте, вам нужно вставить тег ([file-767])

Контактная форма 7 применяет ограничения по умолчанию для типа файла и размера файла. Когда вы не устанавливаете свои параметры, то по умолчанию расширения файлов являются: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv. А допустимый размер файла составляет 1 МБ (1048576 байт). Жмём кнопочку «Вставить тег»:

Тег файл вставлен в шаблон формы

Где отметили курсором мышки там и появится дополнительный тег. Если вставился не в том месте, то просто копируете его и помещаете в нужное. Таким же способом добавьте нужные теги в вашу форму. Обязательно после добавления дополнительных тегов нажимайте синею кнопку «Сохранить». А вот так, будет выглядеть кнопка для прикрепления файла к письму, после поля сообщения:

Кнопка Выберите файл в контактной форме

Если всё правильно делаете, то проблем с дополнительными полями, у вас не будет.

Ещё проверьте вкладки Письмо, Уведомления при отправке формы и Дополнительные настройки. По моему там и менять ничего не надо. Если только в Дополнительных настройках можно указать параметр — только для подписчиков — subscribers_only: true . Для подробной информации будет ссылка на страницу настроек дополнительных параметров.

А теперь, друзья, нам нужно подготовленную контактную форму разместить на отдельную, новую страницу или боковую панель веб-ресурса. Делается это легко.

Размещаем контактную форму на отдельной странице сайта/блога

После всех настроек и сохранения формы, скопируйте шорткод на странице Контактные формы или Редактировать контактную форму. После этого, создайте новую страницу — раздел Страницы — Добавить новую. Вписываем название страницы, например «Контакты». Переключаем редактор сообщений в режим «Текст» и вставляем шорткод в поле сообщений:

Новая станица с контактной формой

Если у вас новая страница автоматически добавляется в меню, то выставляем «Порядок» 1, 2 или 3 (какая по счету в меню, будет отображаться страница Контакт). Нажимаем кнопку «Опубликовать». Всё. Готово. Так же вы можете добавить страницу в меню вручную. Теперь у вас установлена форма для связи с автором блога/сайта.

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

Получаете спам через Contact Form 7?

Есть защита. Спамеры затрагивают всё, ваши контактные формы не являются исключением. Прежде чем вас заспамят, защитите ваши контактные формы с помощью мощных анти-спам функций Contact Form 7.

Contact Form 7 поддерживает фильтрацию спама с Akismet. Интеллектуальная reCAPTCHA блокирует раздражающих спам ботов. Используя черный список комментариев вы можете также блокировать сообщения, содержащие определенные ключевые слова или отправляемые с определённых IP адресов.

Нажмите пункт «Интеграция». Сервис Google reCAPTCHA защищает вас от спама и других видов автоматического злоупотребления. С модулем интеграции reCAPTCHA Контактной формы 7 вы можете заблокировать форму отправку спам-ботами.

Интеграция Google reCAPTCHA v3: защита от спама

Интеграция плагина с другими сервисами recaptcha

Топчите Setup Integration, а после перейдите по ссылке, чтобы получить ключи ReCaptcha API:

reCAPTCHA — это сервис Google

Чтобы начать использовать reCAPTCHA, сначала необходимо зарегистрировать ваш сайт WordPress. reCAPTCHA — это сервис Google, поэтому для его использования вам необходим аккаунт Google. Войдите в Google, используя учетную запись, и перейдите по ссылке https://www.google.com/recaptcha/admin . Вы увидите простую регистрационную форму, такую ​​как:

Зарегистрировать сайт WordPress. Goodle reCAPTCHA

Укажите название. Выберите reCAPTCHA v3 (для работы reCAPTCHA v3 не нужен виджет CAPTCHA (флажок «Я не робот», используемый в reCAPTCHA v2)) и введите домен сайта в поле Домены. После регистрации сайта вы получите ключ сайта и секретный ключ. Введите их (скриншот выше) и сохраните настройки. Вот и все. Теперь ваша контактная форма используют счет reCAPTCHA, чтобы проверить, была ли отправлена сообщение от человека или от спам-бота.

Если вы решите установить Contact Form 7, то я советую дополнительно к нему установить аддон Contact Form 7 Style. Он позволит вам редактировать внешний вид вашей формы. Вы сможете не только выбрать один из готовых шаблонов, но и создать свой собственный уникальный дизайн. Хотите изменить внешний вид? Тогда продолжение специально для вас, ценителей красоты.

Внешний вид контактной формы — Contact Form 7 Style

Стили для форм обратной связи 7

Плагин Contact Form 7 Style — это аддон для Contact Form 7, который необходимо установить на вашем сайте WordPress. Поддерживает пользовательские стили, которыми можно легко управлять через панель администратора. Также есть предопределенные шаблоны которые можно активировать в настройках контактной форме 7. В настройках основного плагина появится новая вкладка — Contact Form 7 Style Template. Настройка внешнего вида:

Готовые шаблоны для формы

Пример, я изменил стандартный внешний на такой симпатичный:

Внешний вид формы для связи

Не забывайте, что можно задать свои, пользовательские параметры стиля:

Плагин поддерживает пользовательские стили, которыми можно управлять через админпанель

И в заключение:

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

Почему не работает (не отправляет письма) Contact Form 7?

1. Проблемы вашего хостинга. Важно отметить, что отправка и получение электронных писем в значительной степени зависит от сервера, на котором размещен ваш сайт WordPress;
2. Убедитесь, что используется правильный обратный электронный адрес;
3. Ваше письмо может рассматриваться как спам;
4. Плагины или тема конфликтует с Contact Form 7;
5. Конфликты Javascript.

Если вы не можете отправлять электронные письма из этого плагина, вполне вероятно, что вы не можете отправлять электронные письма из WordPress в целом. В случае чего, господа, получить на часто задаваемые вопросы по работе плагина вы можете на странице https://contactform7.com/faq/.

Или на форуме поддержки https://wordpress.org/support/plugin/contact-form-7/ . Английский язык не беда, с переводом любимого браузера будет всё понятно.

На этом у меня всё. Вроде, ни чего не забыл. Всего доброго. Удачи, друзья.

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

Ранее я уже рассказывал о том как установить и настроить Contact Form 7, сейчас не будем об этом говорить, а сразу перейдем к необходимым изменениям дизайна.

Для начала нам нужен доступ к админке и файлу style.css, его можно найти во вкладке «Внешний вид»/»Редактор». По умолчанию, именно нужный файл вам и откроется. Рекомендую открыть несколько вкладок в браузере:

1. Вкладка Contact Form 7 для правки формы.
2. Страницу на сайте с формой обратной связи.
3. Редактор с открытым файлом CSS.

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

Добавляем классы к форме Contact Form 7.

Когда мы откроем форму для правки мы увидим примерно следующую картину:

Скучно, не пропорционально, скажем прямо не красиво.

Для изменения внешнего вида формы нужно немного поработать со стилями, но для начала добавим несколько классов в шаблон формы. Для этого открываем форму для правки (как на картинке выше) и дописываем следующие классы:

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

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

Определяем ID формы на странице.

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

Для правки формы нужно ее добавить на страницу или в запись, в необходимом месте, то-есть вставить шорткод. После этого переходим на эту страницу и кликаем по форме правой кнопкой мыши и выбираем пункт «Просмотреть код» это для браузера Chrome, если у вас другой, то там примерно такой же текст.

В открывшемся коде ищем начало нашей формы, выглядит это так:

Именно это и будет id формы. Возвращаясь назад, покажу какой id имеет эта же форма на другой странице.

Как видим, идентификатор отличается всего несколькими цифрами. По этому для начала нужно определиться на какой странице будет расположена форма, а уж затем приступать к правке стилей.

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

Стилизация формы Contact Form 7, работа с файлом style.css

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

Изменяем цвет фона, отступы, шрифт формы.

После проделанной работы переходим к стилям. Сперва изменим (если это нужно) фоновый цвет формы, подгоним наши отступы, подберем необходимый шрифт и цвет текста. Все эти настройки будем проводить заранее зная ID. Как его узнать, мы рассматривали выше.

Сперва обратимся к файлу style.css, добавим первые правила для ID формы (добавлять нужно в самом низу файла), в моем случае это wpcf7-f172-p34-o1, вам же нужно подставить ваш идентификатор:

#wpcf7-f172-p34-o1 margin: 5px;
padding: 10px;
background: #B3AFAF;
font-family: Georgia, «Times New Roman», Times, serif;
color: #000;
>

Теперь разберем все подробнее:

1. Вначале займемся отступами. Внешние отступы (от края до начала формы) — margin: 5px, внутренние отступы (от начала формы до внутренних элементов) —padding: 10px.
2. Заливка формы или ее фон определяется свойством background: #B3AFAF, цвет можете подбирать какой угодно, просто заменив значение.
3. Определяемся с семейством шрифта, если менять не хотите можно не прописывать это правило (font-family: Georgia, «Times New Roman», Times, serif).
4. Цвет текста определяет свойство color, которое сейчас стоит в черном цвете (color: #000).

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

Определяем отступы между полями, изменяем рамку.

Переходим к нашим полям, добавим отступов:

#wpcf7-f172-p34-o1 p margin:5px;
>

Это отступы по краям полей, что бы текст и блоки не сливались в одно целое.

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

#wpcf7-f172-p34-o1 input,textarea border: 3px double #000;
>

О рамках немного подробнее. Значение в 3px это ширина рамки, double двойное использование (если не нужно, можно удалить это слово), #000 цвет рамки так же можете подобрать свой.

Можете сохранить изменения и посмотреть на то что у вас получилось. Далее перейдем непосредственно к полям и изменению их размеров и расположения.

Меняем ширину полей и их расположение.

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

.name-cf float:left;
padding: 2px;
>
.name-cf input width: 270px;
>
.thems-cf input width: 100%;
>
.clear-cf clear: both;
>
.text-cf textarea width: 100%;
>

Теперь разберем все поподробнее:

1. Первый класс к которому мы обратимся name-cf он принадлежит полям с именем и емейлом. Для них задаем отступ в 2px (padding: 2px) и обтекание (float:left), что бы выровнять два поля в один ряд.
2. Далее подправим ширину полей задав им оптимальный (для моего шаблона) размер в 270px (.name-cf input ). Если у вас поля все еще в одну строчку или же слишком маленький размер, подберите свой вариант.
3. Поле с названием темы сделаем на всю ширину формы, так как текста там может быть больше (.thems-cf input ). Если вы хотите свое, точное значение укажите его в пикселях.
4. Следующий блок который мы добавили к форме предназначен для отмены обтекания (.thems-cf input ).
5. Так же как и в предыдущем случае, поле с текстом сообщения делаем на всю ширину (text-cf textarea ).

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

Выравниваем кнопку «Отправить» по центру, изменяем фон и ширину.

Переходим к нашей кнопке, выровняем по центру и добавим фон:

.submit-cf width: 200px; /*ширина блока*/
height: 25px; /*высота*/
margin: 0 auto; /* Отступ слева и справа */
>
.submit-cf input width: 200px;
background:#96B195;
>

Традиционно объясняю что к чему:

1. Первым правилом мы определяем ширину и высоту блока в котором будет размещена кнопка и ставим ее по центру формы.
2. Вторым правилом задаем цвет фона кнопки (background:#96B195, если не указать будет такого же цвета как и все остальные поля), устанавливаем ширину кнопки (width: 200px, желательно что бы была такого же размера, как ширина блока, что бы кнопка не двигалась в стороны).

Сохраняем наши настройки и смотрим что у нас получилось:

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

Надеюсь для вас статья была полезной, если же что-то не так или возникли проблемы оставьте свой комментарий и я постараюсь ответить (подправить).

«>

Рекомендуем к прочтению

Как настроить плагин Contact Form 7 инструкция — info-effect.ru

Здравствуйте!

Недавно заметил, что у плагина Contact Form 7 изменился дизайн страницы настроек плагина, то есть разработчики обновили плагин. Суть настроек не поменялась, а вот внешность страницы изменилась, поэтому решил написать новую статью о том, как настроить плагин Contact Form 7. У меня на сайте есть уже статья о настройке данного плагина, но получается что она уже не подходит.

Итак, вкратце напомню, что данный плагин предназначен для обратной связи на вашем сайте, то есть посетители вашего сайта смогут написать вам сообщение прямо на вашем сайте, через контактную форму. Установить данный плагин вы сможете прямо из своей админ-панели wordpress, для этого перейдите по вкладке: Плагины — Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте найденный плагин.

Чтобы настроить плагин, перейдите по вкладке: Contact Form 7.

На странице — Формы, у вас уже будет готовая форма по умолчанию — Контактная форма 1, но в ней нет защитной каптчи, поэтому дальше я объясню вам как добавить в форму защитную каптчу и заодно объясню как установить обратную форму связи непосредственно на сайт. Делается всё это очень просто.

Итак, для добавления в форму защитной каптчи вам необходимо установить плагин — Really Simple CAPTCHA. Установить данный плагин вы так же сможете из своей админ-панели wordpress. Переходите по вкладке: Плагины —Добавить новый, вводите название в форму поиска, нажимаете Enter, устанавливаете и активируете найденный плагин.

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

А теперь после того как вы установили и активировали плагин — Really Simple CAPTCHA, зайдите снова на страницу Contact Form 7 и нажмите на вкладку — Изменить, под названием формы.

Затем на странице — Редактировать форму, в поле — Шаблон формы, вам нужно выделить место под каптчу после тега Сообщение, и нажать вверху на кнопку — Captcha. (Смотри на скриншоте ниже)

У вас откроется окно, где вам нужно только нажать на кнопку — Insert Tag.

После чего, в шаблоне формы, после тега Сообщение, у вас появится код каптчи.

Всё, защита готова, теперь нажмите вверху на кнопку — Сохранить.

Да, вот ещё что, забыл вам сказать, email на который будут отправляться вам письма, установлен по умолчанию, который прикреплён к вашей админ панели, то есть административный email. Если вы хотите установить в форму, для получения писем какой-либо другой email, то снова зайдите на страницу — Редактировать форму, нажмите в меню на вкладку — Письма.

В поле — To, будет указан email на который будут отправлять письма, то есть ваш email.

В поле — From, будет указан email, который будет отображаться в письме получателя, как email отправителя. То есть если вы ответите на высланное вам письмо, то будет отображаться данный email.

Вот при желании можете как-то поменять данные email адреса, чтобы вы знали.

Итак, мы установили в готовую Контактную форму 1, защиту в виде каптчи. Теперь я покажу как установить данную форму на свой сайт. Переходите снова на страницу — Формы, и скопируйте шорткод Контактной формы 1, который располагается с правой стороны.

Теперь вам нужно создать страницу для вашего сайта — Обратная связь или Контакты, в общем придумайте название для неё. И вставить в поле для создание страницы скопированный шорткод. После чего опубликовать страницу.

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

На этом у меня всё, если у вас остались вопросы по статье, то обязательно напишите мне! До новых встреч!

WordPress. Contact form 7. Расширенная настройка

Добрый день! Из этого туториала Вы узнаете, как настроить Контактную форму в WordPress на основе плагина Contact Form 7.

WordPress. Contact form 7. Расширенная настройка

В WordPress контактная форма часто настраивается при помощи плагина Contact Form 7.

Давайте узнаем, как настроить контактную форму.

Войдите в админ панель WordPress.

1. Перейдите на вкладку Контакты -> Контактные формы (Contact -> Contact Forms):

2. Затем, нажмите на название контактной формы, для того чтобы открыть её для редактирования:

Теперь, когда открыто окно редактирования Contact Form 7, начните настраивать форму.

В экране редактирования формы Вы найдёте 4 основные вкладки: Форма (Form), Электронная почта (Mail), Сообщения (Messages) и Дополнительные настройки (Additional Settings):

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

Вкладка Форма (Form) включает структуру формы. Здесь Вы можете настроить то, как отображается форма и из каких она состоит полей:

Как видно на скриншоте выше, форма включает поля: «Имя» (Name), «Адрес электронной почты» (E-mail), «Телефон» (Phone) и «Сообщение» (Message), а также кнопки «Очистить» (Clear) и «Отправить» (Send).

Поля можно добавить/редактировать, используя теги сообщения формы, например, «текст» (text), «адрес электронной почты» (email), «флаговые кнопки» (checkboxes), «радиокнопки» (radio buttons) и т.д.:

Давайте перейдём на вкладку Электронная почта (Mail), которая отвечает за настройку адреса электронной почты, на который приходят электронные письма.

Вкладка Электронная почта (Mail) включает такие поля, как «Кому» (To), «От кого» (From), «Тема сообщения» (Subject), «Дополнительные хедеры» (Additional Headers) и «Основное содержимое сообщения» (Message Body):

Вверху вкладки Электронная почта (Mail) Вы увидите теги сообщения (mail-tags), которые Вы можете использовать в полях формы:

Теги сообщения (Mail-tags) создаются автоматически, когда Вы добавляете их в поля Формы (Form), Вы увидите четыре тега сообщения, доступные для использования в полях, так как у Вас создано только четыре тега («Имя» (Name), «Адрес электронной почты» (E-mail), «Телефон» (Phone) и «Сообщение» (Message)).

Обратите внимание! Для того чтобы правильно настроить форму, поля должны содержать те теги сообщения, которые используются в структуре формы во вкладке “Форма”, иначе форма работать не будет.

Введите адрес электронной почты, куда должны приходить электронные письма, в поле «Кому».

Поле «От кого» должно содержать следующую строку:

[your-name] <[email protected]>

шде Вы должны использовать ваше доменное имя вместо templatetesting.com.

Не забудьте заполнить остальные поля соответствующими тегами.

Давайте перейдём на вкладку Сообщения (Messages).

Она включает текст всех сообщений, которые видит пользователь, когда выполняет определённые действия с формой, например, «Sender’s message was sent successfully», «Validation errors occurred» и т.д.:

Вкладка Дополнительные настройки позволяет добавить сниппеты настройки (customization snippets). Вы можете узнать об этом больше на следующей странице: Дополнительные настройки.

Не забудьте нажать на кнопку «Сохранить» (Save), когда Вы закончите настройку формы, для того чтобы сохранить внесённые изменения:

Это конец данного туториала. Теперь Вы знаете, как настроить Контактную форму в WordPress на основе плагина Contact Form 7.

Вы можете также ознакомиться с детальным видео-туториалом ниже:

WordPress. Contact form 7. Расширенная настройка

Contact Form 7 WordPress настройка

Автор Илья Чигарев На чтение 3 мин Просмотров 341 Обновлено 05.10.2016

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

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

Contact Form 7 WordPress настройка:

1. Первым шагом заходим в «Плагины» — «Добавить новый» — в строке поиска плагинов ищем «Сontact form 7»

2. Как видите это довольно известный плагин более 25 миллионов скачиваний.

3. Устанавливаем его и видим появилась дополнительная строка в админке сайта.

Хотите научиться делать сайты?
Чтобы сэкономить на разработке или зарабатывать деньги создавая сайты для других? Недавно я записал новый курс «Идеальный сайт на WordPress» и «Лендинг в Elementor», где рассказал пошаговый план как создавать крутые сайты. Разработкой занимаюсь более 7-ми лет, на сайтах зарабатываю более 50 тысяч в месяц и в курсе я выложил всю технологию как делать такие сайты. Подробнее читайте по ссылке.

4. Переходим туда и видим, что весь функционал на русском языке. Работать с плагином Contact Form 7 довольно легко. Там уже создана одна форма, которая многим подойдет. Если нажать «Изменить» под заголовком формы, то там мы увидим поля:

• Имя
• Емейл
• Тема сообщение
• Сообщение

Тоесть стандартная форма, которую можно ставить на нашу страницу «Контакты»

5. Если нас все устраивает, то мы копируем код данной формы и идем в редактирование страницы «Контакты»

6. Во вкладке «Текст» мы вставляем наш код и обновляем страницу

7. И видим, что наша форма Contact Form 7 замечательно встала 😀 Можем протестировать и отправить тестовое письмо. Снизу увидим сообщение подтверждения отправки, значит наше письмо успешно отправилось!

Дополнительные настройки плагина Contact Form 7

Давайте еще раз зайдем в настройки плагина и спустимся ниже, тут мы видим строки, которые можем изменить.

Во-первых, это поле получатель, где мы можем сменить емейл, на который хотим получать письма. По умолчанию там стоит тот емейл, что прописан в настройках сайта.

Во-вторых, если спуститесь еще ниже, там можно изменить «Уведомления при отправке формы», тоесть вписать свои сообщения, если есть на то желание.

В-третьих, вы можете добавлять дополнительные поля в форму обратной связи. Для этого поднимитесь до настроек «Шаблона формы» и справа нажмите «Сгенерировать тег» и выберите нужный, например «Номер телефона».

Теперь можете выбрать обязательное это поле или нет? Поставьте чекбокс, если «Да».

Теперь нам нужно вставить два кода в «Шаблон формы» и в «Шаблон письма».
Сначала копируем код, что повыше и вставляем в «Шаблон формы» в такие же теги, как и другие коды стоят. А именно:

Телефон
[tel tel-111]

В моем случае телефон.

Теперь копируем нижний код и вставляем в «Шаблон письма», так же подписав, что это телефон.
Не забываем сохранить форму и идем проверять)

На этом все. Если все это кажется сложным, то просто установите плагин Contact Form 7 и зайдите в настройки. На деле все проще, чем кажется)

До встречи. Всех благ!

Защита от спама для Contact Form 7 WordPress. — Мои записки о Linux.

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

Для того чтобы избавиться от этой проблемы давайте рассмотрим встроенные в Contact Form 7 способы защиты от спама.
А также научимся их устанавливать и настраивать на своём сайте. 

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

В боковом меню выбираем Contact Form 7 –> Формы -> находим нужную форму и нажимаем на ссылку «Изменить» под названием этой формы.

Защита от спама для Contact form 7 при помощи поля «acceptance». 

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

Для того что бы использовать данное поле для защиты от спама вы можете выставить, что бы эта галочка была по умолчанию снята и возле галочки был написан текст, например: «Поставьте галочку, если вы не робот». Таким образом, пока пользователь не поставит галочку, данные с формы не будут отправляться.

Для того чтобы вставить это поле просто щёлкаем мышкой по кнопке с его названием.

Данное поле имеет несколько настроек: 

· Make this checkbox checked by default – изначально, галочка выставлена по умолчанию и пользователю не нужно выставлять ее вручную.

· Make this work inversely – если включить этот параметр, то это поле начинает работать наоборот, т.е. для того, чтобы произошла отправка формы вам нужно эту галочку не поставить, а, наоборот, убрать. Т.е. это тоже можно использовать для защиты от спама.

При необходимости вы также можете задать для этого поля идентификатор ID и класс.
Поле «Имя» оставляем без изменений.
После внесения изменений в настройки поля нажимаем кнопку «Insert Tag»
Также не забудьте написать рядом с галочкой какой то текст. Например; «С условиями ознакомлен».

Для того чтобы просмотреть как будет выглядеть это поле сохраняем форму и обновляем страницу с формой.

Защита от спама при помощи поля «quiz».

Следующее поле, которое можно использовать для защиты от спама – quiz. Возможно, вы встречали в формах на других сайтах, когда вам задается простой вопрос, например: «Солько будет 2 + 2?», и вам нужно ввести на него ответ.

Вставляется это поле аналогично предыдущему. Нажимаем на кнопку с названием «quiz» и вносим настройки.

Для того чтобы ввести свои вопросы и ответы, мы должны в поле «Questions and answers» написать сначала вопрос, а затем через вертикальный слэш ответ. При этом каждый вопрос должен быть написан с новой строки.

При отправке форма будет проверять, совпадает ли то, что ввел пользователь с тем ответом, который ввели вы. Если да, то будет осуществляться отправка, если нет – будет выдаваться ошибка.

После того как вы ввели все вопросы и ответы, нажимаем «Insert tag». Это могут быть не обязательно примеры, может выводиться абсолютно любой текст.

Защита от спама для Contact form 7 при помощи поля «reCAPTCHA».

Следующее поле для защиты от спама, это поле reCAPTCHA. Это специальный сервис Google который позволят генерировать специальные поля, которые выглядят таким образом:

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

Для вставки данного поля на панели генерирования полей Contact form 7 нажимаем кнопку «reCAPTCHA».

Во всплывающем окне нам будет предложена ссылка с инструкцией по подключению сервиса reCAPTCHA к вашему сайту.

Переходим по этой ссылке и смотрим инструкцию. 

Первое, что нужно сделать — перейти на Google’s reCAPTCHA.

Register your site — зарегистрировать ваш сайт.

Get a site key and secret key – получить ключ от сайта и секретный ключ.

При переходе по предложенной ссылке нам предлагают ввести название и домен сайта, причем не адрес сайта, а только домен, без http://.

После ввода данных нажимаем на кнопку «Регистрация».

После этого нас перекинет на страницу, с которой нам нужно скопировать ключ.

Затем нам нужно перейти в админ панель сайта, пункт меню Contact Form 7 => Integration и вести полученные ключи для сайта.

Теперь можно вернуться к редактированию формы и вставить это поле.

Нажимаем на » reCAPTCHA «, и видим настройки:

· Theme (light/dark) — тема, светлый фон/темный фон.

· Size (normal/compact) — размер, нормальный или компактный. 

Выбираем нужные значения и нажимаем «Insert Tag».

ИСТОЧНИК.

Contact Form 7 WordPress — описание и настройка.

Сontact form 7 настройка внешнего вида. Изменяем дизайн форм.

Форма обратной связи WordPress с плагином Contact Form 7.

Настройка contact form 7. Добавление полей.

Лучший плагин контактной формы для WordPress?

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

Тем не менее, с таким количеством доступных других плагинов контактной формы, является ли Contact Form 7 лучшим выбором для вашего сайта? Давайте посмотрим на то, что этот плагин может сделать, как это работает, и как легко его использовать.

О Contact Form 7

Contact Form 7 является свободным – и очень популярным плагином контактной формы в WordPress. Согласно статистике каталога плагинов в  WordPress, он активно установлен на более чем на одном миллионе сайтов. А также является наиболее широко используемым решением контактной формы в официальном каталоге плагинов, он также имеет впечатляющий рейтинг пользователей 4,5 звезды из 5 возможных.

Короче говоря, когда речь идет о добавлении свободной формы контакта на WordPress сайте, речь идет о наиболее испытанном и проверенном варианте. Но хорошо ли это?

Давайте взглянем на этот плагин.

5 причин, чтобы рассмотреть вопрос об использовании Contact Form 7

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

Быстрый способ добавить контактную форму на WordPress

Помимо того, что она свободно используемая – которое является основным требованием многих людей! – И имеющий довольно позитивный общий рейтинг от пользователей, одна из лучших причин, чтобы выбрать Contact Form 7. В отличие от некоторых других популярных бесплатных плагинов контактных форм в WordPress, готовая форма контакта автоматически добавляется на ваш сайт сразу после активации.

Вам не нужно создавать контактную форму или даже добавить свои собственные контактные данные в форму (если вы не хотите изменить форму адреса электронной почты), Contact Form 7 является одним из самых быстрых способов, чтобы добавить этот тип формы к любому сайту.

После того, как плагин будет активирован, вы можете добавить контактную форму по умолчанию для ваших WordPress постов и страниц путем вставки соответствующего шорткода ( не знаете, что такое шорткод? ) в содержание.

Затем вы можете просмотреть страницу, чтобы увидеть, как выглядит форма контакта, и нажмите на кнопку Опубликовать, когда вы будете готовы к активации формы.

Формы также могут быть вставлены в боковые панели и в других виджетов вашей темы, добавив шорткод в текстовый виджет WordPress.

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

Формы также могут быть добавлены в файлы шаблона темы для того, чтобы отображать формы в других областях вашего сайта (кроме постов, страниц и боковых панелей).

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

Некоторые проблемы могут возникнуть, если адрес электронной почты, связанный с вашей формой не находится на одном и том же имени домена, как ваш сайт. Например, если доменное имя Вашего веб-сайта AndreyEx.ru, но адрес электронной почты контактной формы использует домен gmail.com, форма представления может не доставить.

Если эта проблема непоставки Contact Form 7 действительно происходит, это обычно проблема с вашим веб – хостингом, а не самим плагином. Есть бесплатные инструменты, которые могут помочь вам преодолеть эту проблему, но самый простой вариант, как правило, чтобы создать и использовать адрес электронной почты с того же домена, что и ваш сайт.

Как легко создавать специальные формы

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

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

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

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

После того, как вы понимаете систему, создавая пользовательские формы становится очень просто с Contact Form 7. После того, как вы сохранили форму, каждый экземпляр этой формы будет автоматически обновляться на вашем сайте. Благодаря шорткодам в WordPress, нет необходимости перепечатывать любой контент, который содержит эту форму.

Полезный набор полей формы

По сравнению с самыми дорогими и мощными многоцелевыми формами плагинов в WordPress, таких как гравитационные форм, Contact Form 7 немного не хватает полей форм. Тем не менее, для создания основных онлайновых форм, он имеет все поля, которые понадобятся большинству пользователей.

Текущий список полей Contact Form 7 включает в себя:

• Текст
• Эл. адрес
• URL
• Номер телефона
• Число
• Дата
• Текстовая область
• Выпадающее меню
• Флажки
• Радио-кнопки
• Викторина
• Рекапча
• Прикрепленный файл/загрузка
• Кнопка “Отправить”

Как вы можете видеть, все основные поля – плюс несколько дополнительных опций, таких как контрольные опросы и возможность подключать и передавать файлы. Если вам нужно создать основной контактную форму или что-то чуть более продвинутые, такие как электронную форму запроса цитаты, Contact Form 7 должно хватить.

Вы не найдете передовые поля формы, предлагаемых коммерческими вариантами, так что если вам необходимо создать формы, которые используют условную логику, чтобы определить, какие поля должны отображаться на основе выбора пользователя, или принимать платежи и включают в себя автоматическое вычисление полей, вам будет необходимо обновиться до плагинов премиум – форм, таких как Gravity Forms или Ninja Forms.

Полезная интернет документация и поддержка пользователей

Одним из преимуществ выбора коммерческого плагина над свободным вариантом, это в основном обещание активной поддержки пользователей. Тем не менее, Contact Form 7 поддерживается через WordPress каталог подключаемых модулей, и есть хороший шанс, что вы будете в состоянии найти решение вашей проблемы в архивах форума. Если нет, то создайте новую тему на форуме.

Онлайн документация выросла за эти годы, и охватывает все, от начала работы до устранения неполадок. FAQ по Contact Form 7 обширна тоже.

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

Дополнения к Contact Form 7

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

Если вы не знакомы с CSS, настройки внешнего вида ваших форм может быть немного сложнее с Contact Form 7. В то время как формы действительно как правило, хорошо вписываются в большинстве тем WordPress, есть несколько дополнений, которые могут помочь вам изменить их появление. Оболочка Contact Form 7 является популярным вариантом, как и пользовательские скины Contact Form 7.

Другим полезным дополнением является free Contact Form DB. После того, как вы включите этот модуль, данные формы будут храниться в вашей базе данных WordPress и доступны через админку в WordPress. Если вы хотите снизить риск потери формы представления, или вы хотите создать центральное место, где данные формы можно хранить и просматривать, используя надстройку, то настоятельно рекомендуется free Contact Form DB. Flamingo еще один бесплатный плагин с аналогичной функциональностью.

Как уже упоминалось ранее, свободный плагин Postman SMTP mailer может быть в состоянии помочь вам преодолеть проблемы, которые могут возникнуть от попыток отправить форму представления на адрес электронной почты с доменом, который отличается от вашего сайта.

Другие особенности Contact Form 7

Некоторые другие причины, по которым вы можете захотеть выбрать Contact Form 7 включит на свой сайт:

• AJAX с питанием от формы представления, чтобы избежать перезагрузок страницы
• Akismet и поддержка CAPTCHA, анти-спам, чтобы уменьшить спам от контактной формы
• Возможность отображения пользовательских сообщений подтверждения представления и об ошибках
• Возможность отображения поля формы шаблонного текста
• Возможность отслеживать формы представления с помощью Google Analytics
• Возможность позволить пользователям выбрать получателя формы
• Возможность перенаправления пользователей на другой URL после формы представления.

Contact Form 7 в настоящее время на версии 4.7 и обновляется на регулярной основе, есть хороший шанс, что будут добавлены новые возможности.

Недостатки Contact Form 7

Если вы просто хотите быстрый и простой способ добавить контактную форму на ваш сайт WordPress, Contact Form 7 трудно превзойти. Тем не менее, это не идеальное решение, и имеет некоторые недостатки.

Одна из областей, где Contact Form 7 отстает от конкурентов является его интерфейс формы построителя. В отличие от WPForms, а также некоторых других свободных и коммерческих форм плагинов, нет никакого инструмента drag-and-drop в форме строителя.

Как мы рассмотрели ранее, процесс добавления дополнительных полей в формы немного длителен. Создание пользовательских форм не слишком сложно, но drag-and-drop в форме построителя с окном предварительного просмотра позволит улучшить вещи значительно. Там также нет быстрого способа изменить внешний вид и стиль ваших форм.

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

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

К сожалению, из коробки, Contact Form 7 не поддерживают эту функцию. Тем не менее, как указано в дополнениях разделе, есть по крайней мере два бесплатных плагина – Flamingo и Contact Form DB – которые могут хранить свои формы представления для безопасного хранения.

Итоги

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

Вы не сможете создать такой же вид продвинутых форм, которые вы бы смогли сделать с такими инструментами, как Gravity Forms или WPForms Pro. Вы можете, однако, добавить выпадающее меню, флажки и поля вложений файлов для ваших форм. Таким образом, это, вероятно, лучше думать о Contact Form 7 в качестве строителя контактной формы, а не полное решение многофункциональных форм.

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

Тем не менее, если все, что вам нужно, это добавить простую контактную форму (бесплатно) с возможностью добавления еще несколько полей, Contact Form 7 вполне может быть только то, что вы ищете!

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Как установить и настроить плагин Contact Form 7

Плагин Contact Form 7, это один из самых популярных плагинов WordPress, для создания формы для контактов. Но многие не знают, как его правильно настроить.

И в этой статье, вы пошагово узнаете о том, как:

• Как установить плагин Contact Form 7
• Как сделать новую форму
• Как вставить готовую форму контактов на сайт WordPress.

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

Что можно сделать с Contact Form 7

• С более чем пятью миллионами установок,  Contact Form 7 является одним из самых популярных в среде WordPress. С его помощью можно сделать следующее:
• Создание и управление контактными формами
• Легко настроить нужные поля в форме
• Вставить контактную форму в любое место с помощь шорткода
• Поддерживает антиспам фильтры Akismet, фильтрацию на основе технологий Ajax и CAPTCHA.
• Большое количество сторонних расширений.

И все это, абсолютно бесплатно!

Как установить Contact Form 7

Вначале нужно установить плагин WordPress. Для этого на панели инструментов выберите в меню «Плагины» — «Добавить новый».

Затем нужно набрать в строке поиска Contact Form 7. После того, как плагин отобразится в поиске, нужно его установить и активировать.

После установки, в панели управления сайтом добавиться новое меню Contact Form 7

Настройка плагина Contact Form 7

Кликните на Contact Form 7 – Контактные формы. Откроется окно администрирования плагином. Здесь же вы увидите контактную форму, созданную по умолчанию.

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

Кроме того, вы можете создать свою собственную контактную форму, выбрав Контактные формы – Добавить новую.

Создание новой контактной формы.

Дайте контактной форме имя, а затем прокрутите вниз до формы. Здесь вы можете редактировать новый шаблон.

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

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

Однако вы можете добавить дополнительные поля в зависимости от потребностей вашего сайта. Для этого вы можете выбрать соответствующую кнопку генератора тегов, чтобы создать правильный тег формы. Например, чтобы добавить поле URL, вы просто нажимаете кнопку URL (как отмечено ниже).

Если вы хотите добавить метку к своему полю, вы можете скопировать HTML-код, из других полей. Например, когда я нажал на кнопку URL, Contact Form 7 сгенерировал тег [url url-344]. Затем я добавил дополнительный HTML-код для метки, поэтому итоговое поле URL будет иметь вид:

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

Настройка почтовых уведомлений

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

Это шаблон электронного письма, которое вы получите при отправке контактной формы. В поле «Кому» убедитесь, что адрес электронной почты правильный, так как именно сюда будет отправляться любая корреспонденция из контактной формы. (Contact Form 7 по умолчанию добавит адрес электронной почты, связанный с вашим сайтом).

Прокрутите вниз до раздела «Тело сообщения» и добавьте дополнительные теги формы, которые вы сгенерировали для своей формы. Это гарантирует, что при получении электронного письма через контактную форму в нем будет отображаться вся информация, которую вы просили отправителя поделиться.

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

И снова, не забудьте нажать на кнопку Сохранить.

Вставка контактной формы на сайт.

Теперь вы знаете, как настроить Contact Form 7, как создать новую форму и настроить параметры почты. Остался последний шаг – вставить форму на страницу или в запись на сайте.

Выберите Контакты — Контактные формы. Затем скопируйте шорткод рядом с формой, которую вы хотите добавить на свой сайт.

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

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

Заключение

Контактная форма является важной частью любого веб-сайта. И теперь вы знаете, как настроить Contact Form 7 и как легко добавить контактную форму на свой сайт. И всё бесплатно. Получая таким образом обратную связь и от своих читателей, и от потенциальных заказчиков или рекламодателей.

Ну а если у вас остались ещё вопросы, то задавайте их в комментариях и постараюсь на них ответить.

Статьи по теме:

Как настроить формы Contact Form 7 в WordPress

Вы хотите настроить формы Contact Form 7 на своем веб-сайте WordPress? Contact Form 7 — это плагин для создания форм, который может создавать формы для использования на вашем веб-сайте. Он бесплатный и является одним из самых популярных плагинов WordPress. Формы можно использовать на всем вашем веб-сайте и даже представлять их во всплывающем окне.

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

Сегодня я продемонстрирую, как настроить ваши формы в WordPress с помощью плагина Contact Form 7.

Зачем настраивать формы вашего веб-сайта

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

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

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

Как настроить контактную форму 7 в WordPress

Для форм контактной формы 7 доступно множество вариантов дизайна.Изменения можно вносить с помощью настраиваемого CSS в WordPress, но это не единственный способ.

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

Шаг 1. Установка Contact Form 7

Если вас не интересует использование метода CSS, вам также следует найти время и загрузить плагин Contact Form 7 Style. Поскольку это дополнительный плагин, вам нужно будет загрузить оба.

Начнем с того, что нажмем «Плагины» и выберем опцию «Добавить новый» на левой панели администратора.

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

Прокрутите вниз, пока не найдете плагин Contact Form 7, нажмите кнопку «Установить сейчас» и активируйте плагин для использования.

Шаг 2. Создание формы

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

В левой панели администратора нажмите «Контакт» и выберите «Контактные формы». В результате откроется главная страница настроек.

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

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

Шаг 3. Пользовательский метод CSS

Добавить собственный CSS в WordPress очень просто. Даже если вы не знаете CSS, вы можете найти множество примеров различных дизайнов форм в Интернете, которые можно скопировать на свой веб-сайт.

Прежде всего, внимательно следите за синтаксическими ошибками. Это может вызвать ошибки и привести к неожиданным результатам на ваших страницах. Если вы не знакомы с CSS, хороший способ проверить — использовать субдомен в качестве среды тестирования.

Фактически, это рекомендуется для любых серьезных изменений, внесенных на ваш сайт. Это действительно хороший метод.

В левой панели администратора нажмите «Внешний вид» и выберите «Настроить».

Щелкните параметр Дополнительный CSS слева. Здесь вы можете добавить собственный CSS на свой сайт. Вот пример, скопируйте и вставьте следующий код в поле Additional CSS: [ht_message mstyle = ”info” title = ”” show_icon = ”” id = ”” class = ”” style = ””] div.wpcf7 {
цвет фона: #fbefde;
граница: сплошная 1px # f28f27;
отступ: 20 пикселей;
}
.wpcf7 input [type = ”text”],
.wpcf7 input [type = ”email”],
.wpcf7 textarea {
background: # 725f4c;
цвет: #FFF; Семейство шрифтов
: lora, sans-serif; Стиль шрифта
: курсив;
}
.wpcf7 input [type = ”submit”],
.wpcf7 input [type = ”button”] {
background-color: # 725f4c;
ширина: 100%;
выравнивание текста: по центру;
преобразование текста: прописные;
} [/ ht_message]

Нажмите кнопку «Опубликовать», чтобы применить настраиваемый CSS.

Теперь вы можете просмотреть свою форму на своем веб-сайте, чтобы увидеть изменения. Пользовательский CSS — очень мощный инструмент, когда дело доходит до дизайна сайтов WordPress. Вы всегда можете обновить и внести изменения в CSS. Другими словами, вы можете изменять такие параметры, как цвета, поля и шрифты.

Если вы не знакомы с CSS, помните, что вы используете коды HTML для выбора цвета. Он имеет форму #FFFFFF, шестнадцатеричный формат, и есть много ресурсов, чтобы найти нужный цвет.Кроме того, это означает, что вы можете использовать большинство приложений для редактирования изображений, чтобы найти нужный шестнадцатеричный цвет.

Шаг 4: Метод стиля Custom Forms 7

Установите и активируйте плагин стиля Contact Form 7.

Этот плагин предлагает два варианта стилизации форм. Первые и самые простые в использовании — это готовые формы. К ним относятся праздничные и профессиональные шаблоны, из которых вы можете выбирать.

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

Теперь вы можете выбрать, какой шаблон использовать в вашей форме. Вы можете изменить это в любое время.

Второй способ — создать новый шаблон. В левой панели администратора нажмите «Стиль контакта» и выберите «Добавить новый».

На странице плагина Contact Form 7 Style есть очень подробное демонстрационное видео о том, как стилизовать форму. Вы можете изменить поля, цвет фона, цвет границы, цвет кнопки, цвет текстового поля и многое другое.Итак, плагин очень полезен, если вы не знакомы с CSS.

Функциональность превыше стиля

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

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

Например, многие новички не учитывают дальтоников. Правильно, вы можете подумать, что действительно умны, используя уникальные цвета, но они могут быть трудночитаемыми для этих людей, которые составляют от 5 до 10% населения США.

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

Создайте отличные формы для вашего веб-сайта

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

А плохой дизайн потенциально может увести посетителей с вашего сайта.

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

Какой метод вы использовали? Какой стиль вы выбрали для использования?

Material Design for Contact Form 7 — плагин WordPress

Формы

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

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

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

Contact Form 7 + Material Design в действии

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

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

• Использует новый материальный дизайн. Текстовые поля и поля выбора теперь представлены в виде рамок и рамок. Текстовые области теперь имеют внутреннюю метку. Посмотрите скриншоты ниже.
• Новые варианты кнопок. Повышенный (по умолчанию), не повышенный и очерченный.
• Лучшая поддержка браузера. IE11, iOS8 +, а также все современные браузеры.
• Пользовательский CSS теперь имеет подсветку синтаксиса.
• При желании вы можете продолжить использование оригинальных / устаревших стилей.

Контактная форма 7 может быть более интерактивной

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

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

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

Версия Pro:

• Настройка цветов и шрифтов
• Упорядочить поля по столбцам
• Превратите радиомодули и флажки в переключатели
• Добавить начальные значки к тексту и выбрать поля
• Сгруппировать поля в разделы с карточками
• Прямая поддержка по электронной почте

Вы можете в любой момент перейти на версию Pro, не выходя из WordPress.

Хорошо работает с другими плагинами:

• Контактная форма 7 Предварительный просмотр
• Mailchimp для WordPress
• Условные поля для контактной формы 7
• Контактная форма 7 Многоступенчатые формы
• Невидимая reCaptcha для WordPress (но не CF7 Invisible reCaptcha)
• Поле для многофайловой загрузки для контактной формы 7 (базовая поддержка)

Адаптивная контактная форма

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

Тип контактной формы

Material Design для контактной формы 7 по умолчанию применяет к вашей форме цвета и шрифты Material Design по умолчанию, но вы можете использовать настройщик WordPress, чтобы изменить шрифты и цвета по своему вкусу, если вы используете версию Pro.

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

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

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

Material Design — это набор руководящих принципов, составленных Google, в которых описывается, как ваш веб-сайт или приложение должны выглядеть и вести себя. Большинство приложений Google используют материальный дизайн, включая сам Android.

Нужна ли мне еще тема материального дизайна?

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

Чтобы узнать о других способах добавления Material Design на свой сайт WordPress (без изменения темы), см. WordPress Material Design.

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

Всю документацию можно найти, нажав «Help» (вверху справа на экране), а затем «Material Design» на экране редактора форм CF7.

Для получения более подробного руководства см. Как применить Material Design к контактной форме 7.

Мне это не подходит!

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

Этикетки маленькие

В некоторых темах есть CSS, что делает надписи очень маленькими. Вы можете исправить это в настройщике (Внешний вид> Настроить> Формы дизайна материалов), установив параметр для принудительного использования размеров шрифта по умолчанию.

«Материальный дизайн для контактной формы 7» — это программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

авторов

Как настроить контактную форму 7 для вашего сайта WordPress

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

Списки адресов электронной почты — это здорово, но что, если читатель или потенциальный клиент хочет связаться с вами напрямую? Вот здесь и пригодятся контактные формы! В этой статье мы расскажем, как настроить популярный плагин Contact Form 7 для вашего сайта WordPress.

Как установить контактную форму 7

Contact Form 7 существует с 2009 года, и за последнее десятилетие ее скачали более 5 миллионов раз. Контактную форму 7 можно установить прямо из репозитория плагинов WordPress. Если вы выполните поиск по запросу «контактная форма 7», вы сможете найти плагин вместе с различными надстройками.

Установите плагин Contact Form 7 из репозитория плагинов WordPress.

После установки плагина вы увидите пункт меню с надписью «Контакт» на боковой панели панели инструментов WordPress.Здесь можно настроить все параметры Contact Form 7.

Настройте параметры контактной формы 7.

Плюсы и минусы наличия контактной формы

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

Плюсы наличия контактной формы

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

Минусы наличия контактной формы

1. Спам может быть проблемой для общедоступных форм, таких как поля для комментариев и контактные формы.К счастью, с Contact Form 7 вы можете отфильтровывать спам с помощью reCAPTCHA. Вы даже можете настроить правило страницы Cloudflare, чтобы защитить себя еще больше. Мы подробно рассмотрим, как настроить защиту от спама в контактной форме 7, позже в этой статье.
2. После добавления контактной формы на свой сайт вам, вероятно, потребуется время, чтобы отвечать на сообщения. Это не обязательно плохо, в зависимости от того, как на это смотреть. Некоторые люди боятся отвечать на электронные письма, в то время как другим он искренне нравится.По нашему опыту, отношения, которые проявляются из-за наличия контактной формы на вашем сайте, обычно перевешивают затраты на модерацию, поэтому мы рекомендуем использовать ее!

Обзор настроек контактной формы 7

Создать контактную форму с помощью плагина Contact Form 7 очень просто. Чтобы начать, нажмите Контакт> Контактные формы на боковой панели WordPress. На этой странице вы можете просмотреть все свои контактные формы вместе со связанными с ними данными метаданных.

Контактная форма в контактной форме 7.

При первой установке контактной формы 7 также создается пример формы. Прежде чем мы перейдем к созданию настраиваемой контактной формы, давайте сначала рассмотрим пример формы, чтобы лучше понять, как работает Контактная форма 7. Нажмите Контактная форма 1 , чтобы просмотреть настройки формы.

Настройте контактную форму WordPress.

Страница «Редактировать контактную форму» разделена на четыре раздела.

1. Форма — Настройте свой HTML-шаблон контактной формы с различными параметрами полей, такими как «текст», «электронная почта», «флажки» и т. Д.Вы также можете написать собственный HTML-код в поле настройки формы.
2. Почта — Настройте шаблон электронной почты и параметры, используемые для электронных писем с уведомлениями.
3. Сообщения — Настройте сообщения, которые отображаются после определенных действий. Например, вы можете настроить уникальное сообщение, которое будет отображаться после того, как кто-то отправит контактную форму.
4. Дополнительные настройки — Укажите фрагменты для включения дополнительных функций, таких как режим только для подписчиков, демонстрационный режим и пропуск почты.

Теперь давайте подробнее рассмотрим каждый раздел и создадим индивидуальную контактную форму!

Вы знаете, что они говорят — держите своих друзей ближе, а аудиторию ближе … или что-то в этом роде. 😉
Оставайтесь на связи с посетителями сайта благодаря этому популярному плагину 👇Нажмите, чтобы твитнуть

Как создать контактную форму WordPress

Чтобы создать новую контактную форму, нажмите Добавить новый рядом с «Контактными формами».

Создайте новую контактную форму в Контактной форме 7.

Дайте новой контактной форме имя и нажмите «Сохранить».

Сохраните новую контактную форму WordPress.

В разделе «Форма» добавьте необходимый HTML-код для вашей контактной формы. Вы можете использовать различные предустановленные кнопки для создания шорткодов для популярных тегов форм. Чтобы упростить задачу, ознакомьтесь с описанием предустановленных тегов формы, которые поставляются с контактной формой 7.

, ниже.

• Текст — Создайте тег формы для одной строки текста. Текстовые поля полезны для имен, фамилий и других текстовых фрагментов, для которых не требуется несколько строк.
• Электронная почта — Создайте тег формы для адреса электронной почты.
• URL — Создайте тег формы для URL.
• Tel — Создайте тег формы для телефонного номера.
• Число — Создайте тег формы для числа. В отличие от полей ввода «текст» или «текстовая область», «числовые» поля допускают только числовые цифры.
• Дата — Создание тега формы для даты.
• Текстовая область — Создание тега формы для текстовой области.В отличие от обычного поля ввода «текст», поле «текстовая область» позволяет вводить несколько строк текста. Они идеально подходят для ввода текста сообщения.
• Раскрывающееся меню — Создайте тег формы для раскрывающегося меню.
• Флажки — Создание тега формы для флажков.
• Radio Buttons — Создайте тег формы для переключателей.
• Принятие — Создайте тег формы для флажка принятия.
• Quiz — Создайте тег формы для пары вопрос-ответ.
• Файл — Создайте тег формы для поля загрузки файла.
• Отправить — Создайте тег формы для кнопки отправки.

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

Тег формы «Текст»

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

Тег «текстовой» формы в контактной форме 7.

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

• Тип поля — Обязательное поле
• Имя — текст-711 (создается автоматически)
• Значение по умолчанию — Ваше имя (используется как текст-заполнитель по умолчанию)
• Akismet — Без проверки
• Атрибут идентификатора (CSS) — cf7-your-name
• Атрибут класса (CSS) — cf7-your-name

Эти настройки генерируют короткий код, указанный ниже.

  [text * text-711 id: cf7-your-name class: cf7-your-name placeholder "Your Name"]  

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

Тег формы «Электронная почта»

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

Тег формы «электронная почта» в контактной форме 7.

Для тега формы «электронная почта» мы настроили параметры, указанные ниже.

• Тип поля — Обязательное поле
• Имя — адрес электронной почты-632 (создается автоматически)
• Значение по умолчанию — Ваш адрес электронной почты
• Akismet — Не отмечен.
• Атрибут идентификатора (CSS) — ваш-адрес электронной почты
• Атрибут класса (CSS) — ваш-адрес электронной почты

Эти настройки генерируют короткий код, указанный ниже.

  [email * email-632 id: email class: email placeholder «Your Email»]  

Тег формы «URL»

В некоторых случаях вам может потребоваться поле ввода в вашей контактной форме для сбора информации о чьем-либо веб-сайте.Хотя технически вы можете использовать для этого в контактной форме 7 обычный тег «текстовой» формы, мы рекомендуем вместо этого использовать тег формы «URL». Тег формы «URL» сгенерирует поле ввода, которое проверяет URL-адреса, чтобы убедиться, что они правильно отформатированы.

Тег формы «URL» в контактной форме 7.

Для тега формы «url» мы настроили параметры, указанные ниже.

• Имя — url-601 (создается автоматически)
• Значение по умолчанию — Ваш веб-сайт
• Akismet — Не отмечен.
• Атрибут идентификатора (CSS) — cf7-your-website
• Атрибут класса (CSS) — cf7-your-website

Эти настройки генерируют короткий код, указанный ниже.

  [url url-601 id: cf7-your-website class: cf7-your-website «Your Website»]  

Тег формы «Tel»

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

Тег формы «tel» в контактной форме 7.

Для тега формы «tel» мы настроили параметры, указанные ниже.

• Имя — tel-842 (сгенерировано автоматически)
• Значение по умолчанию — Ваш номер телефона
• Атрибут идентификатора (CSS) — cf7-your-phone-number
• Атрибут класса (CSS) — cf7-your-phone-number

Эти настройки генерируют короткий код, указанный ниже.

  [url url-601 id: cf7-your-website class: cf7-your-website «Your Website»]  

Тег формы «Дата»

Тег формы «дата» в контактной форме 7

позволяет создать средство выбора даты в стиле календаря.Это поле ввода «дата» полезно для указания дат встречи в контактной форме.

Тег формы «дата» в контактной форме 7.

Для тега формы «дата» мы настроили параметры, указанные ниже.

• Имя — дата-389 (сгенерировано автоматически)
• Значение по умолчанию — Дата вашей встречи
• Диапазон — Наш настраиваемый диапазон дат.
• Атрибут идентификатора (CSS) — cf7-assign-date
• Атрибут класса (CSS) — cf7-assign-date

Эти настройки генерируют короткий код, указанный ниже.

  [date * date-389 min: 2020-09-15 max: 2020-10-24 id: cf7-assign-date class: cf7-assign-date placeholder «Your Appointment Date»]  

Тег формы «Textarea»

Тег формы «textarea» позволяет создать многострочное текстовое поле, которое позволяет посетителям отправлять более длинные сообщения. Текстовые поля наиболее удобны для записи тела сообщения.

Тег формы «textarea» в контактной форме 7.

Для тега формы «textarea» мы настроили параметры ниже.

• Имя — textarea-795 (сгенерировано автоматически)
• Значение по умолчанию — Ваше сообщение
• Атрибут идентификатора (CSS) — cf7-your-message
• Атрибут класса (CSS) — cf7-your-message

Эти настройки генерируют короткий код, указанный ниже.

  [textarea * textarea-795 id: cf7-your-message class: cf7-your-message placeholder «Ваше сообщение»]  

Тег формы «Раскрывающееся меню»

Тег формы «раскрывающееся меню»

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

Тег формы «раскрывающееся меню» в контактной форме 7.

Для тега формы «раскрывающееся меню» мы настроили параметры ниже.

• Имя — меню-24 (сгенерировано автоматически)
• Опции — Вариант 1, Вариант 2, Вариант 3, Вариант 4
• Разрешить множественный выбор — Проверено
• Вставьте пустой элемент в качестве первого варианта — Проверено
• Атрибут идентификатора — cf7-drop-down-menu
• Атрибут класса — cf7-drop-down-menu

Эти настройки генерируют короткий код, указанный ниже.

  [checkbox * checkbox-948 id: cf7-checkbox class: cf7-checkbox use_label_element «Вариант 1» «Вариант 2» «Вариант 3»]  

Тег формы «Флажок»

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

Тег формы «флажок» в контактной форме 7.

Для тега формы «флажок» мы настроили параметры, указанные ниже.

• Имя — флажок-948 (создается автоматически)
• Опции — Вариант 1, Вариант 2, Вариант 3
• Оберните каждый товар элементом этикетки — Проверено
• Атрибут идентификатора — cf7-checkbox
• Атрибут класса — cf7-checkbox

Эти настройки генерируют короткий код, указанный ниже.

  [checkbox * checkbox-948 id: cf7-checkbox class: cf7-checkbox use_label_element «Вариант 1» «Вариант 2» «Вариант 3»]  

Тег формы «Радио кнопки»

Тег формы «переключатели» позволяет создавать переключатели с несколькими вариантами. В отличие от флажков и раскрывающихся меню, переключатели позволяют выбрать только один вариант.

Тег формы «радио-кнопки» в контактной форме 7.

Для тега формы «радио-кнопки» мы настроили параметры ниже.

• Имя — радио-708 (сгенерировано автоматически)
• Опции — Вариант 1, Вариант 2, Вариант 3
• Оберните каждый товар элементом этикетки — Проверено
• Атрибут идентификатора — cf7-radio
• Атрибут класса — cf7-radio

Эти настройки генерируют короткий код, указанный ниже.

  [radio radio-708 id: cf7-radio class: cf7-radio use_label_element по умолчанию: 1 «Вариант 1» «Вариант 2» «Вариант 3»]  

Тег формы «Принятие»

Тег формы «принятия» в контактной форме 7

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

Тег формы принятия в контактной форме 7.

Для тега формы принятия мы настроили следующие параметры.

• Имя — приемка-545 (генерируется автоматически)
• Условие — Установите этот флажок, чтобы принять условия.
• Атрибут идентификатора — cf7-accept
• Атрибут класса — cf7-accept

Эти настройки генерируют короткий код, указанный ниже.

  [accept accept-545 id: cf7-accept class: cf7-accept] Установите этот флажок, чтобы принять условия. [/ accept]  

Тег формы «Викторина»

Тег формы «викторина» можно использовать для создания базовых вопросов и ответов в вашей контактной форме. Чтобы создать вопрос викторины, используйте следующий формат для разделения вопроса и ответа — Вопрос | Ответ. На скриншоте ниже наш вопрос: «В каком году был выпущен WordPress?», А ответ (разделенный символом «|») — 2003.

Тег формы «викторина» в контактной форме 7.

Для тега формы «викторина» мы настроили параметры, указанные ниже.

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили наш трафик более чем на 1000%?

Присоединяйтесь к 20 000+ другим пользователям, которые получают нашу еженедельную новостную рассылку с инсайдерскими советами по WordPress!

Подпишитесь сейчас

• Имя — quiz-461 (автоматически сгенерировано)
• Условие — Установите этот флажок, чтобы принять условия.
• Атрибут идентификатора — cf7-quiz
• Атрибут класса — cf7-quiz

Эти настройки генерируют короткий код, указанный ниже.

  [quiz quiz-461 id: cf7-quiz class: cf7-quiz «В каком году был выпущен WordPress? | 2003»]  

Тег формы «Файл»

Тег формы «файл» в

Contact Form 7 позволяет добавить функцию загрузки файлов в контактную форму. Это полезно в ситуациях, когда вы хотите, чтобы посетитель мог загрузить изображение или файл PDF для отправки вместе с формой.Например, если вы ведете блог о фотографии с фотогалереями, в которых публикуются гостевые материалы, вы можете добавить функцию загрузки файлов, чтобы люди могли загружать изображения.

В настройках тега формы вы можете указать различные параметры для защиты вашей формы. Мы рекомендуем всегда устанавливать ограничение на размер файла, чтобы злоумышленники не могли загружать огромные файлы. Точно так же указание «приемлемых типов файлов» помогает ограничить вашу форму форматами файлов, которые вы хотите и ожидаете. Имея в виду пример блога о фотографии, вы можете ограничить размер файла до 1 МБ (1024 КБ) и допустимые типы файлов только для известных форматов изображений, таких как JPG и PNG.

Тег формы «файл» в контактной форме 7.

Для тега формы «файл» мы настроили следующие параметры.

• Имя — файл-658 (автоматически сгенерировано)
• Ограничение размера файла — 1024 КБ
• Допустимые типы файлов — jpg | png | gif
• Атрибут идентификатора — cf7-файл
• Атрибут класса — cf7-файл

Эти настройки генерируют короткий код, указанный ниже.

  [предел файла 658: 1024 КБ, типы файлов: jpg | png | идентификатор gif: cf7-file class: cf7-file]  

Тег формы «Отправить»

И последнее, но не менее важное, это тег формы «отправки» в контактной форме 7.Как вы уже догадались, этот тег формы позволяет создать кнопку отправки для контактной формы.

Тег формы «отправить» в контактной форме 7.

Для тега формы «отправить» мы настроили параметры, указанные ниже.

• Наклейка — Отправить
• Атрибут идентификатора — cf7-submit
• Атрибут класса — cf7-submit

Эти настройки генерируют короткий код, указанный ниже.

  [идентификатор отправки: cf7-submit class: cf7-submit «Отправить»]  

Как структурировать контактную форму с помощью тегов формы

Теперь, когда у нас настроены все теги формы, пора создать контактную форму.На этом этапе настройки вашей контактной формы должны выглядеть, как на снимке экрана ниже. Обратите внимание на все теги формы, которые мы создали выше. Установив теги формы, вы можете использовать шорткод [contact-form-7] , чтобы встроить форму в сообщение или страницу WordPress.

Вставьте контактную форму с шорткодом contact-form-7.

В редакторе WordPress вставьте шорткод в пустой блок.

Добавьте шорткод Контактной формы 7 к сообщению или странице.

Если вы используете классический редактор WordPress, вы можете вставить шорткод в любом месте редактора контента.

Используйте контактную форму 7 с классическим редактором WordPress.

Теперь вы должны увидеть контактную форму на странице, на которой вы добавили шорткод Контактной формы 7. Вот как выглядит наша контактная форма с указанными выше настройками. Как видите, Contact Form 7 автоматически преобразует теги формы в допустимый HTML, который отображается с использованием стилей CSS по умолчанию, включенных в вашу тему WordPress.

Контактная форма, созданная с помощью Contact Form 7.

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

Как добавить метки формы в контактную форму 7

Есть два способа добавить метки к тегам формы Contact Form 7. Для тегов формы ниже вы можете просто обернуть тег формы тегом .

• Текст
• Электронная почта
• URL
• Тел.
• Число
• Дата
• Текстовая область
• Приемка
• Викторина
• Файл

Взгляните на пример тега «текстовой» формы ниже.

  [text * text-711 id: cf7-your-name class: cf7-your-name placeholder "Your Name"]  

Чтобы добавить метку к этому тегу формы, мы можем заменить тег формы приведенным ниже фрагментом. Обратите внимание на дополнительный экземпляр «Your Name» сразу после открывающего тега .

   Ваше имя
[text * text-711 id: cf7-your-name class: cf7-your-name заполнитель "Ваше имя"]
  

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

Добавьте метку к тегу формы в контактной форме 7.

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

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

  [checkbox * checkbox-948 id: cf7-checkbox class: cf7-checkbox  use_label_element  «Вариант 1» «Вариант 2» «Вариант 3»]  

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

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

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

Вот как выглядит наша контактная форма:

Контактная форма с ярлыками.

Настройка параметров почты в контактной форме 7

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

Чтобы получить доступ к настройкам доставки почты, перейдите в редактор контактной формы и выберите вкладку «Почта».

Параметры доставки почты в контактной форме 7. Параметры доставки почты в контактной форме 7

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

Contact Form 7 позволяет настроить следующие параметры доставки почты.

• To — адрес электронной почты, на который отправляется уведомление.
• От — адрес электронной почты, с которого отправляется уведомление.
• Тема — тема электронного письма с уведомлением.
• Дополнительные заголовки — указывает дополнительные заголовки электронной почты, такие как «ответ».
• Тело сообщения — тело электронного письма с уведомлением.
• Вложения файлов — укажите любые вложения, которые нужно включить в электронное письмо с уведомлением.

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

Поле «Кому»

Обязательно укажите реальный адрес электронной почты для параметра «Кому». По умолчанию Contact Form 7 назначает адрес электронной почты, связанный с вашей учетной записью WordPress, параметру «Кому». Если ваш адрес электронной почты WordPress недействителен, обязательно обновите его в настройках своего профиля, а также измените адрес электронной почты в контактной форме 7.

Поле «От»

Параметр «От» должен использовать следующий формат — Ваше имя . В настройках электронной почты контактной формы мы используем kinstalife <[email protected]> .

По умолчанию Контакт 7 заполнит это поле кодом [адрес электронной почты защищен] . Вы должны убедиться, что этот адрес электронной почты действительный, потому что некоторые хосты WordPress блокируют исходящую электронную почту на недопустимые адреса. Есть несколько способов сделать этот адрес электронной почты действительным.Вы можете либо создать специальную учетную запись электронной почты для [электронная почта защищена], либо включить функцию всеобъемлющего контроля у своего поставщика услуг электронной почты. Если вам не удается настроить этот адрес электронной почты, рекомендуем изменить его на действующий адрес электронной почты, чтобы избежать проблем с доставкой.

Поле «Тема»

Параметр «Тема» может использоваться для указания строки темы для уведомлений по электронной почте. По умолчанию Контактная форма 7 устанавливает тему как Имя сайта «[ваш-тема]» — имя темы в шаблоне формы Контактной формы 7 по умолчанию.

Если в вашей форме нет тега формы с именем «[your-subject]», не забудьте заменить его на что-нибудь другое. Например, если у вас есть только тег формы для записи имени посетителя (например, [your-name]), вы можете изменить строку темы на . Вы получили сообщение от [your-name] .

Поле «Дополнительные заголовки»

В разделе «Дополнительные заголовки» вы можете указать такие заголовки электронной почты, как «ответ», «Копия» и «Скрытая копия». По умолчанию контактная форма 7 добавляет следующий заголовок — Reply-To: [your-email] .Этот заголовок позволяет вам ответить на адрес электронной почты, указанный в отправленной контактной форме.

Заголовок ответа по умолчанию подходит, если вы используете тег формы электронной почты Contact Form 7 по умолчанию. Если это не так, обязательно измените его, чтобы он соответствовал имени тега формы электронной почты. Для нашей контактной формы имя тега формы электронной почты — «email-632», поэтому тег формы ответа необходимо изменить на Reply-To: [email-632] .

«Тело сообщения»

Далее идет «Тело сообщения», которое определяет содержание тела электронного письма с уведомлением.В шаблоне контактной формы 7 по умолчанию используются теги формы [your-name], [your-email], [your-subject] и [your-message], и ​​он выглядит так:

  От кого: [ваше имя]
Тема: [ваша-тема]
Тело сообщения:
[твое сообщение]
-
Это письмо было отправлено через контактную форму на сайте kinstalife (http://kinstalife.com)  

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

  Привет, Брайан, вы получили сообщение от [text-711] ([email-632]).Сайт: [url-601]
Номер телефона: Tel-842
Дата назначения: дата-389
Сообщение: textarea-795  

Настройте тело сообщения для уведомлений по электронной почте Contact Form 7.

Контактная форма 7 Настройки почты — Вложения файлов

Если ваша контактная форма предполагает загрузку файла, вы можете включить этот файл в электронное письмо с уведомлением. В нашей контактной форме у нас есть тег формы загрузки файла с именем «[file-658]». Таким образом, мы можем добавить этот тег формы в «Вложения файлов», чтобы гарантировать, что файл будет включен в уведомление по электронной почте.

Включите вложения файлов в электронные письма с уведомлением Contact Form 7.

Контактная форма 7 Проблемы с доставкой почты

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

1. Проверьте, отправляет ли ваш сервер другие типы писем. Чтобы проверить это, вы можете инициировать другое действие по доставке электронной почты, сделав тестовый комментарий к сообщению в блоге или отправив запрос на сброс пароля на странице входа в WordPress.Если вы получили электронное письмо после выполнения одного из этих действий, проблема, скорее всего, связана с настройкой контактной формы 7. Если вы не получаете электронные письма, обратитесь в службу поддержки своего хозяина и сообщите им, что у вас возникла проблема с доставкой электронной почты.
2. Убедитесь, что поля «Кому» и «От» в настройках доставки почты вашей контактной формы настроены правильно. Для правильной работы контактной формы 7 оба этих поля должны быть заполнены реальными адресами электронной почты.

Контактная форма 7 Сообщения об отправке формы

Contact Form 7 позволяет настраивать различные сообщения для отправки формы.Эти сообщения отображаются после выполнения определенного условия. Например, если посетитель забыл заполнить обязательное поле, в контактной форме 7 отобразится сообщение «Это поле обязательно». В большинстве случаев сообщения по умолчанию должны работать нормально. Однако, если вы хотите настроить сообщения, вы можете сделать это, щелкнув вкладку «Сообщения» в редакторе контактной формы.

Настроить контактную форму 7 ситуационных сообщений.

Как защитить вашу контактную форму

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

Защитите свою контактную форму 7 с помощью reCAPTCHA

Если вы когда-либо отправляли форму в Интернете, вы, вероятно, уже знакомы с reCAPTCHA, технологией, разработанной Google для определения автоматического поведения ботов. В более старых версиях reCAPTCHA (V2) пользователи должны были пройти головоломку или испытание.

Последняя версия reCAPTCHA (V3) не требует взаимодействия со стороны пользователей. Вместо этого он прозрачно отслеживает активность пользователей в фоновом режиме, чтобы различать посетителей-людей и ботов. Поскольку Contact Form 7 поддерживает reCAPTCHA V3, мы рекомендуем использовать эту последнюю версию, поскольку она обеспечивает лучший пользовательский интерфейс для посетителей.

Чтобы настроить reCAPTCHA, вам сначала нужно сгенерировать ключ API. Для этого войдите в свою учетную запись Google и перейдите на страницу настройки reCAPTCHA.

Зарегистрируйте новый сайт для интеграции reCAPTCHA.

Пройдите через регистрационную форму, чтобы создать reCAPTCHA.

• Этикетка — Укажите этикетку по вашему выбору.
• Тип reCAPTCHA — Contact Form 7 поддерживает reCAPTCHA v3, поэтому выберите эту версию.
• Домены — Если ваш сайт использует корневой домен, добавьте версию своего домена без www и www. Если ваш сайт использует субдомен, просто добавьте субдомен.
• Владельцы — Адрес электронной почты, связанный с вашей учетной записью Google, будет добавлен в качестве владельца по умолчанию.Не стесняйтесь добавлять дополнительные адреса электронной почты, если это необходимо.

После того, как вы заполнили все параметры, нажмите Отправить . Затем вам будут представлены «ключ сайта» и «секретный ключ» для вашего сайта. Обязательно храните эти ключи в надежном месте, потому что вам нужно будет добавить их в контактную форму 7.

Сайт Google reCAPTCHA и секретные ключи.

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

Настройте reCAPTCHA в контактной форме 7.

После настройки reCAPTCHA в контактной форме 7 вы увидите логотип reCAPTCHA в правом нижнем углу страницы контактной формы. Это означает, что reCAPTCHA активна и защищает вашу контактную форму от спама.

Контактная форма WordPress защищена reCAPTCHA V3.

Защитите свою контактную форму с помощью Cloudflare (необязательно)

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

Защитите свою контактную форму с помощью Cloudflare.

Чтобы добавить правило страницы, щелкните вкладку «Правила страницы» и используйте следующие настройки, чтобы защитить свою страницу контактов.

• Если URL совпадает — * your-domain.com / your-contact-page / *
• Проверка целостности браузера — на
• Уровень безопасности — Высокий

Функция Cloudflare «Проверка целостности браузера» анализирует заголовки HTTP. Если он обнаруживает заголовок HTTP, который обычно используется автоматическими ботами и спамерами, он отклоняет запрос к вашему сайту.Установка «Высокого уровня безопасности» бросит вызов всем посетителям, которые проявляли злонамеренное поведение в течение последних двух недель.

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

Не оставляйте аудиторию на прочтении. 👀 Поддерживайте прямой контакт со своими читателями и потенциальными клиентами через плагин Contact Form 7 ⬇️Нажмите, чтобы твитнуть

Сводка

Contact Form 7 — самый популярный плагин для контактной формы, и не зря! Его можно использовать для создания всего: от базовых контактных форм до опросов типа «вопрос-ответ» и до сложных форм, поддерживающих вложения файлов и раскрывающиеся меню.

Лучше всего то, что он поставляется со встроенной поддержкой reCAPTCHA, которая помогает защитить вашу контактную форму от спамеров.

Вы используете контактную форму 7 на своем сайте WordPress? Если нет, то что вы предпочитаете? Дайте нам знать в комментариях ниже!

Экономьте время, деньги и повышайте производительность сайта с помощью:

• Мгновенная помощь от экспертов по хостингу WordPress, 24/7.
• Интеграция Cloudflare Enterprise.
• Глобальный охват аудитории с 29 центрами обработки данных по всему миру.
• Оптимизация с помощью нашего встроенного мониторинга производительности приложений.

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

Контактная форма 7 | Themeco Docs

Contact Form 7 — один из самых популярных плагинов форм WordPress. Он позволяет создавать контактные формы и добавлять их на любую страницу вашего веб-сайта с помощью сгенерированного шорткода.

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

Вы просто создаете форму, и после публикации вы получите сгенерированный шорткод, например:

Затем вам просто нужно поместить этот шорткод на любую страницу.

Вот и все!

Давайте немного углубимся …

Начало работы

Перейти к
Pro> Подтвердите , затем найдите Контактную форму 7 .Щелкните Установить .

Затем перейдите к Plugins , найдите Contact Form 7 и нажмите Activate.

После того, как вы установили и активировали контактную форму 7, вы увидите дополнительный пункт меню на панели инструментов WordPress под названием Contact . Нажав на Контакт> Контактные формы , вы сможете увидеть свой список контактных форм.

По умолчанию Контактная форма 7 уже создает для вас одну контактную форму.

Объяснение экрана администратора

Страница списка

На приведенном выше снимке экрана показана область, в которой перечислены ваши контактные формы.

Как обсуждалось ранее во введении, значение под
Шорткод Столбец — это код, который необходимо прикрепить для отображения формы во внешнем интерфейсе.

Чтобы добавить новую контактную форму, просто нажмите кнопку «Добавить» вверху страницы.

Добавление / редактирование контактной формы

Когда вы добавляете или редактируете контактную форму, вы увидите следующее:

Есть 4 основных элемента, о которых стоит упомянуть

• Заголовок — Совершенно очевидный и распространенный в WordPress.
• Вкладки — Есть 4 вкладки, каждая из которых имеет собственное назначение: Форма, Почта, Сообщения и Дополнительные настройки. Мы подробно обсудим каждый из них позже.
• Кнопка «Дублировать» — Позволяет легко создать точную копию текущей формы. Это появляется только в режиме редактирования, но не при добавлении нового.
• Кнопка «Сохранить»

Если вы знакомы с HTML, вы знаете, что почти все, что вы можете увидеть на веб-странице, находится там, потому что был размещен «тег» HTML.Контактная форма 7 также имеет собственные теги для отображения элементов формы. Есть один тег для ввода текста, другой тег для кнопки отправки, затем еще один для ввода электронной почты, текстовое поле и еще один для раскрывающегося списка.

Все теги Contact Form 7 заключены в квадратные скобки.
[] . Ниже приведен пример:

[заполнитель текста для вашего имени «Введите свое имя»]

При этом отображается поле ввода текста с заполнителем, в котором говорится: «Введите свое имя».«

Вот еще один — на этот раз раскрывающийся список:

[выберите меню-707« Биллинг »« Техническая поддержка »« Продажи »« Другое »]

Этот код создает этот элемент раскрывающейся формы.

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

1. Допустим, вы хотите добавить текстовое поле, в которое люди могут вводить свои сообщения. Просто нажмите кнопку «Текстовая область»

2. При необходимости введите данные.

3. Нажмите «Вставить тег»

Вот и все!

Если вы хотите узнать больше о том, как работают теги, посетите веб-сайт Contact Form 7 здесь.

Редактирование шаблона формы

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

• Ввод текста для имени
• Ввод текста для адреса электронной почты
• Область текста для сообщения
• Кнопка «Отправить»

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

Важно отметить, что вы можете свободно добавлять HTML-коды в редактор шаблонов контактной формы. Вы заметите, что в шаблоне по умолчанию используется
HTML-тег. Вы можете добавить туда практически любой HTML-тег, будь то div, span, p, h2, table и т. Д.

Это дает вам свободу диктовать, как будет располагаться форма.

Настройка почты

Вот как выглядит вкладка «Почта»:

Кому

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

From

Не путайте, что «От» — это имя и адрес электронной почты человека, заполнившего и отправившего форму. Обычно «От» — это адрес электронной почты администратора вашего сайта WordPress, но это не совсем так.

Тема

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

Хотите добавить CC и BCC в свои электронные письма? Добавьте их в это поле.

Тело сообщения

Это фактическое тело письма. Но этим не ограничивается. Вы можете указать здесь адрес электронной почты отправителя. Собственно, это и есть настройка по умолчанию для Контактной формы 7.

Вы увидите текст, в котором говорится
«В следующих полях вы можете использовать эти почтовые теги.»

Это означает, что вы сможете использовать теги, созданные на
Форма вкладка и примените их к полям на вкладке Почта .Например, в поле «Тема» вы увидите тег [your-subject] .

[ваш-тема] получено из вкладки Form .

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

О вкладке Почта можно подробнее прочитать
здесь.

Редактирование сообщений

На
Сообщения Вкладка, вы сможете изменить сообщения об ошибках и успехах. Вы можете указать, какое сообщение будет отображаться после успешной отправки, а другое — в случае неудачи. Вы можете указать, какое сообщение будет отображаться: введенный адрес электронной почты недействителен, другое сообщение, если формат даты, введенный в поле даты, недействителен и т. Д.

Чтение описания каждого поля сообщения сразу же прольет свет на то, для чего оно будет использоваться .

Для получения дополнительной информации о редактировании сообщений,
эту статью стоит прочитать.

Дополнительные настройки

Хотите ограничить использование контактной формы только зарегистрированными подписчиками? Хотите, чтобы при отправке формы отображалось всплывающее сообщение? Эти и многие другие можно установить на вкладке Additional Settings .

Contact Form 7 содержит краткое обсуждение доступных настроек в этой статье.

Как использовать контактную форму 7 в Cornerstone / Content Builder

Откройте страницу с помощью Cornerstone или Pro Content Builder.

После открытия на
Вкладка Elements. найдите «Контактную форму 7» и перетащите ее на панель содержимого Cornerstone / Content Builder.

Затем выберите контактную форму, которую хотите добавить. Если у вас только одна форма, выбирать не нужно.

Сводка

Вот и все! Вы узнали, как создавать контактные формы с помощью Контактной формы 7 и для чего предназначена каждая вкладка на странице добавления / редактирования поля. Наконец, вы узнали, как добавлять наши формы в Cornerstone / Content Builder с помощью элемента Contact Form 7.

Заметили что-то неточное? Сообщите нам

Как использовать контактную форму 7 с Elementor [+ видеогид]

Вы когда-нибудь сталкивались с проблемами при обращении к властям?

Ответ утвердительный, не так ли?

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

Недавно компания Drift провела исследование о важности общения с клиентами. Результат показывает, что продажи сократились в 10 раз только потому, что компания не ответила в течение 5 минут.

Итак, что будет, если у вас нет контактной формы? Вы можете потерять более 90% своих клиентов. Вы хотите потерять своих клиентов?

Не думаю!

Итак, как можно решить эту проблему?

Ну все просто! Просто добавьте контактную форму на свой сайт, и все готово!

В этом разделе я расскажу о самой простой процедуре создания контактной формы с помощью контактной формы Elementor 7.

Давай!

Как создать форму с помощью Elementor Contact Form 7

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

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

Готово с установкой? Пора приступить к разработке контактной формы Elementor. Поехали.

Шаг 1: погрузитесь в холст

Войдите в панель администратора вашего сайта. Создайте пустой пост и назовите его. После присвоения имени нажмите кнопку « Edit with Elementor ».

Создание холста

Шаг № 2: Добавьте контактную форму в свой пост

А теперь пора добавить контактную форму в сообщение в блоге.Вы можете сделать это, просто перетащив значок «контактная форма 7» в свое сообщение. В вашем сообщении автоматически появится контактная форма.

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

Добавление контактной формы

Шаг 3. Типографский стиль

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

Стилизация типографики

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

Шаг 4: Настройка области ввода

Помимо настройки текстовой области, вы также можете изменить поле ввода. ElementsKit позволяет настраивать отступы, ширину, высоту поля ввода, высоту текста и нижнюю границу поля ввода.

Настройка поля ввода

Шаг 5: Настройка фона области ввода

К этому времени мы закончили разработку наших текстов и индивидуальных текстов нашей контактной формы Elementor.Теперь мы изменим цвет фона, дизайн, тень и т. Д. Нашей текстовой области.

Настройка области ввода

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

Следует отметить: все эти действия можно выполнять как для параметров наведения, так и для параметров фокусировки.Здорово, правда?

Шаг 6: изменение кнопки отправки

Итак, мы находимся в последнем разделе разработки нашей контактной формы. Да, вы поняли! Здесь мы изменим кнопку «Отправить».

ElementsKit позволяет изменять выравнивание, типографику, радиус границы, поля, отступы, цвет, тень блока, тень текста, тип границы и т. Д.

Настройка кнопки отправки

И все! Мы только что завершили разработку нашей контактной формы.Надеюсь, вы тоже без проблем выполнили дизайн.

Проектирование контактной формы Elementor с помощью ElementsKit Layout

В этом разделе я покажу вам процесс добавления контактной формы к вашему сообщению с помощью макета ElementsKit.

Чтобы еще больше упростить процесс, я также добавлю видеоурок. Надеюсь, это вам поможет. Теперь давайте сосредоточимся на руководстве.

Шаг № 1: Вставка формы

Сначала выберите дизайн контактной формы из библиотеки макетов ElementsKit .Перейдите к значку ElementsKit> Раздел> Контактная форма.

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

Вставка контактной формы из макета

Шаг № 2: Настройка контактной формы

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

К счастью, процесс настройки на 100% похож на предыдущий. Следуйте предыдущей процедуре, начиная с шага № 3, и у вас все получится.

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

Вот и все! Надеюсь, вы успешно добавили контактную форму Elementor на свою веб-страницу. Создание формы с помощью Contact Form 7 и ElementsKit — самый простой процесс, не говоря уже о времени.

Важность использования контактной формы

Пример Venture Harbor показывает, что они повышают коэффициент конверсии примерно на 743% только за счет оптимизации своих веб-форм. Вы также можете увеличить свои продажи, просто введя соответствующую контактную форму.

Давайте рассмотрим еще несколько важных моментов использования контактной формы на вашем веб-сайте.

1. Профессионализм

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

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

Кстати, если вы хотите автоматически создавать высококонвертируемую веб-форму, вы можете использовать плагин MetForm. У нас есть много готовых премиум-форм на MetForm. Просто выберите один и настройте его.

Чтобы создать профессионально оформленную веб-форму с помощью MetForm, потребуется не более нескольких минут.

2. Удобство для пользователя

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

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

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

3. Увеличение продаж

Успешное ведение бизнеса — непростая задача. Надо много работать и душой, чтобы улучшить свой бизнес. Вы можете быть удивлены, узнав, что вы можете увеличить продажи, только быстрее отвечая на запросы клиента.

Вы знаете, продажи сильно зависят от скорости отклика. В отчете говорится, что вам придется столкнуться с 10-кратным снижением продаж, если вы не ответите на запрос клиента в течение 5 минут.

Но можно держать любого человека доступным 24 часа в сутки 7 дней в неделю. В этом случае вам очень поможет контактная форма. Он поддерживает коммуникационный мост между клиентами и владельцами веб-сайтов.

Если вы создадите красивую контактную форму на своем веб-сайте, потребители обязательно воспользуются ею и свяжутся с владельцем.

4. Защититесь от спама

Раскрытие вашего адреса электронной почты или номера телефона непосредственно на веб-сайте увеличивает вероятность спама. Доступны тысячи ботов, которые постоянно сканируют Интернет, чтобы собрать открытые электронные письма.

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

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

Контактная форма 7 автоматически отфильтрует реальные сообщения из ящика для спама. Кроме того, вы также можете добавить некоторые проверки безопасности, такие как reCAPTCHA, фильтрация ботов и т. Д.

5. Организуйте свои контакты

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

6. Доступность

Большинство владельцев бизнеса используют свои профили в социальных сетях для общения с клиентами. Что ж, это может быть хорошей платформой для любителей социальных сетей. Но как насчет клиентов, которые не проявляют активности в социальных сетях?

Ты их точно потеряешь. Вот почему всегда предпочтительно общаться с потребителями самостоятельно. И правильная страница контактов создает мост между потребителями и владельцем бизнеса.

Заключение

Мы собираемся покинуть страницу. К этому времени вы должны хорошо знать контактные формы, важность контактной формы и процесс добавления контактной формы на свой веб-сайт.

Чего вы ждете? Добавьте контактную форму Elementor сегодня и развивайте свой бизнес. Если у вас возникли какие-либо затруднения относительно этого процесса, не стесняйтесь обращаться к нам через нашу страницу «Контакты».

Не позволяйте разрыву в общении создавать барьер между вами и вашими клиентами.

Примеры использования

Contact Form 7 / SoCanny

В комплекте:

1. Установите и настройте CF7
   1. Форма по умолчанию
   2. Встроенная форма
2. Сохраните данные формы в WP и экспортируйте в CSV
3. Форма перенаправления на страницу благодарности
4. Условные поля
5. Отметьте, чтобы согласиться перед отправкой
6. Pre- заполнение других форм данными CF7
7. Многоступенчатые формы

1. Установите и настройте CF7

скачать и установить: https: // wordpress.org / plugins / contact-form-7/

после активации вы увидите это на панели инструментов WP:

у вас будет одна предустановленная контактная форма; редактор формы выглядит так:

сначала вы должны отредактировать код формы в поле редактора; есть много типов полей формы на выбор; для получения дополнительной информации прочтите это: https://contactform7.com/text-fields/ и это: https://contactform7.com/checkboxes-radio-buttons-and-menus/

а. Форма по умолчанию

Стандартная форма, которая выглядит так:

будет иметь следующий код:

 Ваше имя (обязательно)
    [текст * ваше имя заполнитель "Имя"] 
 Ваш адрес электронной почты (обязательно)
    [email * ваш-адрес электронной почты заполнитель «Электронная почта»] 
<метка> Тема
    [введите заполнитель для вашей темы "Тема"] 
 Ваше сообщение
    [текстовое поле вашего сообщения заполнитель "Сообщение"] 
[отправить «Отправить»] 

Чтобы разбить его, поле работает так:

Ваше имя… — Это метка формы. Вы можете удалить его и получить такой код:

[текст * ваше имя заполнитель "Имя"]
[email * ваш-адрес электронной почты заполнитель «Электронная почта»]
[введите заполнитель для вашей темы "Тема"]
[текстовое поле вашего сообщения заполнитель "Сообщение"]
[отправить «Отправить»] 

Что выведет эту форму:

текст * — это тип поля. * означает, что поле обязательно для заполнения.

your-name — ID поля. Это будет использоваться для хранения данных и отправки их на вашу электронную почту.

заполнитель «Имя» — текст заполнителя. Удалите это, чтобы получить форму без заполнителей.

г. Встроенная форма

Встроенные формы обычно выглядят так:

Этот макет больше подходит для форм с меньшим количеством полей и без меток. Код выглядит так:

  

    [текст * ваше имя заполнитель "Имя"]
  
  

    [email * ваш-адрес электронной почты заполнитель «Электронная почта»]
  
  [отправить «Отправить»]
 

Чтобы настроить сообщение, которое вы получите после отправки формы, перейдите на вкладку почты:

Кому — введите здесь свой адрес электронной почты

From — [your-name] — это имя, которое пользователь заполняет в форме; обратите внимание, что идентификаторы здесь должны быть такими же, как в коде формы; является отправляющим электронным письмом, это может быть любой адрес электронной почты @ your-domain.com и адрес электронной почты не обязательно должен существовать. @ socanny.com>

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

Вкладка «Сообщения» позволяет редактировать все сообщения об успешном выполнении / ошибке / проверке.

Чтобы добавить форму на страницу, просто создайте элемент текстового блока и вставьте туда шорткод формы:

Форма

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

2. Сохраните данные формы в WP и экспортируйте в CSV

Установите этот плагин: https://wordpress.org/plugins/contact-form-cfdb7/

После каждой отправки формы данные будут сохраняться в виде настраиваемых сообщений:

3. Форма перенаправления на страницу благодарности

Установите этот плагин: https://wordpress.org/plugins/wpcf7-redirect/

Вы увидите новую вкладку в редакторе формы:

Используйте это для информации на странице благодарности.

4. Условные поля

Установите этот плагин: https: // wordpress.org / plugins / cf7-conditional-fields /

Документация по плагину

на самом деле очень хорошо сделана, поэтому, пожалуйста, прочтите ее перед использованием.

5. Отметьте, чтобы согласиться перед отправкой

Добавьте это в свой код формы прямо над кнопкой отправки:

[принятие вашего согласия] Я согласен с условиями. [/ accept] 

Для получения дополнительной информации прочтите документацию здесь: https://contactform7.com/acceptance-checkbox/

6. Предварительно заполните другие формы данными CF7

Установите этот плагин: https: // wordpress.org / plugins / wpcf7-redirect /

Установите флажок «Передавать поля как параметры URL-запроса» и отправьте страницу перенаправления в следующую форму. Используйте параметры запроса для предварительного заполнения следующей формы.

7. Многоступенчатые формы

Установите этот плагин: https://wordpress.org/plugins/contact-form-7-multi-step-module/

1. Создайте одну страницу или публикацию для каждого шага в многоэтапном процессе создания формы. Если у вас 3 шага, создайте 3 страницы / сообщения. Вам понадобятся URL-адреса для создания ваших форм.
2. Создайте форму Contact Form 7.
3. Поместите курсор в конец формы.
4. На вкладке «Форма» формы Contact Form 7 нажмите кнопку с названием «многошаговый».
5. Во всплывающем окне введите текущий шаг и общее количество шагов в многоэтапном процессе. Например, если это первая форма из трех, введите «1» для текущего шага и «3» для общего количества шагов. Если это последняя форма в вашем процессе, введите «3» для текущего шага и «3» для общего количества шагов.
6. URL-адрес следующей страницы — это URL-адрес следующей формы. Если эта форма является последним шагом, вы можете оставить поле URL пустым или заполнить его, чтобы перенаправить пользователя на другую страницу.
7. Нажмите «Вставить тег».
8. Сохраните заполненную форму и поместите шорткод формы на соответствующую страницу / сообщение, созданное на шаге 1.
9. Повторите для каждую форму в многоэтапном процессе.
10. Только последний шаг отправит электронное письмо. Чтобы включить поля из других форм, просто введите почтовые теги из других форм.Например, если ваша первая форма имеет поле ваш-адрес электронной почты , вы можете включить [ваш-адрес электронной почты] во вкладку Почта в последней форме.

Контактная форма 7 Альтернатива, которую вы искали

Нельзя говорить о формах WordPress и не упоминать контактную форму 7. Она существует с первых дней и проложила путь для новых плагинов для построения форм. Этот конструктор форм WordPress все эти годы предоставляет услуги бесплатно.

На протяжении своего пути Contact Form 7 накапливала и продолжает накапливать поклонников.У него были свои золотые дни. Но свет гаснет. Ограниченные возможности и сложный интерфейс утомляют даже самых лояльных пользователей.

Этот мощный плагин быстро оказывается неадекватным в современном мире, и пользователи ищут альтернативу Contact Form 7, которая сможет идти в ногу с меняющимися тенденциями. Итак, мы перечислили некоторые эффективные плагины для создания форм WordPress, на которые вам стоит обратить внимание.

Почему людям понравилась Контактная форма 7

Контактная форма 7 является флагманом построения форм WordPress.Это один из первых плагинов, появившихся на рынке, и он по-прежнему преобладает. Он настолько популярен, что со временем вокруг него появилось расширение аддонов Contact Form 7.

Несмотря на быстрый рост плагинов для создания форм WordPress, устаревшая Contact Form 7 по-прежнему сохраняет свои позиции, поскольку обеспечивает особый комфортный стиль. В то время как большинство конструкторов форм предоставляют естественные функции, Contact Form 7 имеет довольно технический подход. Вы можете стилизовать его как хотите с помощью CSS и HTML Contact Form 7 и использовать классы начальной загрузки HTML для выравнивания по сетке.

Это плагин для создания базовых форм. Но когда вы его используете, у вас возникает ощущение, что вы владеете своими формами и создаете их с нуля. Это успокаивает определенную группу пользователей, и именно для них Contact Form 7 по-прежнему преобладает на рынке.

Почему люди ищут альтернативу контактной форме 7

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

Более того, Contact Form 7 значительно ограничена и в функциональности. Он обеспечивает практически нулевую интеграцию и не имеет даже самых базовых функций, таких как условная логика, перетаскивание и т. Д. Чтобы иметь достойный опыт создания форм, вам необходимо установить внешние надстройки Contact Form 7. Как ни странно, вам даже понадобится внешний аддон, если вам нужна поддержка с плагином.

Из-за всех этих причин, в сочетании с тем фактом, что рынок плагинов WordPress переполнен надежными конструкторами форм, многие пользователи переключились на альтернативу Contact Form 7.

Контактная форма 7 Альтернатива, вы можете пойти на

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

Итак, если вы также ищете альтернативу Contact Form 7, читайте дальше.

Гравитационные формы

Gravity Forms

Одной из самых доступных и надежных альтернатив Contact Form 7 является гигантская веб-форма Gravity Forms. Вы можете легко использовать этот плагин WordPress, чтобы не терять потенциальных клиентов и развивать свой бизнес.Благодаря инструментам и функциям, экономящим время, Gravity Forms упрощает создание и публикацию онлайн-форм.

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

Тем не менее, Gravity Forms остается далекой вещью для многих пользователей.Их базовая лицензия начинается с 59 долларов только для одного сайта, и ваша лицензия будет действительна только в течение года. Это слишком высокая цена только для некоторых избранных функций, таких как загрузка файлов, условная логика и т. Д. И если вы хотите, чтобы в ваших руках были дополнения Gravity Forms, вам придется перейти на более высокие лицензии.

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

Свободные формы

Fluent Forms

Если вы ищете интуитивно понятную альтернативу Contact Form 7, тогда вам подойдет Fluent Forms. Этот относительно новый плагин для создания форм покорил рынок благодаря своим постоянно развивающимся функциям и дружественному интерфейсу. Этот плагин WordPress охватывает все: от перетаскивания до визуальных отчетов по данным и хуков действий для разработчиков.

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

Вы можете разбить длинные утомительные формы с помощью Step Forms и сделать их более интерактивными с помощью Calculated Fields. Вы также сможете собирать платежи и пожертвования благодаря интеграции Stripe и PayPal.

Кроме того, в одностраничной базе данных можно запланировать и ограничить ввод форм, а затем отсортировать их. Или используйте надстройку PDF Fluent Forms, если хотите. Есть множество способов защитить ваши формы.Однако, будучи новинкой на рынке, плагин для создания форм по-прежнему не имеет некоторых ключевых функций. Но он быстро набирает популярность и хорошо конкурирует с другими преобладающими строителями форм.

Формы ниндзя

Ninja Forms

Ninja Forms — очень удобная альтернатива Contact Form 7. Вы можете легко создавать эффективные формы WordPress, используя этот плагин для создания форм. И с нулевыми навыками программирования. Интерфейс прост для навигации с его полями перетаскивания, удобными макетами строк и столбцов, многостраничными формами и т. Д.

Более того, с умелой условной логикой Ninja Forms создание красивых сложных форм также становится очень простым. Пользователи могут легко загружать файлы и делиться своими записями форм с определенными людьми в виде файлов PDF, Excel, Google Таблиц и т. Д. Кроме того, вы также можете безопасно собирать платежи с помощью Ninja Forms.

Однако цены на Ninja Forms кажутся проблемой для многих пользователей WordPress. Хотя на первый взгляд это кажется дешевым и доступным плагином, он быстро становится дорогим.Множество основных функций, таких как условная логика Ninja Forms, загрузка файлов, макет и т. Д.

Кроме того, они даже продают дополнения Ninja Forms отдельно. У чего могут быть благородные намерения, но когда вы добавляете нужные дополнения, вы получаете внушительный счет. Следовательно, люди часто вынуждены искать альтернативы Ninja Forms.

WPForms

WPForms

WPForms — искусная альтернатива контактной форме 7. У него огромный пул доверенных пользователей. Они предоставляют более 100 шаблонов форм, которые помогут вам создавать привлекательные и удобные онлайн-формы.Эти веб-формы на 100% адаптивны, поэтому пользователи могут использовать их на любой платформе, какой захотят.

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

Однако эти доступные функции могут быть не для всех.Версия Lite накладывает некоторые жесткие ограничения на полезные функции. Некоторые пользователи также сталкиваются с проблемами при управлении записями и загрузке нескольких файлов. Вам придется перейти на премиум-версию, которая может обойтись вам до 599 долларов всего за год.

Грозные формы

Formidable Forms

Если вы ищете альтернативу умной контактной форме 7, вы можете проверить Formidable Forms. С помощью простого перетаскивания, условной логики, загрузки файлов, вычислений и т. Д. Вы можете быстро создавать мощные онлайн-формы и собирать данные.

Одной из интересных особенностей Formidable Forms является то, что вы можете отображать свои данные с помощью графиков. Это значительно помогает принимать решения на основе данных. Кроме того, есть повторяющиеся поля, динамические поля и т. Д. Вы также можете изменять свои записи в списках, каталогах и т. Д. Также имеется подробная документация по Formidable Forms на случай, если пользователи столкнутся с какими-либо трудностями.

Formidable Forms может быть простым решением для создания здания, но здесь нужно научиться. Любой новичок может столкнуться с трудностями в освоении интерфейса.Что еще хуже, это требует некоторых знаний HTML и CSS.

Кроме того, при стартовой цене в 149 долларов вы можете почувствовать необходимость обновления из-за отсутствия функциональных возможностей. Лицензии доступны на годовой основе. Таким образом, периодические расходы также представляют собой небольшую проблему.

FormCraft

FormCraft

Альтернативой смарт-контактной форме 7 является FormCraft. Он включает в себя великолепный дизайн, множество шаблонов форм, надстройки и т. Д. Вы можете использовать этот плагин для создания форм WordPress, чтобы быстро создавать веб-формы и масштабировать свой бизнес.

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

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

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

Form Maker от 10web

Form Maker от 10web

Form Maker от 10web — надежная альтернатива контактной форме 7 с возможностью перетаскивания. Вы можете использовать это для создания быстрых, отзывчивых веб-форм для своего веб-сайта и легко встраивать их в блоги. Кроме того, вы также можете использовать свои веб-формы как всплывающие окна, верхние панели или полосы прокрутки.

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

Хотя Form Maker от 10web — отличный плагин для WordPress, у него есть некоторые ограничения. Этот плагин предлагает множество основных функций, таких как калькулятор, экспорт / импорт, условная рассылка и т. Д.как интеграции.

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

Короче

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

Contact Form 7 разочаровал пользователей в этом отношении. Но многие другие плагины приняли к сведению и продолжают предоставлять полезные функции по доступной цене. Все перечисленные выше плагины WordPress являются отличными альтернативами Contact Form 7.

Но прежде чем принять решение, учтите следующее.

• Дружественный интерфейс
• Простая функциональность
• Множество интеграций
• Поддержка
• Цена по цене

Если вы хотите опробовать плагин перед принятием решения, вы можете попробовать бесплатную версию Fluent Forms из Репозиторий WordPress.Он также хорошо справляется с анализом Contact Form 7 и Fluent Forms. Попробуйте и расскажите нам о своем опыте в комментариях ниже.

.