WordPress форма обратной связи без плагинов.

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

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

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

Google даже в панели инструментов вебмастера дает оценку эффективности вашей интернет-площадки, то есть показывает скорость загрузки по сравнению со всеми сайтами интернета, так-же этой поисковой системой предложен свой инструмент Page Speed по оптимизации скорости, который устанавливается в плагин Firebug для FireFox.

WordPress форма обратной связи без плагинов

Провожу бесплатное обучение на Форекс
Я ВебМастерМаксим провожу консультирование по заработку на Форекс! Вы с легкостью повторите мой путь! Интересует?
Форекс обучение

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

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

Создаем форму обратной связи в WordPress без плагинов.


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

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

[php] <!—?php if (have_posts()) : ?—>
<!—?php while (have_posts()) : the_post(); ?—>
<div id="post-<?php the_ID(); ?><br />" class="post">
<h1></h1>
<!—?php the_content(‘Читать дальше &#8594;’); ?—>
<div class="clear"></div>
</div>
<div id="post-<?php the_ID(); ?>" class="post">
<!—?php wp_link_pages(array(‘before’ =—> ‘
<strong>Страницы:</strong> ‘, ‘after’ => ‘

‘, ‘next_or_number’ => ‘number’)); ?>[/php]

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

[php]
<div id="content">
<div id="column">
[/php]

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

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

Сразу после этого кода нужно вставить другой код:

[php]<?php

if(isset($_POST[‘submitted’])) {
if(trim($_POST[‘contactName’]) === ») {
$nameError = ‘Введите ваше имя.’;
$hasError = true;
} else {
$name = trim($_POST[‘contactName’]);
}

if(trim($_POST[’email’]) === ») {
$emailError = ‘Введите e-mail адрес.’;
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST[’email’]))) {
$emailError = ‘Вы ввели неправильный адрес.’;
$hasError = true;
} else {
$email = trim($_POST[’email’]);
}

if(trim($_POST[‘comments’]) === ») {
$commentError = ‘Введите сообщение.’;
$hasError = true;
} else {
if(function_exists(‘stripslashes’)) {
$comments = stripslashes(trim($_POST[‘comments’]));
} else {
$comments = trim($_POST[‘comments’]);
}
}

if(!isset($hasError)) {
$emailTo = get_option(‘tz_email’);
if (!isset($emailTo) || ($emailTo == ») ){
$emailTo = get_option(‘admin_email’);
}
$subject = ‘Сообщение с Блога от пользователя ‘.$name;
$body = "Имя: $name \n\nE-mail: $email \n\nСообщение: $comments";
$headers = ‘От: ‘.$name.’ <‘.$emailTo.’>’ . "\r\n" . ‘Ответить: ‘ . $email;
$headers = "Content-type: text/plain; charset=\"utf-8\"";
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}

} ?>
[/php]

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

[php] <?php if(isset($emailSent) && $emailSent == true) { ?>
<div class="thanks">
<p>Спасибо, ваше сообщение отправлено.</p>
</div>
<?php } else { ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
<p class="error">Извините, произошла ошибка.<p>
<?php } ?>
<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
<ul class="contactform">
<li>
<label for="contactName">Имя:</label>
<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST[‘contactName’])) echo $_POST[‘contactName’];?>" class="required requiredField" />
<?php if($nameError != ») { ?>
<span class="error"><?=$nameError;?></span>
<?php } ?>
</li>
<li>
<label for="email">E-mail</label><input type="text" name="email" id="email" value="<?php if(isset($_POST[’email’])) echo $_POST[’email’];?>" class="required requiredField email" />
<?php if($emailError != ») { ?>
<span class="error"><?=$emailError;?></span>
<?php } ?>
</li>
<li>
<label for="commentsText">Сообщение:</label>
<textarea name="comments" id="commentsText" rows="20" cols="50" class="required requiredField"><?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 } ?>
</li>
<li>
<input type="submit">Отправить сообщение</input>
</li>
</ul>
<input type="hidden" name="submitted" id="submitted" value="true" />
</form>
<?php } ?>[/php]

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

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

Страница формы обратной связи

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

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

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

[php].soodhcenie{} /* Это внешний вид сообщения об благополучной отправке*/
.error{} /* вид вывода ошибок */
.contactform ul, .contactform li {} /*А вот это уже внешний вид самой формы */[/php]

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

Понравилась статья?! Жми на кнопку!
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(4 голоса, в среднем: 4 из 5)
загрузка...
  • web site optimization

    прикольный рес webmastermaksim.ru — рекомендую всем!

  • Константин

    Не подскажите куда нужно вводить свой почтовый ящик чтобы на него приходили письма с формы обратной связи?

  • admin

    Константин? переходите в админке, настройки > общие > Адрес email

  • Serg

    Попробовал данный скрипт, на локали работает, на хосте — нет. Скорее-всего в хосте проблемма…
    Интерессует такой вопрос, как организовать защиту от спама в данном скрипте?

  • admin

    Serg, я не пробовал, можно конечно прикрутить капчу.

  • olzhas

    Спасибо!

  • Денис

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

  • admin

    Добрый день, нет не знаю

  • Ульяна

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

  • Андрей

    Добрый день !

    Пользую этот скрипт и возникли проблемы , при отправке сообщения перескакивает на записи вместо отправки, либо на страницу если есть.

  • alamis

    на почту приходят 4 штуки письма,как сделать чтобы приходило одно?

  • https://blog.yosyfovych.te.ua Юрий Йосифович

    Чем дальше в лес, тем больше дров — примерно так я сейчас прохожу ваш блог Максим. В этой публикации вы кратко и по делу донесли до меня как можно быстро реализовать форму обратной связи без плагина. Интересно, а можно как-то её прилепить в всплывающем окне, как например у вас ярлык «Добавить в закладки» — я такое видел на всех сайтах сервиса SETUP — для пользователя это было бы реально удобно (нажал, ввел почту текст — отправить — и не нужно искать в каких-то меню).

  • https://blog.yosyfovych.te.ua Юрий Йосифович

    То что письма приходят по 4 штуки говорит о том, что при попытке отправить письмо происходит какой-то сбой, после чего сервер повторят запрос и так несколько раз до успешной отправки.
    У меня была раньше такая же проблема, и я просто решил подключить SMTP от Google для отправки писем обратной связи — проблема пропала, вот только больше времени уходит на отправку письма (при нажатии на кнопку отправить пользователю придется подождать 3-5 секунд).

  • https://blog.yosyfovych.te.ua Юрий Йосифович

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

  • https://blog.yosyfovych.te.ua Юрий Йосифович

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

↑ Получай комментарии на E-MAIL