Форма обратной связи без плагинов с защитой от спама ReCaptcha

Форма обратной связи без плагинов с защитой от спама ReCaptcha
5 (100%) 1 vote

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

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

Первым делом откроем в редакторе Notepad++  (или любом другом php редакторе) файл page.php из Вашей темы оформления.

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

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Важно! Сохраните не только скелет, но и общее оформление. В контейнерах css (<div>) обычно описывается, как именно будет оформлена страница.

Например:

То, что выделено, можно удалить. Будьте аккуратны, у каждого открытого тега div должен соответствующий закрывающий

Это наш кастрированный шаблон. Пересохраним его с другим именем, например contact.php

(Кстати, можете себе этот скелет сохранить c другим именем н-р, shablon.php, именно для того, чтобы не мучить каждый раз page.php)

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

Для этого в самое-самое начало вставим следующий код:

<?php
/* Template Name: Форма обратной связи */
?>

Сразу же после него, ДО <?php get_header(); ?> нужно вставить следующую конструкцию:

<?php
if(isset($_POST['submitted'])) {
if(trim($_POST['contactName']) === '') {
$nameError = 'Пожалуйста, введите Ваше имя.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}
if(trim($_POST['email']) === '')  {
$emailError = 'Пожалуйста, введите адрес Вашей электронной почты.';
$hasError = true;
} else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
$emailError = 'Адрес электронной почты некорректен.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}
if(trim($_POST['subject']) === '') {
$subject = 'Сообщение с блога';
} else {
$subject = stripslashes(trim($_POST['subject']));
}
if(trim($_POST['comments']) === '') {
$commentError = 'Пожалуйста, введите Ваше сообщение.';
$hasError = true;
} else {
$comments = stripslashes(trim($_POST['comments']));
}
if(!isset($hasError)) {
$emailTo = get_option('tz_email');
if (!isset($emailTo) || ($emailTo == '') ){
$emailTo = get_option('admin_email');
}
$body = "Имя: $name \n\nEmail: $email \n\nСообщение с Вашего блога: $comments";
$headers = 'От: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Ответить: ' . $email;
wp_mail($emailTo, $subject, $body, $headers);
$emailSent = true;
unset($_POST);
}
} ?>

Можно глубоко вздохнуть и утереть пот со лба – все идет как по маслу!

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

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

<?php if(isset($emailSent) && $emailSent == true) { ?>
<div>
Спасибо за Ваше сообщение. <br />Я постараюсь как можно скорее на него ответить.<br />
</div>
<?php } else { ?>
<?php the_content(); ?>
<?php if(isset($hasError)) { ?>
<div>Извините, но отправить письмо не удалось. <br />Возможно Вы допустили ошибки при заполнении формы.<br /></div>
<?php } ?>
<?php } ?>
<div id=contactform>
<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
<p>Ваше имя (обязательно):<br />
<input  type="text" name="contactName" id="contactName"  class="required" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />
<?php if($nameError != '') { ?>
<span class="error"><?=$nameError;?></span>
<?php } ?>
</p>
<p>Ваш E-Mail (обязательно):<br />
<input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" />
<?php if($emailError != '') { ?>
<span class="error"><?=$emailError;?></span>
<?php } ?>
</p>
<p>Тема:<br />
<input type="text" name="subject" id="subject" value="<?php if(isset($_POST['subject'])) echo $_POST['subject'];?>" />
</p>
<p>Сообщение (обязательно):<br />
<textarea name="comments" id="commentsText" rows="10" cols="40" class="required"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
<?php if($commentError != '') { ?>
<span class="error"><?=$commentError;?></span>
<?php } ?>
</p>
<input type="submit" value="Отправить сообщение"/>
<input type="hidden" name="submitted" id="submitted" value="true" />
</form>
</div>

Еще один тяжкий этап пройден, и наша форма обретает форму.

Но, как Вы помните, нам нужна не просто себе форма, а форма обратной связи без плагинов с защитой от спама.

А для этого нам нужно в шаблон добавить код защиты ReCaptcha. Для его использования плагин нам тоже не понадобится.

Идем на сайт http://www.google.com/recaptcha

Жмем на кнопку Use ReCaptcha on Your Site

На следующей странице нам радостно сообщают, что это бесплатно, доступно, легко, жутко полезно и приглашают зарегистрироваться, нажав на кнопку Sign up Now!

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

На следующем этапе нам нужно создать ключи. Если у Вас один сайт – добавьте его домен (без http://  и слеша в конце), если несколько, их можно добавить через запятую, если много (допустим, Вы хостинг-провайдер), поставьте галочку, чтобы иметь мультиключ.

Даже если Вы ввели всего один домен, потом всегда сможете добавить еще.

Итак, в разделе MY ACCOUNT -> MY SITES Вы увидите список Ваших сайтов, для которых запросили ключ ReCaptcha.

Нажимаем на нужный домен, и нам выдают два ключа: приватный и публичный.

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

У разработчиков Гугла есть подробное описание того, как добавить ReCaptcha на страницу php

И первое, что нужно сделать – скачать файл recaptchalib.php  из библиотеки  ReCaptcha.

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

Далее, нам нужно вставить два кусочка кода, выданного Гуглом

<?php
require_once('recaptchalib.php');
$publickey = "your_public_key"; // you got this from the signup page
echo recaptcha_get_html($publickey);
?>

Эту часть мы вставим ПЕРЕД кодом кнопки Отправить сообщение. Вместо your_public_key вставьте Public ключ, который Вы взяли в сервисе ReCaptcha.

А вторую часть мы вставим наверх, в часть кода, отвечающего за проверку введенных форм:

require_once('recaptchalib.php');
$privatekey = "your_private_key";
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if (!$resp->is_valid) {
// What happens when the CAPTCHA was entered incorrectly
die ("<h2>Картинка подтверждения была введена не правильно. <br />Вернитесь и повторите ввод</h2> " .
"(reCAPTCHA said: " . $resp->error . ")");
} else {
// Your code here to handle a successful verification
}

Вместо your_private_key вставьте Privat ключ, который Вы взяли в сервисе ReCaptcha.

Засим, наша страница контактов готова, сохраняем ее и заливаем на хостинг, в папку с нашей темой оформления.

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

Для этого в консоли Вордпресса, в разделе Страницы, мы создаем новую страницу, называем ее Контакты

И в качестве шаблона выбираем Форма обратной связи – то, что мы создали.

Публикуем страницу и вуаля! У нас есть Форма обратной связи без плагинов с защитой от спама ReCaptcha.

Форма работает, ReCaptcha держит оборону от адептов виагры - жизнь снова прекрасна и удивительна!

Лола Пирхал

Сертифицированный коуч, бизнес-тренер, интернет-предприниматель, веб-разработчик

+38 067 7923605 KartaUspeha.ru

QR:  '.get_the_title().'

Что Вы об этом думаете?

Подарок

Оставьте Ваш первый комментарий и получите замечательный подарок!


21 комментарий

  • А насколько необходима это замена? Установить плагин контакт формы проще. Может это потребуется когда статей будет море?

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

  • Да! я посчитала , уже сейчас стоит 30 плагинов и я думаю, которые из них выкинуть, и что почистить из сайтбаров, а то каша какая-то получается. У самой в глазах рябит, что же тогда у посетителей?

  • Миша

    Добрый день. Спасибо за статью. Я только начинаю осваивать ВордПресс. Обязательно сделаю форму обратной связи с Вашей инструкцией. Хочу спросить - нет ли у Вас подобной инструкции для вставки рекапчи без плагинов в форму Комментариев? Хотя я вот вижу, что у Вас ее нет... Или из-за (благодаря) премодерации, ее не обязательно ставить? Заранее благодарен за ответ.

    • Миша, в комментариях ее ни в коем случае ставить нельзя - комментариев не будет. Она сложновата для распознавания. А вот для формы контактов - самое оно

      • Миша

        Спасибо, Лола

      • Лола, ещё раз огромное спасибо. Подписался на Ваши 8 видеоуроков. Не буду повторяться - написал в Фейсбуке.
        Но не могу не добавить (в Фейсбуке упустил) - поражает Ваша "Чеховская" краткость и ненавязчивая, почти "25-тым скрытым кадром" способность на подсознании намекнуть, где придётся поискать... При обилии версий и шаблонов, охватить всё - нереально - эти намеки помогли - нет слов как облегчить и ускорить поиск. Снимаю шляпу. Всего самого доброго. С теплом из Нью-Йорка, в котором не по сезону холодно :)

  • Лола,здравствуйте.
    Спасибо за инструкцию, буду вечером ее воплощать. Подскажите, правильно ли я поняла, что сообщения будут тогда приходить в форме комментариев?
    Не возможно привязать такую форму к е-майл?
    Спасибо заранее

  • Очень полезная статья. Спасибо, Лола!

  • Сергей

    А где в этом коде нужно вставлять свой e-mail, на который будут приходить письма?

  • То, что доктор прописал. Спасибо, отлично работает.

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

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

  • Дело в том, что я хотел чтобы писали статьи прямо на сайте мои посетители, но уже вчера разобрался с этим вопросом и поставил плагин uCan Post.

    • Если я правильно понимаю суть этого плагина, Вам понадобится еще один - чтобы разделить роли публикаций и обязательно включить модерацию. Иначе будет много неконтролируемого мусора

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

  • Ольга

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *