Форма обратной связи для сайта

944

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

forma

HTML

Итак, начнем, как всегда, с обычной заготовки – html. Для начала нам понадобится форма с несколькими полями. Мы возьмем для наглядности и стандарта всех форм 3 поля. Т.е. это будет Имя, Email и телефон.

<form class="form">
<input type="text" name="mfbName" placeholder="Имя:" required/>
<input type="text" name="mfbMail" placeholder="Email:" required/>
<input type="text" name="mfbPhone" placeholder="Телефон:" required/>
<input type="submit" value="Отправить" />
</form>

Каждый input у нас имеет свое уникальное имя name, оно нам понадобится в дальнейшем для отправки сообщений. Вы можете также свободно добавлять свои поля и не только input, но и select, textarea. Только не забывайте каждому из них присваивать свои имена, которые мы будем использовать при отправке на почту информации. Для удобства я добавил каждому полю атрибут required, благодаря которому браузер не позволит пользователю отправить пустые значения и уведомит о необходимости их заполнения.

CSS

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

form{
max-width: 400px;
width: 100%;
margin: 0 auto;
}
input{
box-sizing: border-box;
display: block;
border: none;
box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.11);
padding: 10px 20px;
width: 100%;
margin: 10px 0;
outline: none;
}
input[type="submit"]{
background: red;
border: none;
box-shadow: 0px 2px 0 1px #C50909;
border-radius: 5px;
color: white;
text-transform: uppercase;
font-weight: 600;
width: 200px;
cursor: pointer;
transition: 0.3s;
}
input[type="submit"]:hover{
background: black;
box-shadow: 0px 2px 0 1px black;
}

Клиентская часть

Здесь уже стоит разобраться более детально, точнее выбрать для себя подходящий вариант. Для отправки сообщений на почту нам понадобится использовать язык php, т.е. создавать отдельный файл, в который мы будем передавать все эти данные. Но мы данный способ здесь не будем рассматривать, так как гораздо красивее, когда у нас все происходит без перезагрузки страницы. Поэтому мы рассмотрим отправку данных через ajax.

Если вы хотите все сделать по старинке, то вам понадобится немного подправить верхний html и задать форме значение атрибута method (post или get). Все зависит от того, каким способом вы хотите передать данные из формы. А также не забудьте прописать action, который укажет путь к файлу php.

А мы пойдем более продвинутым методом и сделаем отправку данных не перезагружая страницу, и получая ответ от сервера будем выдавать пользователю сообщение об успешной операции, либо ошибке. Однако, нам также понадобятся 2 файла, допустим contact.php и custom.js.

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

$(".form").submit(function() {
var str = $(this).serialize();
$.ajax({
   type: "POST",
   url: "contact.php",
   data: str,
   success: function(msg) {
   if(msg == 'ok') {
      alert('Письмо отправлено');
   }
   else {
     alert('Ошибка! Возможно вы неправильно заполнили поля.');
   }
}
});
return false;
});

Теперь разберемся в схеме действий и зачем нам нужны все эти библиотеки и файлы. Когда пользователь нажимает кнопку отправить, у нас происходит событие submit, которое мы пропишем в custom.js и на основе которого получим все данные из формы и передадим их в файл contact.php. Здесь мы еще раз проверяем, не пустые ли у нас поля (дабы избежать очередной возможности спама), производим отправку сообщения на email и уведомляем о результатах пользователя, которые передаются ответом в custom.js.

if (trim($_POST['mfbPhone']) == '') {
echo 'fasle';
}
else {
$txtname = trim($_POST['mfbName']);
$txtemail = trim($_POST['mfbMail']);
$txtphone = trim($_POST['mfbPhone']);

// от кого
$fromMail = 'test@test.ru';
// Сюда введите Ваш email
$emailTo = 'admin@mail.ru';

$subject = 'Обратная связь';
$subject = "=?utf-8?b?". base64_encode($subject) ."?=";
$headers = "From: Пример формы<$fromMail>\n";
$headers .= 'Content-type: text/plain; charset="utf-8"\r\n';
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Date: ". date('D, d M Y h:i:s O') ."\r\n";
// тело письма
$body = "Получено письмо с сайта ".$site." \n\nИмя: ".$txtname."\nТелефон: ".$txtphone."\ne-mail: ".$txtemail."\nСообщение: ".$txtmessage;
mail($emailTo, $subject, $body, $headers );
echo 'ok';
}

Это самый элементарный пример работы контактной формы. Есть множество вариантов, как доработать файл проверки на php, создание своих классов и т.д. Но наша задача была создать простой и рабочий пример, который можно использовать на своем сайте.

demo

файлы

Готовые плагины

Так как вы находитесь на блоге WordPress, то наверняка готовы и стремитесь использовать всевозможные плагины, особенно если вы в программировании и верстке полный ламер. И я вас в этом не виню и могу даже один из них представить вашему вниманию для наглядности. Цель этого абзаца не рекомендация, а лишь пример, так как я использовал плагин Contact Form 7 в нескольких проектах.

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

Плагин Contact Form 7

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

3
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(3 голоса, в среднем: 5 из 5)


не скупись ;-) ставь лайк
Подписка на обновления:
Автор блога Рябухин Максим

Я фрилансер веб-разработчик. Последние несколько лет занимаюсь версткой и веб-программированием на PHP и Javascript. Если вам понадобится помощь с блогом Wordpress, либо адаптация сайта, я всегда рад помочь.

связаться

Поддержи проект:

Вместе с этим советую почитать:

Оставьте комментарий

у меня есть сайт
;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
не пытайтесь оскорбить автора, либо участников блога, ваши комментарии все равно не будут промодерированы!

комментариев: 3
  • Капитолина

    Здравствуйте!

    Вот взяла шаблон на HTML5 — html5up.net/massively, переделала полностью под свою задачу.
    Внизу красивая форма обратной связи, как подключить к нему свой e-mail ?
    Всё, что написано в вашей статье непонятно (((
    Если вы это пишите для новичков, то толк нулевой. Если для профи, то им это не надо, они сами круче напишут.

    Вопрос: сможете помочь подключить почту к форме? Для вас, судя по статье — это 10 минут времени я так понимаю. Два файла переделанные под готовый шаблон. Для меня проверить ваше мастерство — это закачать два файла на хостинг, изменить $emailTo = свой адрес и протестировать его работу.

    P.S. оказываете реальную (а не теоретическое бла бла) помощь благодарному читателю своего блога, сделав конкретную работу. Со своей стороны «донат» гарантирую! Даже можете на основе этого написать отдельную статью, которая уж точно будет актуальной!

    Ответить
    • Максим Рябухин

      Капитолина, судя по всему вы невнимательно читаете, в этом я вам никак не могу помочь. А вот если вы прочтете статью заново, то в статье четко описан каждый пункт и HTML и CSS и даже php c javascript, а уж для совсем ленивых ниже ссылка на рабочий вариант, в нем уже все готово, остается только в файле php поставить свою почту, куда еще проще? По поводу профи ниже написано, что это самый простой вариант для понимания.

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

      P.S. В статье полное «разжевывание» работы каждого элемента. Я четко описал, за что отвечают, какие поля, как добавлять свои и как их передавать в PHP. я оказал реальную помощь с готовой формой, а вы в свою очередь выражаете неблагодарное и хамское отношение, типа берете на понт?

      P.P.S. для таких, как вы, кому «Всё, что написано в вашей статье непонятно» есть отличный совет с плагином, там ваших знаний вообще не требуется, или вам это тоже непонятно? Если уже говорить о вашем шаблоне скачанном, то там необходимо брать за основу то, что я описал выше и подставлять свои имена полей, свои обработчики, как вы можете по логике вырвать два моих файла под одну форму и подставить под свою? У нас как бы разные каркасы, хотя бы это понимание у вас должно быть. В общем, у меня есть блок обратиться за услугой, всегда буду рад помочь! А то, что вам непонятно, так это потому, что вы немного другую цель преследуете, у вас есть готовая форма и вы хотите её настроить, как это делается в статье описано, без базовых знаний конечно вы ничего не поймете.

      Ответить
  • Николай

    Спасибо, качаю архивчик :smile:

    Ответить
показать все


А вы майните?

5 4
Я рекомендую и вывожу деньги здесь: changemoney.me

Курс Бери и Зарабатывай!

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

Узнать больше!

Курс по соц. сетям