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

обратная связьВариантов создания формы обратной связи для wordpress блогов существует великое множество. Я уже рассказывала о том, как это сделать с помощью плагина Contact Form 7.

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

Зачем нужно создавать форму без плагина?

Когда я рассказывала про установку кнопок социальных сетей без плагина, я упоминала о том, что плагин Sosial Sare Buttons оказался самым «тяжелым» в плане загрузки. На втором месте после него оказались плагины Contact Form 7 и Yet Another Related Posts Plugin. Суммарно они даже «тяжелее» Sosial Sare Buttons для загрузки оказались.

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

Кстати, хочу извиниться перед участниками Марафона, что давно не было заданий. Несколько дней настраивала форму обратной связи, поэтому задание не публиковала, чтобы чей-то ответ не пропал. Теперь форма полностью рабочая, так что в конце статьи вас ждет очередное задание.

Как создать форму обратной связи с помощью кода

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

Код состоит из 2-х частей.

1-я помещается в файл mail.php Его можно создать с помощью редактора Notepad++ или в редакторе на хостинге (по крайней мере TimeWeb такую возможность дает).

Автор предлагает поместить этот файл в папку с вашей темой, т.е. по адресу
/wp-content/themes/НАЗВАНИЕ ТЕМЫ/mail.php
Тогда этот файл можно будет редактировать из админпанели WP.

Содержимое файла:

<meta http-equiv='refresh' content='5; url=http://АДРЕС СТРАНИЦЫ ВОЗВРАТА/'></meta>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<?php
if (isset($_POST['name'])) {$name = $_POST['name'];}
if (isset($_POST['email'])) {$email = $_POST['email'];}
if (isset($_POST['sub'])) {$sub = $_POST['sub'];}
if (isset($_POST['body'])) {$body = $_POST['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 «СООБЩЕНИЕ ОБ УСПЕШНОЙ ОТПРАВКЕ«;
}
else
{
echo «СООБЩЕНИЕ ОБ ОШИБКЕ«;
}
?>

Красным выделены переменные, которые вы можете менять:
5 (сек) время, через которое отправитель будет перенаправлен на страницу, указанную в строке

АДРЕС СТРАНИЦЫ ВОЗВРАТА — у меня указана главная страница блога . Вы можете перенаправить на страницу обратной связи, страницу благодарности, или куда подскажет ваша фантазия.

charset=UTF-8 — ваша кодировка текста.

АДРЕС ПОЧТЫ - ваша почта, на которую будут отправляться сообщения через форму обратной связи. Сначала я поставила адрес на mail.ru. Сообщения приходили с задержкой в несколько часов (чуть ли не до суток). Поменяла почту на yandex.ru — сообщения стали приходить буквально через минуту!

СООБЩЕНИЕ ОБ УСПЕШНОЙ ОТПРАВКЕ — если сообщение отправлено успешно, у меня выводится: «Сообщение отправлено, через несколько секунд вы будете перенаправлены на главную страницу Блога ДЕЛАЙ И БОГАТЕЙ!».

СООБЩЕНИЕ ОБ ОШИБКЕ — если возникли проблемы с отправкой сообщения, выводится: «Сообщение не отправлено, проверьте правильность заполнения полей и попробуйте снова»

Вторая часть кода помещается на страницу обратной связи (вставляем в режиме ТЕКСТ!)

<form name="MyForm" action="/wp-content/themes/НАЗВАНИЕ ТЕМЫ/mail.php" method="post">
<p><input name="name" type="text" style="width:35%" value="Ваше имя" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /></p>

<p><input name="email" type="text" style="width:35%" value="E-mail" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /></p>

<p><input name="sub" type="text" style="width:35%" value="Тема сообщения" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /></p>

<p><textarea name="body" cols="1" rows="5" style="width:100%" onfocus="if(this.value=='Текст сообщения'){this.value=''};" onblur="if(this.value==''){this.value='Текст сообщения'}" >Текст сообщения</textarea></p>
<p><input value="Отправить сообщение" type="submit" /></p>
</form>

 

Что тут можно/нужно поменять-настроить?
wp-content/themes/НАЗВАНИЕ ТЕМЫ/ — путь к директории, где размещен файл mail.php

width:хх% — ширина поля. Чем меньше цифра, тем поле будет уже.

rows=»5″ — высота блока для сообщения в строчках.

Ваше имя, E-mail, Тема сообщения, Текст сообщения, Отправить сообщение — подписи к полям формы и кнопке.

Эта форма у меня сейчас стоит на страничке обратной связи.

Она без капчи!

Как создать форму обратной связи с помощью сервиса JotForm

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

форма приема платежей
Чтобы создать форму обратной связи надо зайти на сайт https://www.jotform.com/
При первом обращении вам предложат посмотреть обучающий ролик (на английском) либо перейти к созданию формы.

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

создание формы обратной связи

Для создания формы нам понадобятся блоки

formbuilder2      formbuilder3   форма обратной связи
Из раздела Form Tools:
• Heading — если нужен заголовок для формы;
• Text Box — для имени отправителя;
• Text Area — для ввода текста сообщения;
• Submit Button — для кнопки.
Из раздела Quick Tools: E-mail — для адреса отправителя.
По желанию из раздела Power Tools: Hidden Box или Captcha для защиты от спама.

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

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

formbuilder5

 Для кнопки отправки сообщения появляется свое меню в верхней части экрана.

formbuilder8
Там мы задаем текст кнопки и выбираем ее внешний вид.

formbuilder10
После этого нам предлагают ввести e-mail, на который будут отправляться сообщения через форму обратной связи.

formbuilder11
На вкладке Form Style для всей формы сразу задаем шрифт, его размер и цвет, ширину формы и т.п.

formbuilder12
После чего идем на вкладку Setup&Embed.

formbuilder16

Там мы можем задать параметры страницы благодарности.

formbuilder13
После чего нажимаем кнопку Embed Form и выбираем, куда будем вставлять форму. Для блога на WP его и выбираем :).

formbuilder14
После чего получаем код и вставляем себе на страничку обратной связи (опять таки в режиме ТЕКСТ!)

formbuilder15

Созданная форма обратной связи рабочая — я в тестовом режиме гоняла ее у себя на блоге. Все сообщения уходят и доходят без проблем.

Какой вариант выбрать — дело вкуса.

А теперь обещанное 5-е задание Марафона Эрудитов. Проверим, знаете ли вы русский язык. Поскольку сама форма задания содержит в себе подсказки, то оценивается оно всего в 1 балл. Форма задания большая, рекомендую открыть ее в полноэкранном режиме (кнопочка вверху справа над заданием). Удачи!

Ключевое слово отправляем через форму обратной связи. Не зря же я ее обновила :).


Понравилось? Поделись с друзьями!

Комментарии:

17 Комментариев

  1. Катерина, спасибо за очень своевременный пост! Только я задумалась о том, как бы с наименьшими потерями в скорости блога установить на него форму обратной связи, и тут вы в rss со своей статьей! Коды скопировала, буду ставить. Кстати, в режиме «Текст» — это все-таки в визуальном редакторе или html?

  2. Я обратную связь установила с помощью специального сервиса, но может и на код когда перейду.

  3. У меня форма тоже с помощью сервиса установлена, но сервисы, видимо, тоже блог подгружают?

    • Подгружают, конечно :), но меньше, чем CF7. Я когда ставила форму с сервиса для эксперимента, тоже скорость загрузки тестировала — была выше, чем с плагином.

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

    • А Вам часто отсылают незаполненную форму?
      Я думаю, вряд ли у кого-то возникнет желание весело провести время — походить по чужим блогам и поотсылать незаполненные формы :)
      К тому же, во второй части статьи описан сервис генерации форм, который и на заполненность, и на спам проверяет — выбирайте, что больше по душе…

  5. А по поводу сервисов генерации форм это больше для HTML сайтов подойдет.

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

  7. Я что-то пока не решаюсь плагин contact form 7 на код заменять. А Вы уже проверяли, Катерина, обратная связь исправно работает с кодом?

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

  8. А как бы посмотреть как выглядит визуально та или иная форма?

  9. Денис:

    форма обр. связи без плагинов быстрее загружается

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

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