«

»

Сен 17 2014

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

Форма обратной связиWordPressДобрый день уважаемые посетители блога boqdanov.ru. С вами Антоха и очередной пост.  В предыдущей статье мы поговорили, как выводится форма обратной связи с помощью плагина. Но как мы с Вами прекрасно знаем, плагин  это не есть хорошо.  Большое их количество здорово грузят сервер. Используйте на сайте минимум плагинов, и будет вам счастье.

Как сделать форму обратной связи?

Короче если вы не сторонник использования плагинов на своем сайте, эта статья для вас. Весь процесс создания занимает 10 минут. Приступим к делу. На своем компьютере создаем файл и называем его «kontakt.php». Далее открываем наш файл обычным текстовым редактором (для этих целей использую notepad++) и прописываем туда следующий код:

 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<?php
if (isset($_POST['name'])) {$name = $_POST['name']; if ($name == '') {unset($name);}}
if (isset($_POST['email'])) {$email = $_POST['email']; if ($email == '') {unset($email);}}
if (isset($_POST['sub'])) {$sub = $_POST['sub']; if ($sub == '') {unset($sub);}}
if (isset($_POST['body'])) {$body = $_POST['body']; if ($body == '') {unset($body);}}
if (isset($name) && isset($email) && isset($sub) && isset($body)){
$address = "ваша почта";
$mes = "Имя: $name \nE-mail: $email \nТема: $sub \nТекст: $body";
$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");
if ($send == 'true')
{echo "Сообщение отправлено, теперь Вы можете перейти на главную страницу и продолжить чтение <a
href='http://boqdanov.ru//'>boqdanov.ru/</a>";}
else {echo "Ошибка, сообщение не отправлено!";}
}
else
{
 echo "Вы заполнили не все поля, необходимо вернуться назад!";
}
 ?>
Теперь внесем небольшие изменения. Переходим на строчку 10 ( $address) и вписываем туда свой адрес электронной почты на который будут приходить сообщения. Также если хотите, можете поменять строки 14, 15 и 20, вписать свой текст. Если вы хотите, чтобы после отправки сообщения осуществлялся автоматический переход на нужную вам страницу, то меняем верхнюю строчку нашего файла на:
 <meta http-equiv='refresh' content='6; url=http://boqdanov.ru//'>
 <meta charset="UTF-8" />

Если оставить все как есть, то после отправки сообщения через 6 секунд ваш посетитель попадет на мой блог. Меняем url на свой и можете изменить время, через которое произойдет переход. Сохраняем данный файл в кодировке  UTF-8 (без ВОМ). Этот файл необходимо поместить на хостинг в папку нашей темы: public_html/ваш_сайт/wp-content/themes/название_вашей_темы/  Помещаем и обновляем.

Чтобы наша форма начала работать, нужно проделать еще одно действие. Сразу определитесь, где вам нужен вывод формы обратной связи. Можно сделать отдельную страницу (Как у меня) или показывать после каждого поста, а можно и на странице и в конце поста. Вставляем следующий код в выбранное вами место:

<h2>Форма обратной связи</h2>
 <form name="MyForm" action="/wp-content/themes/название темы/kontakt.php" method="post">
 <p><input class="input" name="name" type="text" style="width:25%" /> Ваше имя</p>
<p><input class="input" name="email" type="text" style="width:25%" /> Электронная почта</p>
<p><input class="input" name="sub" type="text" style="width:25%" /> Тема сообщения</p>
<p>Текст сообщения:<br /><textarea name="body" cols="1" rows="5" style="width:76%" /></textarea></p>
<p><input value="Отправить" type="submit" /></p>
</form>

Здесь меняем название темы на свою и подгоняем под свой блог значение длины и ширины полей с помощью «width». После этого сохраняем изменения, идем на блог посмотреть на наш шедевр.

kak sdelat formu obratnoi svazi bez

Если вам что-нибудь не нравится, вы всегда сможете вернуться и отредактировать параметры. Не бойтесь экспериментировать с кодом. Как проверить работоспособность формы, почитайте в этой статье.

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

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

Можете перейти на страницу «Обратная связь» и посмотреть, как выглядит моя форма. Данная форма имеет уникальный дизайн и работает на многих известных движках.

Эта форма создана с помощью специального сервиса. Переходим на главную страницу сайта и с левой стороны вверху кликаем на вкладку «Форма обратной связи».

i svazi bez plagina

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

kak sdelat formu obratnoi svazi

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

obratnoi svazi bez plaginakak sdelat formu

Чтобы наша форма заработала, необходимо перейти обратно на сервис и зарегистрировать свой сайт в базу данных. Кликаем на вкладку «Зарегистрировать сайт в базе данных» и переходим на страницу регистрации.

formu obratnoi svazi bez plagina

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

kak sdelat formu obratnoi svazi bez plagina

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

 С уважением, Богданов Антон!

 

Интересные материалы по теме:

4 комментария

Перейти полю для комментария

  1. Юрий Йосифович

    А почему такая подсветка не правильная в коде? (Не удобно читать код).

    1. Антон Богданов

      В каком смысле не правильная подсветка? Поясните.

      1. Юрий Йосифович

        Посмотрите подсветку кода например на страничке: _http://smetskiy.com/vidzhet-top-kommentatorov-bez-plagina.html и сравните со своим.

        1. Антон Богданов

          А вы в этом смысле. Он использует плагин wp-syntax для нормального отображения. У меня он на отрез отказывается работать. Подыскиваю другой вариант. Как только, так все исправлю. Может посоветуете что-нибудь! Желательно вывод с помощью кода.

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: