Contact form 7 wordpress готовые стили css

Из выпадающего списка выберем элемент «Текстовое поле»

Если любая функция которую добавляете обязательна — поставьте галочку 1 и не забудьте от этом написать в описании.

Можно в поле ввода добавить дополнительную информацию, чтобы сделать более понятным заполнение формы. Отметьте галочкой пункт 2 «Использовать как заполнитель (placeholder)?» и рядом в поле впишите подсказку. При заполнении этого поля в форме текст подсказки исчезнет. Дальше следуйте подсказкам плагина. В результате получится такое вот поле в готовой форме:

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

E-mail

Используется для передачи в форму адреса почтового ящика отправителя

URL

Позволяет добавить в форму адрес сайта.

Номер телефона

В это поле возможно вписать только цифры

Число (spinbox)

Поле, в котором можно установить количество чего-либо, например товара. Количество устанавливается стрелками вверх/вниз.

Дата

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

Текстовое поле

Да, не удивляйтесь 🙂 Еще одно текстовое поле. На этот раз, это поле имеет большие размеры и позволяет писать в него много текста. Например отзывы, комментарии.

Выпадающее меню

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

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

Checkboxes

Флажком, или на жаргоне разработчиков чекбоксом, называется элемент, который создает поле для проставления галочки. Это поле имеет два состояния - отмечена галочка или нет. Возможен множественный выбор. Располагаются только в ряд, если отметить галочкой «Сделать чек-боксы взаимоисключающими?» то будет возможен выбор только одного параметра.

Radio buttons

Переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Отметив галочкой пункт » Разместить сначала метку, а потом чек-бокс?» меняется расположение метки и поля выбора, по умолчанию сначала выбор, потом метка.

Acceptance

Подтверждение чего-либо. Допустим соглашение принятия условий описанных выше.

Вопрос

Это первая линия обороны от спама, самая элементарная. В настройка пишите какой то вопрос, можно цифрами, можно буквами или и так и так, и указываете правильный ответ. Если ответ при заполнении формы будет правильным, то форма отправится. Зеленым отмечено какая часть этой формулы будет отображаться на сайте перед полем ввода ответа, красным — ответ. Правильный ответ в формуле пишется после знака | (вертикальной черты)

Добавляет в форму защиту от спама.

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

Настройки можно не менять, копируете и вставляете 2 строчки перед кнопкой отправить.

Отправка файла

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

Кнопка отправки

Отправка формы. В настройках в разделе «Ярлык» — можно дать название кнопки (Отправить, ответить, послать 🙂)

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

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

За отображение формы, ее полей и прочих элементов отвечает код:

Wpcf7 { background-color:#ddd; } /*цвет фона формы */ .wpcf7 input, .wpcf7 textarea{ padding:5px; color:#1D1D1D; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height: 20px; border: 1px solid #C7C7C7; box-shadow: inset 2px 2px 8px #F9F9F9; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .wpcf7 .wpcf7-list-item{ padding-left: 0; margin-left: 0; margin-right: 25px; } .wpcf7 .wpcf7-list-item input{ border: none; padding-left: 0; margin-left: 0; } .wpcf7 select{ outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; } .wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active { background: #FDFDFD; outline: none; }

Что есть тут что.

.wpcf7 input, .wpcf7 textarea — стиль поля ввода (текстового поля)

1. padding - задает отступ от содержимого до границы элемента. Здесь — отступ от вводимого в поле текста до границы поля. Устанавливается значение в пикселях Xpx, где X количество пикселей. Пример: padding: 5px 3px 6px 8px;
2. color - цвет текста.
3. font-family - шрифт полей ввода.
4. font-size - размер шрифта
5. line-height - высота строки
6. border - рамка вокруг поля ввода
7. box-shadow - тень блока. inset указывает на то, что тень внутренняя. Если нужна внешняя тень, пропустите это значение. Второе и третье значения 2px 2px указывают на смешение тени по горизонтали и вертикали соответственно. Четвертое значение 8px задает радиус размытия тени. Пятое - #F9F9F9 - цвет тени.

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

Стиль уведомлений Contact Form 7

Он отвечает за сообщения об ошибках или успешной отправке

Wpcf7 .wpcf7-validation-errors{ border:none; background-color:#246416; color:#fff; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .wpcf7 .wpcf7-mail-sent-ok{ border:none; background-color:#7ad33f; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .wpcf7 .wpcf7-mail-sent-ng{ border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: white; } .wpcf7 span.wpcf7-not-valid-tip{ border:none; background-color:#349622; padding:5px; padding-left: 5px; padding-right: 5px; border-radius:10px; width: 290px; color: white; /* Drop shadow */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); }

А теперь для удобства весь код целиком с комментариями:

Wpcf7 { background-color:#ddd; } /*цвет фона формы */ .wpcf7 input, .wpcf7 textarea{ /* Данная часть кода отвечает за стиль полей ввода, текстовые области */ padding:5px; /* Устанавливает отступ от полей элемента до его содержимого, можно поставить любое знаниче, например 10px */ color:#1D1D1D; /* Цвет текста в полях ввода */ font-family:Arial, Helvetica, sans-serif; /* Шрифт текста в полях ввода */ font-size:16px; /* Размер текста в полях ввода */ line-height: 20px; /* Высота стоки в полях ввода */ border: 1px solid #C7C7C7; /* Рамка вокруг полей. Первое значение - ширина в пикселах, второе - стиль рамки, третье - ее цвет */ box-shadow: inset 2px 2px 8px #F9F9F9; /* Тень от полей ввода. 2px - сдвиг по оси x, 2px - сдвиг по оси y, 8px - радиус размытия тени, #F9F9F9 - цвет тени */ -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .wpcf7 .wpcf7-list-item{ padding-left: 0; margin-left: 0; margin-right: 25px; } .wpcf7 .wpcf7-list-item input{ border: none; padding-left: 0; margin-left: 0; } .wpcf7 select{ outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; } .wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active { /* Данная часть отвечает за стиль полей ввода при наведении на них указателя мыши */ background: #FDFDFD; /* Фон поля ввода при наведении указателя мыши на него */ outline: none; /* Внешняя граница поля ввода текста */ } .wpcf7 input.wpcf7-submit{/* Данная часть кода отвечает за стиль кнопки Отправить в форме */ -webkit-transition: 0; -moz-transition: 0; -o-transition: 0; transition: 0; border: none; /* Рамка вокруг кнопки */ position: relative; color: #fff; /* Цвет текста */ text-transform: uppercase; /* Преобразование текста (uppercase значит, что текст на кнопке будет отображаться заглавными буквами) */ /* Скругление углов кнопки. Значения следующих трех свойств должны быть одинаковы, так как это одно и то же, только для разных браузеров */ -webkit-border-radius: 6px; /* Скругление углов для Chrome */ -moz-border-radius: 6px; /* Скругление углов для Mozilla FireFox */ border-radius: 6px; /* Скругление углов для всех остальных браузеров, в том числе мобильных */ font-size: 14px; /* Размер текста кнопки */ font-weight: bold; /* Стиль текста (bold значит жирный) */ padding-top: 11px; /* Отступ сверху от края элемента до его содержимого */ padding-bottom: 10px; /* Отступ снизу от края элемента до его содержимого */ padding-left: 35px; /* Отступ слева от края элемента до его содержимого */ padding-right: 35px; /* Отступ справа от края элемента до его содержимого */ /* Gradient background - Градиентный фон кнопки */ background-color: #000000; /* Цвет фона кнопки, если градиент не поддерживается браузером */ /*В следующих свойствах цвета должны быть указаны одинаково, так как это одно и то же, только для разных браузеров. Разберем первое свойство. Часть from(#676767), to(#3B3B3B) значит, что надо отобразить градиент, где от цвета #676767) идет переход к цвету #3B3B3B */ background: -webkit-gradient(linear, left top, left bottom, from(#676767), to(#3B3B3B)); background: -moz-linear-gradient(top, #349622, #246416); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)"; /* Drop Shadow - Тень кнопки. Цвет тени указан в RGBA */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3); box-shadow: 0 2px 5px rgba(0,0,0,0.3); } /* On hover - Стиль кнопки при наведении указателя мыши. Все почти то же самое, что и в предыдущем блоке */ .wpcf7 input.wpcf7-submit:hover{ cursor: pointer; text-decoration: none; background-color: #000000; background: -webkit-gradient(linear, left top, left bottom, from(#246416), to(#349622)); background: -moz-linear-gradient(top, #246416, #349622); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#246416", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; } /* On click - стиль кнопки при нажатии на нее се почти то же самое, что и в предыдущем блоке */ .wpcf7 input.wpcf7-submit:active{ top: 1px; color: #d8c6e2; /* Цвет текста кнопки при нажатии на нее */ background-color: #000000; background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#246416)); background: -moz-linear-gradient(top, #FF0000, #246416); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF0000", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* CF7 Messages - Стиль сообщений об успешной отправке, ошибках и т.д. */ .wpcf7 .wpcf7-validation-errors{ /* Стиль сообщений при ошибках валидации */ border:none; /* Рамка блока сообщения */ background-color:#246416; /* Фон */ color:#fff; /* Цвет текста */ margin:0; /* Внешний отступ */ padding:20px; /* Внутренний отступ */ /* Скругление углов для разных браузеров - следующие 3 свойства */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .wpcf7 .wpcf7-mail-sent-ok{ /* Стиль сообщений об успешной отправке */ border:none; /* Рамка блока сообщения */ background-color:#7ad33f; /* Фон */ margin:0; /* Внешний отступ */ padding:20px; /* Внутренний отступ */ /* Скругление углов для разных браузеров - следующие 3 свойства */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .wpcf7 .wpcf7-mail-sent-ng{ border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: white; } .wpcf7 span.wpcf7-not-valid-tip{ border:none; background-color:#349622; padding:5px; padding-left: 5px; padding-right: 5px; border-radius:10px; width: 290px; color: white; /* Drop shadow */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); } .wpcf7-form .fleft{ float: left; } .wpcf7-form .mright20{ margin-right: 20px; } .wpcf7-form .mright40{ margin-right: 40px; } .wpcf7-form .clear{ clear: both; }

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

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

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

Описание плагина

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

Кроме этого, вы можете подключить к нему плагин Akismet для защиты от спама, реализовать , а так же использовать мультиязычность. Это, на мой взгляд, круто! :-)

Установка плагина Contact Form 7

Плагин устанавливается стандартным способом в WordPress. Заходим в раздел «Плагины» — «Добавить новый», вводим название Contact Form 7 и устанавливаем его из репозитория. Не забываем активировать сразу после установки.

Настройка Contact Form 7

После активации плагина в главном меню WordPress появится новый пункт «Контакты (CF7)», это основное место настроек ваших форм обратной связи. Количество форм ничем не ограничено.

Список существующих форм доступен в разделе «Contact Forms»:

Тут же можно скопировать нужный шорткод для вставки на страницу или в запись:

Добавление новой формы обратной связи

Как видите, каких-то особых дополнительных пунктов в меню нет, поэтому перейдём к созданию самой формы обратной связи. Для этого выбираем пункт «Добавить новую» в главном меню.

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

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

После нажатия на кнопку «Добавить новую» появится конструктор формы.

Изменяем название формы

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

После этого появится текстовое поле, в котором введём название с описанием:

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

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

Изменяем шаблон формы

Шаблон формы — это обычный HTML-код, который формирует внешний вид вашей формы. По умолчанию он содержит 4 поля (имя, электронный адрес, тему и сообщение) и кнопку отправки формы. Выглядит это следующим образом:

Вы можете менять блоки местами, просто вырезая и вставляя их код в любое место.
Например, мы можем поменять местами поле электронного адреса и имя клиента:

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

«Звёздочка» возле кода элемента означает что это поле обязательное и пока клиент не введёт какое-то значение, форма не будет отправлена:

Как добавить новое поле в форму

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

При нажатии вывалится огромный список возможных дополнительных полей:

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

Не пугайтесь. Настройки хоть и выглядят устрашающе, но на деле очень простые:-)

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

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

Поле «Имя» самое важное, именно оно используется и в шаблоне формы, и в шаблоне письма.

Но за время пользования этим плагином мне ни разу не приходилось менять или устанавливать значения этих атрибутов. Скорее всего и вам не понадобится. Но рассказать и познакомить с ними я обязан:-)

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

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

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

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

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

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

И вставить в текстовое поле ниже в «Шаблон письма»:

По аналогии добавляются и другие поля. Всё просто и понятно:-)

Адресат и шаблон письма

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

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

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

Ну и дальше вам останется лишь привести в порядок шаблон самого письма:

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

P.S. В настройках этого плагина есть довольно интересная возможность — указать второго адресата сообщения. Честно говоря я сходу не могу придумать зачем это может понадобиться, но раз возможность есть, то кто-то её в любом случае воспользуется.

Настройка сообщений

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

Известные проблемы

Бывает так, что при использовании нестандартных контролов, типа email или url, внешний вид отдельных элементов на странице будет отличаться. Например, обратите внимание на поле «Адрес вашего сайта» в самой форме:

Не увидели? А я покажу поближе:

В общем, проблема в том, что внешний вид подобных полей визуально отличается от стандартных текстовых полей. Сравните с полем «Ваше имя», сразу всё поймёте.

Тут есть два варианта решения. Первое — добавить соответствующие стили в файл style.css вашей темы, либо изменить в шаблоне формы тип url на text, тогда всё будет нормально:

Заключение

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

Конечно, обязательно появится кто-то, у кого либо что-то не получится, либо захочется предложить к рассмотрению какой-то другой, аналогичный плагин. Я всегда рад вопросам и предложениям! Не стесняйтесь задавать их в комментариях:-)

Если вы хотите поблагодарить меня за материал - можете сделать это здесь:-)

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

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

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

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

Плюсы плагина Contact Form 7.

1. Понятность и простота настройки. Человек, который первый раз сталкивается с данным плагином без проблем сможет разобраться.
2. Создание большого количества разных форм и интеграция их на сайт.
3. Форма вставляется с помощью шорткода на страницу и в любое место сайта. Это очень удобно.
4. Поддержка русского и других языков.
5. Поддержка Ajax запросов.
6. Защита от спама с помощью текстового вопроса или капчи. Для капчи необходимо дополнительно будет установить Really Simple CAPTCHA.
7. Настройка внешнего вида формы с помощью css стилей.
8. Интеграция с сервисом Akismet, для защиты от спама.

У нас на сайте Вы можете увидеть и поюзать такую форму если нажмете на пункт меню “Связаться с нами”, выпадет окно, где можно увидеть наглядный пример.

Дайте начинать!

Для начала нам необходимо скачать данный плагин. Можно с нашего сервера вот ссылка — >или же с официального сайта вот ссылка — > Скачать с официального сайта .

После, того как скачали необходимо его установить на . Как устанавливать, я не буду описывать, думаю Вы должны этот процесс знать от А до Я. Скачали, установили, теперь непосредственно переходим в сам , что бы разобраться и настроить его.

Настройка плагина Contact Form 7 и создание формы обратной связи.

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

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

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

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

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

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

Слева можно увидеть поля которые уже добавлены в форму.

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

Приступает.

Делаем текстовое поле для имени. В выпадающем списке “Сгенерировать тег” выбираем “Текстовое поле ”. Ставим галочку обязательное поле, даем ему название в моем случае “NAME” и присваиваем id, что бы можно было поле оформить с помощью css стилей. У меня получилось id=”name”. Внизу можно увидеть текст “Скопируйте этот код и вставьте его в шаблон формы слева ”. Берем этот код и копируем в шаблон формы, как на картинке:

Для почты (e-mail) аналогично делаем, для телефона выбираем из списка “Сгенерировать тег”, поле “Номер телефона ” и тоже по аналогии делаем.

Для настройки сообщения выбираем “Текстовое поле ” и делаем тоже по аналогии со всем выше описанным.

Теперь добавляем поле «Вопроc «. Для этого в выпадающем списке выбираем пункт “Вопрос ”, задаем ему название. В поле Вопрос|Ответ, можно задавать разные вопросы и ответы, под полем приведен пример логического вопроса, можно задавать текстовый, например “3 по счету месяц года?| Март” и т.д. Код вставляем как и раньше.

И последнее что нам необходимо, это кнопка “Отправить ”, можно оставить ту, которая в шаблоне или в списке “Сгенерировать тег” выбираем “Кнопка отправки”. Шаблон готов, нажимаем кнопку “Сохранить ”.

Давайте проверим, что у нас получилось, копируем шорткод и вставляем его на страницу или в любую часть кода куда необходимо. Я вставлю на тестовую страницу.

Вот что у меня получилось:

У Вас должно быть, что-то похожее.

Настройка адресата формы и сообщений

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

1. Поле адресат. Вводим почту с которой будут приходить письма посетителям которые заполнят форму.
2. Поле отправитель. Вместо <>, подставляем свои шорткоды (названия которые давали полям). Посмотреть их можно выше. В моем случае будет <>.
3. Поле тема. Я всегда пишу Форма обратной связи и указываю сайт.
4. Поле шаблон письма. Здесь можно выводить, то что душа пожелает. Для нашего примера делаю поле От: <> и данные Телефон: , Сообщение ..
5. Остальные поля пустые.

В конце не забываем сохранятся.

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

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

У меня всё работает отлично, после нажатия кнопки “Отправить”, вижу сообщение “Сообщение было успешно отправлено. Спасибо . ” Можете тестировать и смотреть какие ошибки форма будет выдавать если не правильно ввести данные.

Что касается css стилей, их можно добавить в главный css файл style.css. С помощью firebag, можете посмотреть id и классы полей и присвоить им соответствующие стили.

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