Форма обратной связи для сайта. Пошаговый мануал! 06.07.2013

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

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

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

Смотрится красиво, делается легко. Давайте приступим.

Форма обратной связи для сайта. Все по порядку!

Для начала откроем notepad++ и просто создадим обычный файлик .html В него вставим каркас страницы.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
«http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Форма обратной связи для сайта</title>
</head>
<body>

</body>
</html>

Кодировку в notepad++ выставим utf-8 без BOM:

Между тегами <body></body> создаем нашу форма. Она будет содержать 3 поля:

  1. Имя
  2. E-mail
  3. Поле для комментариев

<div class="forma">
<h3>Форма обратной связи: </h3><br>
<form action="http://site.ru/formdata.php" method="POST" name="form1">
<p><label for="name">Ваше имя:</label>
<input id="name" class="white name" type="text" name="name" maxlength="30" /></p>
<p><label for="mail">Ваш E-mail:</label>
<input id="mail" class="white mail" type="text" name="mail" maxlength="50" /></p>
<p><label for="text">Сообщение:</label></p>
<p><textarea id="text" class="white textarea" name="text"></textarea></p>
<input id="submit" type="submit" name="submitt" value="ОТПРАВИТЬ« />
</form>
</div>

Сохраним наш файл и посмотрим что получилось:

пока она не рабочая и выглядит не совсем красиво, но, это все поправимо.

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

После чего надо будет просто открыть файл style.css и поместить туда нужные вам стили. Файл стилей в движке вордпрес находится вот тут:  /public_html/wp-content/themes/название вашей темы/style.css

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

/*ОБРАТНАЯ СВЯЗЬ*/
*:focus {outline: none;}

img {border:none}

.forma {
overflow: hidden;
width: 350px;
margin: 30px 0 0 80px;
padding: 10px 0 10px 15px;
border: 1px solid #b7b7b7;
box-shadow: -1px 2px 3px 2px #cecece;
}

.forma h3 {
font: normal 27px Arial;
color: #03378B;
}

.forma p {
font: normal 27px Arial;
color: #000;
line-height: 1.3;
}

.white {
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -webkit-gradient (linear, left top, left bottom, from (#fff), to (#ededed));
background: -moz-linear-gradient (top, #fff, #ededed);
background-image: -o-linear-gradient (top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#ffffff', endColorstr='#ededed');
}

.white:hover {
border: solid 1px #03378B;
}

.white:focus {
border: solid 1px #03378B;
}

.name{
width: 200px;
height: 20px;
margin: 0;
padding: 2px 0 3px 4px;
— webkit-border-radius: .3em;
— moz-border-radius: .3em;
border-radius: .3em;
font: normal 20px Arial;
color: #141515;
}

.mail{
width: 190px;
height: 20px;
margin: 0;
padding: 2px 0 3px 4px;
— webkit-border-radius: .3em;
— moz-border-radius: .3em;
border-radius: .3em;
font: normal 20px Arial;
color: #141515;
}

.textarea {
width: 325px;
height: 150px;
margin: 0 0 17px 0;
padding: 2px 0 3px 4px;
— webkit-border-radius: .3em;
— moz-border-radius: .3em;
border-radius: .3em;
font: normal 20px Arial;
color: #141515;
}

#submitt {
float: right;
box-shadow: 0px 1px 1px rgba (0,0,0,0.1);
color: #979797;
text-shadow: 1px 1px 1px rgba (0,0,0,0.2);
border: 3px solid #979797;
margin: 0 30px 0 0;
padding: 0 7px 0 4px;
font: normal 14px Myriad Pro;
line-height: 30px;
width: 100px;
text-align: center;
background: #f1f1f1;
}

#submitt:hover {
border: 3px solid #03378B;
background: #f1f1f1;
color: #03378B;
}

Вставляем, сохраняем, готово!

Далее делаем следующее. это у нас готова только форма но она еще не работает. Чтобы она у нас заработало, необходимо загрузить файлик formdata.php в нашу корневую папку сайта. т.е. в  /public_html или /httpdocs, у кого какая вообщем. Делается это через FTP И в этом файлике заменить несколько значений на свои собственные. И еще давайте сразу же в нашей форме изменим строчку:

<form action=»http://site.ru/formdata.php" method="POST" name="form1">

туда надо вписать домен вашего сайта вместо — site.ru.

А formdata.php открываем через редактор и изменяем:

<link rel="stylesheet" type="text/css" href="css/style.css" /> на полный путь до файла стилей, если это wordpress, то будет выглядеть вот так - <link rel="stylesheet" type="text/css" href="http://ваш-сайт.ru/wp-content/themes/название вашей темы/style.css" />

<meta http-equiv="refresh" content="3; url=http://site.ru"> тут заменим url страницы, на которую будет переадресовывать нас обработчик через 3 секунды.

В строчке «$result = mail („mail@mail.ru“,»Письмо из формы обратной связи.","С сайта было отправлено письмо:" указываем свой почтовый ящик на который будут приходить письма. Вместо mail@mail.ru пишем свой ящик.

В файл style.css добавляем стили для нашего обработчика:

/*СТИЛЬ ДЛЯ formdata.php*/

.pismo { width: 320px; border: 1px solid #707174; background: #EFF0F3; padding: 20px 10px; margin: 170px auto; } .pismo p { text-align: center; font: normal 18px Myriad Pro; color: #03378B; }

На этом все, остается только протестировать форму. Подписывайтесь на обновления! Будем держать связь.

До встречи на Sayt-Stroy.com

 

Метки: ,

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

Данная книга расскажет о всех секретах правильного и полноценного продвижения интернет проектов.

Именно с нее следует начать изучение SEO.

WordPress

2 комментария на «Форма обратной связи для сайта. Пошаговый мануал!»

  1. Ирина:

    Я только учусь, почерпнула много информации, о которой и не подозревала, спасибо.

    • admin:

      Спасибо Ирина, за отзыв! Подбрасывайте вопросы которые бы еще хотели узнать, обязательно напишу новый пост.

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

ВКонтакте