По умолчанию в WP нет такого функционала, но на помощь приходят плагины и специально разработанные конфигурации для движка.
Разберу бесплатный Contact Form 7, который переведен на русский язык. В стандартном исполнении она включает в себя:
Устанавливаем плагин стандартно через админку WordPress, так выглядит в панели.
CF7 в поиске
Настроим reCaptcha от гугла, заходим в раздел интеграция, и нажимаем на ссылку google.com/recaptcha. Должны иметь аккаунт в Google.
Ссылка на рекапчу
Перебросит в сервис, настраиваем пункты как на скриншоте, правильно вводим домен, внизу нажимаем отправить.
Привязка captcha к сайту
Копируем данные для капчи, оба ключа.
Ключи доступа
Переходим обратно в плагин WordPress и нажимаем кнопку Настройки интеграции.
Интеграция
Вводим ключи скопированные на сервисе reCaptcha, записываем в соответствующие разделы и сохраняем.
Сохранение настроек
Заходим в настройки и создаем новую форму. Стираем стандартную разметку.
Стираем стандартные надписи
Вводим название нового проекта и нажимаем кнопку Текст, потому что имя будут вводить текстом без правил.
Поле текст
Появиться всплывающее окно, настраиваем по потребностям.
Аналогично нажимаем кнопку e-mail, видим тот же интерфейс.
Генератор почты
Ввод почты можно сделать через текст, но тогда потеряете функцию проверки правильности. Плагин проверит есть ли знак @.
Добавляем раздел текстовой области и телефона (по желанию), принцип одинаковый.
Кнопки телефон и текстовая область
Ранее настраивали интеграцию капчи в WordPress, в базовой версии CF7 нет кнопки для вставки captcha, для этого создан шорткод помещаем под остальными элементами.
Осталось добавить кнопку отправки, выбираем из списка и настраиваем ее вывод.
Кнопка отправить
В результате получился такой код.
Финальный код CF7
Изменение параметров письма
Сохранение
Протестируйте остальные вкладки уведомлений и настроек, можно поменять текст, выводящийся в разных ситуациях.
Вверху страницы сформировался шорт код, копируем его.
Шорткод
Идем в любую запись и вставляем.
Помещаем shortecode в страницу
После нажатия кнопки Посмотреть, перекинет на сайт с отображением проделанной работы.
Финальный вариант
Хорошая черта у разработчиков тем на WordPress – заранее делать продукт, поддерживающий CF7, что облегчает жизнь и не нужно прописывать CSS стили в код сайта. Моя тема поддерживает плагин и выводит вполне красивую картинку. Если не устраивает, то к каждому полю прописывали class, используйте его для изменения оформления. Проверил работу темы, письма приходят быстро. Про остальные способы , читайте по ссылке.
Ко всему материалу приложу видео инструкцию, показываю не только процесс создания, но и как сделать красивое оформление формы , потому что текстом весь процесс не описать.
Посмотрел в интернет и ужаснулся, сколько манипуляций делают. Настроить полностью оформление не покажу, это тема ни одного большого мануала. Заходим в редактирование формы и оборачиваем поля, которые хотим выстроить горизонтально в div с классом, смотрим код.
Поле Имя, Почта и Телефон хочу выстроить в строчку. Не забываем сохранять изменения.
Оборачиваем в div
Заходим в админке WordPress Внешний вид > Редактор тем > style.css прописываем стили для обратной связи WordPress в конец файла.
Flex-form{display:flex;} @media only screen and (max-width: 655px){.flex-form{display:block;}}
Прописываем стили
Из стилей видно, что div с классом flex-form присвоили свойство display:flex оно задает расположение элементов в строку, без дополнительных параметров пространство делится поровну.
Вторая запись показывает когда разрешение экрана достигло 655 пикселей, форма меняет свойство с flex на block и форма начнет отображаться как раньше с полями друг под другом. Этот предел в 655 меняется индивидуально, стиль сделан чтобы на мобильных устройствах обратная связь выглядела нормально.
Положительно на приеме заявок действуют от CF7. Плагин для вывода всплывающего окна будет Popup Maker. Описывать не буду, ссылка на материал расположена в этом абзаце. В дополнение из той статьи.
Для вставки формы в elementor нужно использовать раздел shortcode. Форма создана по инструкции выше, значит шорткод от CF7 есть. Переходим в создание страницы в элементоре и в поиске по элементам ищем шорткод.
Поиск элемента в elementor
Элементор обработал запрос
В большинстве шаблонов WordPress нет инструментов для создания в автоматическом режиме обратной связи. Но наши темплейты от WPShop имеют встроенную функцию, которая выводится с помощью шорткода. Разберем на примере Root . Перехожу в создание страницы, далее смотрим на снимок.
Надстройка в ROOT
Откроется страница с уже адаптированной, размеченной и сверстанной формой, по которой посетитель может получить обратную связь с администратором.
ROOT работа встроенной функции
Вставить feedback в виджеты просто. Поможет виджет текст, переносим его в активную зону и прописываем шорткод в него.
Используем виджет текст
Задаем заголовок, заносим конфигурацию в текстовую область, переходим на блог и смотрим, как обрабатывается обратная связь.
Форма в виджете
Если предпочитаете способы без плагина, то есть отличная инструкция, нашел на просторах интернета, если хозяин кода объявится, то с удовольствием поставлю ссылку.
Открываем файл function.php для редактирования, прописываем в самый низ код, как пользоваться .
/*код обратной связи*/ add_shortcode("art_feedback", "art_feedback"); function art_feedback() { ob_start(); ?>
Создали форму в HTML разметке WordPress и подвязываем ее на шорткод. Думаю такой подход будет удобен, потому что вывести блок можно будет в любом месте.
Заходим в создание страницы в панели WordPress, пишем , нажимаем на просмотреть.
В гутенберге в любой текстовый блок вставляете строку.
Вносим вывод в запись
Перейдя на сайт увидим не сформированную форму, поля работают, но письмо отправляться не будет, потому что не привязан PHP обработчик.
Плохой внешний вид
Теперь настроим внешний вид, вставляем данный код в файл style.css активной темы.
#add_feedback { margin: 20px 0 0; position: relative; } #art_name, #art_email, #art_subject, #art_comments { padding: 10px 5px; display: inline-block; width: 49.548%; border-radius: 3px; border: 1px solid #ddd; font-size: 0.9em; } #art_subject { width: 100%; margin: 5px 0; } #art_comments { width: 100%; } #add_feedback .button { border: none; padding: 10px 20px; color: #fff; font-size: 1em; display: inherit; margin: 10px 0 0 0; border-radius: 3px; background-color: #2f94ce; } #add_feedback input:focus, #add_feedback input:focus, #add_feedback input:focus, #add_feedback textarea:focus { color: #444; box-shadow: 0 0 3px rgba(68, 68, 68, 0.2); } .error-text { background: #F59E9E; padding: 15px 0px; text-align: center; color: #fff; } .error-name, .error-email, .error-comments { display: inline-block; font-size: 11px; position: absolute; top: -30px; color: white; border: 1px solid red; padding: 5px 10px; line-height: 1.1; background: red; box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.3); } .error-name:after, .error-email:after, .error-comments:after { content: ""; position: absolute; left: 20px; bottom: -10px; border: 5px solid transparent; border-top: 5px solid red; } .error-comments { top: 16%; left: 0; } .error-name { left: 0; } .error-email { right: 4%; } .message-success { background: rgba(0, 128, 0, 0.5); color: #fff; padding: 20px; text-align: center; margin: 20px auto; border-radius: 3px; } #add_feedback .error { border: 1px solid red; } #add_feedback .required:after { content: "*"; position: absolute; left: 20px; bottom: -10px; } #art_name:focus::-moz-placeholder, #art_name:focus:-moz-placeholder, #art_name:focus:-ms-input-placeholder, #art_email:focus::-webkit-input-placeholder, #art_email:focus::-moz-placeholder, #art_email:focus:-moz-placeholder, #art_email:focus:-ms-input-placeholder, #art_comments:focus::-webkit-input-placeholder, #art_comments:focus::-moz-placeholder, #art_comments:focus:-moz-placeholder, #art_comments:focus:-ms-input-placeholder, #art_subject:focus::-webkit-input-placeholder, #art_subject:focus::-moz-placeholder, #art_subject:focus:-moz-placeholder, #art_subject:focus:-ms-input-placeholder { color: transparent }
Обновляем style.css на сервере и смотрим как преобразилась обратная связь на странице.
Сверстанный блок
Создаем файл feedback.js и помещаем в него код. Загружаем на хостинг в папку js активной темы.
JQuery(document).ready(function ($) { var add_form = $("#add_feedback"); // Сброс значений полей $("#add_feedback input, #add_feedback textarea").on("blur", function () { $("#add_feedback input, #add_feedback textarea").removeClass("error"); $(".error-name,.error-email,.error-comments,.message-success").remove(); $("#submit-feedback").val("Отправить сообщение"); }); // Отправка значений полей var options = { url: feedback_object.url, data: { action: "feedback_action", nonce: feedback_object.nonce }, type: "POST", dataType: "json", beforeSubmit: function (xhr) { // При отправке меняем надпись на кнопке $("#submit-feedback").val("Отправляем..."); }, success: function (request, xhr, status, error) { if (request.success === true) { // Если все поля заполнены, отправляем данные и меняем надпись на кнопке add_form.after("
").slideDown(); $("#submit-feedback").val("Отправить сообщение"); } else { // Если поля не заполнены, выводим сообщения и меняем надпись на кнопке $.each(request.data, function (key, val) { $(".art_" + key).addClass("error"); $(".art_" + key).before("" + val + ""); }); $("#submit-feedback").val("Что-то пошло не так..."); } // При успешной отправке сбрасываем значения полей $("#add_feedback").reset(); }, error: function (request, status, error) { $("#submit-feedback").val("Что-то пошло не так..."); } }; // Отправка add_form.ajaxForm(options); });Папка js на сервере
Теперь загружаем вторую часть кода в function.php.
/*вторая часть*/ add_action("wp_enqueue_scripts", "art_feedback_scripts"); function art_feedback_scripts() { // Обработка полей wp_enqueue_script("jquery-form"); // Подключаем файл скрипта wp_enqueue_script("feedback", get_stylesheet_directory_uri() . "/js/feedback.js", array("jquery"), 1.0, true); // Задаем данные объекта ajax wp_localize_script("feedback", "feedback_object", array("url" => admin_url("admin-ajax.php"), "nonce" => wp_create_nonce("feedback-nonce"),)); } add_action("wp_ajax_feedback_action", "ajax_action_callback"); add_action("wp_ajax_nopriv_feedback_action", "ajax_action_callback"); function ajax_action_callback() { // Массив ошибок $err_message = array(); // Проверяем nonce. Если проверка не прошла, то блокируем отправку if (! wp_verify_nonce($_POST["nonce"], "feedback-nonce")) { wp_die("Данные отправлены с неправильного адреса"); } // Проверяем на спам. Если скрытое поле заполнено или снят чек, то блокируем отправку if (false === $_POST["art_anticheck"] || ! empty($_POST["art_submitted"])) { wp_die("Это спам"); } // Проверяем полей имени, если пустое, то пишем сообщение в массив ошибок if (empty($_POST["art_name"]) || ! isset($_POST["art_name"])) { $err_message["name"] = "Пожалуйста, введите ваше имя."; } else { $art_name = sanitize_text_field($_POST["art_name"]); } // Проверяем полей почты, если пустое, то пишем сообщение в массив ошибок if (empty($_POST["art_email"]) || ! isset($_POST["art_email"])) { $err_message["email"] = "Пожалуйста, введите адрес вашей электронной почты."; } elseif (! preg_match("/^[[:alnum:]]*@+\.{2,4}$/i", $_POST["art_email"])) { $err_message["email"] = "Адрес электронной почты некорректный."; } else { $art_email = sanitize_email($_POST["art_email"]); } // Проверяем полей темы письма, если пустое, то пишем сообщение по умолчанию if (empty($_POST["art_subject"]) || ! isset($_POST["art_subject"])) { $art_subject = "Сообщение с сайта"; } else { $art_subject = sanitize_text_field($_POST["art_subject"]); } // Проверяем полей сообщения, если пустое, то пишем сообщение в массив ошибок if (empty($_POST["art_comments"]) || ! isset($_POST["art_comments"])) { $err_message["comments"] = "Пожалуйста, введите ваше сообщение."; } else { $art_comments = sanitize_textarea_field($_POST["art_comments"]); } // Проверяем массив ошибок, если не пустой, то передаем сообщение. Иначе отправляем письмо if ($err_message) { wp_send_json_error($err_message); } else { // Указываем адресата $email_to = ""; // Если адресат не указан, то берем данные из настроек сайта if (! $email_to) { $email_to = get_option("admin_email"); } $body = "Имя: $art_name \nEmail: $art_email \n\nСообщение: $art_comments"; $headers = "From: " . $art_name . " <" . $email_to . ">" . "\r\n" . "Reply-To: " . $email_to; // Отправляем письмо wp_mail($email_to, $art_subject, $body, $headers); // Отправляем сообщение об успешной отправке $message_success = "Сообщение отправлено. В ближайшее время я свяжусь с вами."; wp_send_json_success($message_success); } // На всякий случай убиваем еще раз процесс ajax wp_die(); }
Проверяем форму на работоспособность. Проблема может возникнуть если вы не правильно загрузили файл js в тему WordPress, и путь до него прописан не корректно, а именно во втором коде в разделе // Подключаем файл скрипта.
Заполняем и отправляем письмо
Такое письмо приходит на почту с обратной связи.
Что приходит после отправки
Отлично, справились, смогли сделать форму обратной связи в WordPress, тремя разными методами, если будут вопросы то задавайте, будем разбираться. Успехов!
Мне нравится Не нравится
Contact Form 7 может управлять многочисленными контактными формами, где вы можете гибко настраивать содержимое форм и почты с достаточно простой разметкой. Формы имеют встроенную поддержку Ajax отправки, CAPTCHA, спам фильтра Akismet и не только.
You will find Contact menu in your WordPress admin screen.
1) Do not use 2) Do not use 3) Do not use The forms seem nice and straightforward, but are riddled with glitches. There are more than 1000 support requests; most are unanswered. File uploads fail without an explanation. Forms also fail with no explanation. There aren"t useful solution or error messages, just lots of frustration. If you don"t want to spend many hours of frustration only to later uninstall this plugin, don"t install it in the first place. Try something that actually works, like Everest.
«Contact Form 7» - проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:
УчастникиДля получения дополнительной информации смотрите Релизы .
При создании сайта любого типа важно обеспечить прямой контакт с посетителями. В этом случае удастся наладить с пользователями связь, что заставит их возвращаться на ваш ресурс неоднократно. Сегодня хочу вам рассказать о том, как создать на WordPress форму обратной связи. Мы рассмотрим варианты с использованием плагина и без него, а вы выберете тот, который вам больше подойдет.
В этой статье вы узнаете:
Наиболее простым вариантом использовать обратную связь на сайте, является установка плагина. Лично я выбрала для себя этого вариант, хоть и не приветствую плагины. Для начала нужно скачать плагин Contact Form 7 с официального сайта WordPress. Он достаточно прост в использовании.
После скачивания распакуйте архив и скопируйте файлы на сервер в папку /wp-content/plugins/ . После активации плагина переходите к его настройкам в панели администратора. Справа в меню появится пункт «Contact». Значит, плагин обратной связи WordPress установлен и запущен. Для установки стандартной формы CF7 на сайт достаточно скопировать код «форма для контакта», который вы увидите в меню Contact. Если вы хотите настроить форму по своему усмотрению, перейдите по ссылке «Добавить новую».
В результате появится несколько полей:
Пункты 2 и 4 позволяют воспользоваться конструктором для разных видов форм. Например, так вы можете создать всплывающую форму обратной связи WordPress. После заполнения всех полей, можно получить готовый код для страницы контактов. Настройка доп. формы (№4) помогает получать не только письма на почту, но и, например, смс-сообщения на указанный телефон.
Когда вы получите стандартный или более сложный код формы, вставьте его на созданную вами страницу для обратной связи в админке своего сайта.
Как вариант, можете еще испробовать плагин Cforms , он более сложен, но и функций у него больше.
Напомню, что каждый новый плагин усложняет работу движка WordPress, что может привести к замедлению его работы. Поэтому покажу вам, как сделать красивую форму обратной связи WordPress без плагина. Не призываю вас выбирать именно этот вариант, это просто альтернатива, и решать вам. Приведенная форма будет достаточно простой, это основной костяк, в который, при желании, вы сможете вносить свои коррективы.
Для начала нужно создать отдельный файл *.php (например, contact.php или mail.php). После создания лучше поместить его в папку с темой шаблона, тогда можно будет его редактировать из админки.
Вот код, который нужно вставить в созданный вами файл php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $name \n E-mail: $email \n Тема: $subject \n Текст: $body " ; $send = mail ($address , $subject , $ message, "Content-type:text/plain; charset = UTF-8\r \n From:$email " ) ; if ($send == "true" ) { echo "Спасибо, ваше сообщение успешно отправлено!" ; } else { echo "Ошибка, сообщение не отправлено!" ; } } else { echo "Вы заполнили не все поля, необходимо вернуться назад!" ; } ?> |
Для своего блога вам нужно будет изменить url в первой строке и в строке address, и по желанию название полей Имя, Тема, Текст. Также по своему усмотрению вы можете изменить текстовые сообщения, которые будет видеть пользователь после отправки, либо если сообщение не отправлено.
После того, как вы создали необходимый файл, его нужно вставить на страницу контактов.
Для этого можно использовать такой код:
1 2 3 4 | <h2 > Форма обратной связи</ h2 > <form name = "Form1" action = "/wp-content/themes/lime/contact.php" method = "post" > Ф.И.О.<input class = "input" name = "email" type = "text" style = "width:31%" / > E-mail<input class = "input" name = "subject" type = "text" style = "width:31%" / > ТемаТекст сообщения: <textarea name = "body" cols = "1" rows = "5" style = "width:98%" / > textarea > </ form > |
Здесь самое важное указать правильный путь к тому файлу php, который вы создали (в нашем случае, это contact.php). В данном коде по своему желанию и вкусу можете менять названия полей, и их ширину.
Если вы захотите придать форме без плагина особый вид, можете использовать разные стили оформления с помощью файла style.css.
Большой популярностью на моем блоге пользуются статьи, в которых я рассказываю, как сделать оформление элементов блога с помощью css-кода:
Сейчас я покажу, как оформить красиво форму обратной связи для WordPress.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .wpcf7-form input[ type= "submit" ] { background : #63c6ae ; /* цвет фона кнопки Отправить*/ border : 0 ; width : 120px ; /* ширина кнопки Отправить*/ color : #fff ; /* цвет текста кнопки Отправить*/ height : 30px ; /* высота кнопки Отправить*/ } .wpcf7-form textarea { display : block ; margin-top : 5px ; /* верхний отступ от поля Текст сообщения*/ background : #fff ; border : 1px solid #63c6ae ; /* граница поля Текст сообщения*/ width : 400px ; color : #222 ; padding : 10px 10px ; } .wpcf7-form input[ type= "email" ] , .wpcf7-form input[ type= "text" ] { background : #fff ; border : 1px solid #63c6ae ; /* граница текстовых полей*/ width : 400px ; color : #222 ; height : 30px ; /* высота текстовых полей*/ padding : 0 10px ; /* внутренние границы текстовых полей*/ } |
Wpcf7-form input { background: #63c6ae; /* цвет фона кнопки Отправить*/ border: 0; width: 120px; /* ширина кнопки Отправить*/ color: #fff; /* цвет текста кнопки Отправить*/ height:30px; /* высота кнопки Отправить*/ } .wpcf7-form textarea { display: block; margin-top: 5px; /* верхний отступ от поля Текст сообщения*/ background: #fff; border: 1px solid #63c6ae; /* граница поля Текст сообщения*/ width: 400px; color: #222; padding: 10px 10px; } .wpcf7-form input, .wpcf7-form input { background:#fff ; border: 1px solid #63c6ae; /* граница текстовых полей*/ width: 400px; color: #222; height:30px; /* высота текстовых полей*/ padding: 0 10px; /* внутренние границы текстовых полей*/ }
В результате у меня получилось вот так:
Рассмотрим вариант с использованием плагина Contact Form 7. После того, как плагин установлен и настроен, вам потребуется открыть файл style.css вашей активной темы и вставить в конце следующий код:
Как видите, в создании обратной связи на WordPress как с плагином, так и без него, нет ничего сложного.
Если вам нужен более расширенный функционал, и вы не хотите вникать в хитрости кода, используйте для WordPress плагин формы обратной связи. Выберите тот вариант, который вам наиболее подходит для контакта с вашими пользователями.
Онлайн форма незаменимый инструмент абсолютно любого сайта. Это самый главный источник связи с посетителями вашего сайта. Формы позволяют собирать обратную связь, проводить опросы, делать email подписки, собирать платежи клиентов и многое другое. Если вы знаете программирование, то без труда можете создать форму для сайта. В остальных случаях есть множество хороших плагинов, которые могут быть легко установлены на сайт и использоваться для создания форм.
stepFORM - WordPress плагин для создания форм любой сложности на базе визуального конструктора. В нем есть встроенная защита от спама, сбор ответов на email и CRM, интеграция с Google Analytics и Яндекс.Метрика, расчет стоимости по формулам, прием оплат на PayPal, Wallet One, Яндекс.Деньги и Яндекс.Касса, использование формы по ссылке в соцсетях и многое другое.
uCalc - популярный плагин WordPress для создания форм расчетов различной степени сложности. Плагин отлично подойдет для форм, в которых необходимо не только получать информацию от посетителей сайта, но и производить автоматические расчеты по формулам или принимать оплаты клиентов за продажу товаров или услуг. Плагин подключается в несколько кликов и не требует знаний программирования. Добавление формы расчета происходит при редактировании страницы или публикации.
Contact Form 7 - один из самых популярных плагинов для создания форм на WordPress. С помощью этого плагина вы можете очень гибко настраивать содержимое форм и настраивать отправку данных на почту. Формы включают в себя ajax отправку, а также Captcha и Akismet против спама.
WPForms позволяет создавать красивые формы обратной связи, формы подписки, формы оплаты и другие формы для вашего сайта в считанные минуты. WPForms будут отлично смотреться на всех устройствах (мобильных, планшетных, портативных и настольных).
Ninja Forms помогает создавать онлайн формы для WordPress за считаные минуты с помощью простого перемещения полей формы используя мышь. Для разработчиков можно использовать встроенные хуки, фильтры и пользовательские шаблоны полей, чтобы делать все, что нужно, на любом этапе создания или отправки формы с использованием форм Ninja в качестве основы.
Form Maker создает адаптивные формы для WordPress через простой и понятный интерфейс. Плагин позволяет создавать различные анкеты с любыми полями, вариантами вопросов и ответов. Вам понадобится всего несколько кликов для создания форм и пара минут, чтобы настроить их с помощью доступных тем, стилей и параметров отображения.
Caldera Form - это бесплатный и мощный плагин для WordPress, который создает адаптивные формы с помощью простого визуального редактора. Плагин имеет множество бесплатных удобных дополнений как для начинающих, так и для веб-разработчиков. Антиспам, AJAX, электронные письма с уведомлениями и отслеживание записей в базе данных включены по умолчанию.
Visual Form Builder - это плагин, который позволяет вам создавать и управлять всеми видами форм для вашего сайта в одном месте. Создание полнофункциональной контактной формы занимает всего несколько минут, и вам не нужно писать ни капли PHP, CSS или HTML.
В этот список вошли самые популярные плагины WordPress для создания онлайн форм. Если вы используете другие интересные плагины, которых нет в данном списке, то пишите в комментариях.
От автора:
приветствую вас, уважаемые читатели. Если вам понадобилась форма обратной связи на сайт WordPress, тогда эта статья именно для вас. После прочтения статьи вы узнаете, как сделать форму обратной связи на WordPress, при этом сделать легко, быстро и качественно.
Итак, для решения поставленной задачи мы будем использовать плагин формы обратной связи, который называется Contact Form 7. Не знаю, почему автор выбрал именно такое название, точнее порядковый номер в названии, возможно, это его счастливое число
Как бы то ни было, плагин Contact Form 7 для WordPress — это один из популярнейших плагинов как среди плагинов для создания формы обратной связи WordPress, так среди любых других. И действительно, более миллиона установок — цифра говорит сама за себя. Оценка плагина достаточно высока — 4,5 звезды, что отметает все сомнения по его использованию. К тому же плагин уже русифицирован, поэтому вам не придется переводить поля формы и сообщения на русский язык.
Ну что же, давайте пройдем стандартный процесс установки. Кстати, если вы никогда еще не устанавливали плагины, тогда обязательно ознакомьтесь со статьей «WordPress. Установка плагинов», в которой найдете все возможные способы установки плагинов.
В админке сайта переходим в раздел Плагины — Добавить новый и в строку поиска вводим название плагина — «contact form 7″. Первый найденный плагин формы обратной связи — нужный нам вариант.
Жмем кнопку Установить и активируем плагин. После установки в меню появится новый раздел Contact Form 7 с несколькими пунктами.
Первый пункт Формы содержит список текущих форм на вашем сайте и позволяет управлять ими: редактировать или удалить. Готовая форма представляет из себя ни что иное, как шорткод (короткий код), который можно вставить в запись, страницу или даже виджет. Этот шорткод будет развернут на странице в полноценный код формы. В плагине уже предустановлен пример формы обратной связи, давайте скопируем ее шорткод и вставим его, к примеру, на страницу контактов. После этого перейдем на страницу и увидим на ней уже готовую рабочую форму обратной связи WordPress.
Можем попробовать заполнить форму и отправить ее, письмо будет доставлено на адрес email, указанный в настройках профиля администратора. Обратите внимание, плагин Contact Form 7 не просто предлагает обычную стандартную форму обратной связи. Нет, плагин позволяет гибко ее настраивать. К тому же, форма отправляется без перезагрузки страницы, что является дополнительным плюсом. Ну и, конечно же, валидация полей формы, возможность указать обязательные для заполнения поля — это еще один огромный плюс.
Ну что же, мы использовали уже готовую форму. А как насчет ее изменения? Возможно ли это и легко ли сделать это? Ответ — да — на оба вопроса. К примеру, я хочу убрать из формы поле Тема, как это сделать? Перейдем к редактированию формы в меню плагина Формы и увидим следующую картину.
Для того, чтобы убрать тему, достаточно убрать 2 соответствующие строки, обведенные рамкой на скриншоте. Здесь интересна вторая строка: . Как вы уже догадались, это ни что иное, как шорткод, который и разворачивается в поле формы. В данном случае это поле типа text со значение атрибута name — your-subject.
Если, к примеру, речь идет о текстовой области ниже, то ее шорткод выглядит так: . Здесь textarea — это тег textarea формы, а your-message — имя данного элемента формы. Все просто.
Здесь вы можете задать вполне логичный вопрос: а что делать с прочими элементами формы? Как узнать, какой шорткод отвечает, скажем за выпадающий список? Здесь тоже ничего сложного нет. Над полем шаблона редактируемой формы есть кнопки, кликнув по которым мы добавим необходимые элементы в форму.
Ну а если все же возникнут сложности, тогда вам поможет документация к плагину , где можно найти множество примеров.
Итак, давайте в качестве примера удалим тему сообщения и добавим список с вариантами выбора темы сообщения. Для создания выпадающего списка кликнем по кнопке drop-down menu. В открывшемся модальном окне заполняем форму. Ключевым является поле Options, в которое мы вводим варианты для выпадающего списка. Каждый вариант с новой строки. Прочие поля формы должны быть интуитивно понятны. Например, если мы отметим чекбокс в поле Field type (Required field), то тем самым сделаем создаваемое поле формы обязательным для заполнения. Чекбокс Allow multiple selections позволяет создать список с возможностью выбора нескольких вариантов, а чекбокс Insert a blank item as the first option создаст первым пустой вариант в списке. Поля Id и Class говорят сами за себя — это поля для добавления атрибутов id и class, позволяющих в дальнейшем оформить поле.
После создания списка с необходимыми вариантами в шаблоне формы появится новое поле.
Сохраняем шаблон и пробуем протестировать новую форму обратной связи. На сайте форма действительно изменилась, вместо текстового поля темы появился выпадающий список с вариантами выбора темы.
Давайте попробуем заполнить и отправить форму. Форма отправляется, но oops… в полученном письме нет выбранного варианта темы. Как так? Как исправить это недоразумение? Не волнуйтесь, исправляется это просто. Идем в редактирование формы и переключаемся на вкладку Письмо.
В этой вкладке настраивается формат письма, который приходит на email из формы обратной связи. На скриншоте в первой обведенной области мы видим список шорткодов (имен полей формы), которые используются в нашей форме обратной связи. Именно значения этих полей и подставляются в шаблон письма. Мы видим на второй отмеченной области, что для поля Тема осталось имя из прежнего поля. Также в поле Message Body указан прежний шорткод. Давайте заменим их соответствующим тегом из списка выше — . К слову, здесь же можем изменить и email получателя, он записан в поле To. Также можем изменить и прочие настройки ниже, все они подписаны и понятны.
Сохраняем изменения и пробуем отправить повторно письмо. Теперь форма обратной связи работает, как и положено, — на email приходит письмо с выбранной темой.
В следующей вкладке Уведомления при отправке формы мы можем настраивать сообщения об успехе или ошибках, возникающих при отправке формы.
А что насчет спама, можете задать вы вполне резонный вопрос? Автор плагина позаботился и об этом. В разделе настроек плагина есть пункт Integration.
Здесь мы можем настроить сервис reCAPTCHA от Google. Для этого вам нужно будет перейти по указанной ссылке на соответствующий сервис Гугла и далее следовать инструкциям, чтобы получить необходимый ключ и интегрировать каптчу с вашим сайтом.
Для тех же, кто не хочет использовать сервис reCAPTCHA, плагин предлагает защиту от роботов в виде поля вопрос/ответ. Для добавления этого поля в шаблоне формы кликаем по кнопке quiz и заполняем форму точно так же, как мы это делали для выпадающего списка. Вопрос и ответ вводим через вертикальную линию.
После этого в форме обратной связи появится новое поле с одним из вариантов вопросов, которые вы набрали. Теперь, чтобы форма отправилась, необходимо дать верный ответ на вопрос.
Как видим, сделать форму обратной связи на WordPress — проще простого. Плагин Contact Form 7 позволяет построить форму практически для любых целей. Это может быть и форма обратной связи, и форма какой-нибудь заявки и т.д. Да, как я и говорил выше, форму можно вставить не только в запись или страницу, но и в виджет сайдбара. Для этого достаточно создать виджет Текст и вставить в него шорткод нужной формы. Ну а новые формы, как вы догадались, можно создавать в меню плагина Добавить новую.
На этом у меня все. Поиграйтесь с плагином Contact Form 7 для WordPress, попробуйте создавать различные формы, поверьте, там есть еще масса возможностей для исследования. Если же у вас возникнут вопросы, тогда я, как всегда, жду их в комментариях. Удачи!