Сегодня поговорим о создании контактной формы на WordPress без плагинов. Контактная форма улучшает юзабилити сайта и позволяет вашим читателям связаться с вами или задать вам вопрос.
Создание контактной формы
Весь процесс создания контактной формы делится на:
создание html-формы;
создание и подключение js-скрипта;
создание и подключение файла-обработчика mail.php;
оформление стилей.
Я предлагаю вам уже готовый код, в котором вы сможете легко разобраться, изменить внешний вид или добавить что-нибудь свое по необходимости. Всё просто, если читать внимательно и не торопиться.
Шаг №1: Создание html-формы
Выбираете любое место в файле (в page.php или любом другом файле), где хотите разместить форму (у меня после строки <?php the_content(); ?>
) и вставляете следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<form id="contact" action="<?php bloginfo('template_url'); ?>mail.php" method="post"> // указываем путь к второму файлу <div id="note"></div> // создаем пустой блок, где будет выводиться уведомление, что сообщение отправлено <div id="fields"> // блок с полями формы <p><input type="text" name="name" class="input" placeholder="Имя" required></p> <p><input type="email" name="email" class="input" placeholder="E-mail" required></p> <p><input type="text" name="sub" class="input" placeholder="Тема" required></p> <p><textarea name="message" cols="1" rows="10" class="input" style="width:98%" placeholder="Введите текст сообщения" required></textarea></p> <p><input id="submitinput" class="submit" value="Отправить" type="submit" /></p> </div> </form> |
Здесь мы создали простую форму. Атрибут required
означает, что поле является обязательным для заполнения.
Примечание: Читайте внимательно комментарии к коду, всё важное я подписываю.
Шаг №2: Создание и подключение js-скрипта
Чтобы сообщение отправлялось без перезагрузки страницы, используется технология AJAX (сокр. от «Asynchronous Javascript and XML»). Для её применения нужно подключить библиотеку Jquery. В файле header.php перед закрывающим тегом </head>
добавляем следующую строку:
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
Дальше нужно вставить сам скрипт. Сразу после строки <?php get_header(); ?>
или после тега </head>
в том файле, в котором создавали форму, вставляем следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script> jQuery(document).ready(function($) { $("#contact").submit(function() { var str = $(this).serialize(); $.ajax({ type: "POST", url: "<?php bloginfo('template_url'); ?>/mail.php", // здесь указываем путь к второму файлу data: str, success: function(msg) { if(msg == 'OK') { result = '<div class="ok">Сообщение отправлено</div>'; // текст, если сообщение отправлено $("#fields").show(); } else {result = msg;} $('#note').html(result); $('.input', '#contact') // выполняем очистку полей после отправки сообщения .not(':button, :submit, :reset, :hidden') .val('') } }); return false; }); }); </script> |
Шаг №3: Создание и подключение файла-обработчика mail.php
Теперь нужно создать файл обработчика, чтобы всё заработало, и сообщения приходили к нам на почту. Для этого создаем новый файл, вставляем следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php $post = (!empty($_POST)) ? true : false; if($post) { $name = $_POST['name']; $email = $_POST['email']; $sub = $_POST["sub"]; $message = $_POST['message']; $error = ''; if(!$name) {$error .= 'Укажите свое имя. ';} if(!$email) {$error .= 'Укажите электронную почту. ';} if(!$sub) {$error .= 'Укажите тему обращения. ';} if(!$message || strlen($message) < 1) {$error .= 'Введите сообщение. ';} if(!$error) { $address = "moiadress@gmail.com"; // ВНИМАНИЕ! Здесь указываем адрес электронной почты, на которую будут приходить письма $mes = "Имя: ".$name."\n\nТема: " .$sub."\n\nСообщение: ".$message."\n\n"; $send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email"); if($send) {echo 'OK';} } else {echo '<div class="err">'.$error.'</div>';} } ?> |
Примечание: Обратите внимание на строку №14 — там нужно указать свой электронный адрес.
Сохраняем как mail.php и закидываем в корневую папку шаблона (в WordPress это: wp-content > themes > название_вашего_шаблона) к файлу с формой.
Шаг №4: Оформление стилей
Последний штрих! Сделаем нашу форму красивой и лаконичной, добавив немного стилей в style.css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
#contact label { display:block; padding:5px 0; } #contact input, #contact textarea { display: block; font-family: inherit; font-size: 15px; color: inherit; padding: 14px; border: 1px solid #E6E6E6; margin-bottom: 30px; } #contact textarea { width: 70% !important; height: 100px !important; min-width: 230px; } .input { min-width: 230px; } #contact input.submit { background: #00B5B5; color: #FFFFFF !important; cursor: pointer; font: inherit; font-size: 16px; font-weight: 600; display: inline-block; padding: 10px 12px; text-decoration: none; border: none; margin: 10px 0 50px; -webkit-transition: background 0.2s ease; -moz-transition: background 0.2s ease; -o-transition: background 0.2s ease; transition: background 0.2s ease; } .ok { background: #00B5B5; margin-bottom: 15px; padding: 10px; color: white; text-align: center; } |
Класс .ok
отвечает за оформление блока с текстом "Сообщение отправлено"
.
Теперь наша форма полностью готова к использованию. Оформление можете изменить под себя.
Создание отдельной страницы для контактной формы
Этот пункт для тех, кто хочет создать форму на отдельной странице! Чтобы создать отдельную страницу для контактной формы вам нужно зайти в админку WordPress > Внешний вид > Редактор. Справа ищите «Шаблон страницы» (page.php). Открываете этот файл, копируете содержимое. Создаете на своем компьютере новый текстовый файл и вставляете всё скопированное туда. В самом верху добавляете следующие строки:
1 2 3 4 5 |
<?php /* Template Name: Contact */ ?> |
Сохраняете этот файл под именем contact.php, а дальше всё, как было указано выше в этой статье (вставляете html-форму, подключаете js-скрипт, создаете файл mail.php, задаете стили).
Эти два файла (contact.php и mail.php) нужно будет закинуть в корневую папку вашего шаблона (wp-content > themes > название_вашего_шаблона). После этого заходите в админку WordPress > Страницы > Добавить новую. И в атрибутах страницы выбираете шаблон «Contact», дальше «Опубликовать», и всё!
Здравствуйте. спасибо за статью. все сделал как в статье, только сообщения об отправке или "не отправке" в отдельном окне открываются. как сделать , что в этой же форме выдавались и чтобы при удачной отправке форма закрывалась?
Здравствуйте.
Не понятно как работает mail.php
Вчера сделал как у вас написано, подогнал под свои нужды, но письмо на почту не пришло. Сегодня вечером проверяю — есть письмо.
Отредактировал mail.php и снова нет письма. Не получается понять в чём причина…
Я вот, например, открыла для себя, что OpenServer складывает это в специальную папочку, а не рассылает)))) Такие пироги))))
Спасибо за полезную статью, оказывается довольно просто сделать форму. Сейчас собираю через stepFORM, но по вашей статье думаю самим попробовать сделать.
Здравствуйте, подскажите пожалуйста как можно подключить RTL? Нужна форма на иврите
Подскажите, как подключить каптчу в эту форму?
Удобнее было бы подключить reCAPTCHA от Google (в Интернете есть инструкции по установке). Если у вас WordPress, то можно плагином воспользоваться.
Сообщения попадают в Спам, как это исправить ?
Уже от того, что Вы ввели в полях (тема, сообщение, e-mail) зависит то, в какую папку это сообщение в почтовом сервисе попадет. Когда я, тестируя, ввожу в контактную форму всякую белиберду, то у меня в Gmail сообщения также попадают в папку «Спам», в остальных же случаях всё нормально.
Спасибо, хорошее решение, сейчас допиливаю и буду использовать.
Вызывает сомнение вот эта строчка:
url: «/mail.php»,
как он найдет путь при такой записи, это же js-файл?
Лично у меня он ругается на такой путь.
Приходится менять на статический
Совершенно верно, я указал динамический путь для тех, кто использует WordPress. Если использовать вне WP — нужно просто поменять в форме HTML и в js-скрипте путь на статический. Указал динамический, так как статью затачивал именно под WP 🙂
Понял, спасибо! А можно ли как-то в этом mail.php вытащить данные из поста или страницы? К примеру, чтоб он вместе с сообщением слал данные, к примеру, с какого поста была отправлена форма
Можно 🙂 Есть два варианта:
1. Добавить в форму скрытое поле с адресом страницы.
2. Обрабатывать referrer — $_SERVER[‘HTTP_REFERER’].
Для второго варианта измените строку 16 файла mail.php на такую:
Отлично! Спасибо за ответы, я как раз сам докумекал вариант со скрытым полем сделать)
Не за что 🙂