Программирование формы отзывов и обратной связи
Продолжаем разбирать тему создания Landing Page. Сегодня мы добавим блок отзывов, и форму обратной связи.
Ссылки на предыдущие уроки:
Создаем лендинг - урок 1
Создаем лендинг - урок 2
Создаем лендинг - урок 3
Создаем лендинг - урок 4
HTML код index.html смотрите тут:
Основной CSS код здесь:
При добавлении блока отзывов для правильного позиционирования элементов пришлось применить JQuery - для этого мы подключили JQuery и JS скрипты блока внизу HTML страницы, после тега </body>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/main.js"></script>
Кроме того, добавилось несколько файлов CSS в шапке страницы:
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link href='css/css.css' rel='stylesheet' type='text/css'>
Весь код, вместе с файлами можно скачать здесь
Кроме блока отзывов мы добавили форму обратной связи. Форма выглядит следующим образом:
<form id="form" action="send.php" method="POST"><br>
<input name="name" id="zayavkaName" placeholder="Введите ваше имя" required /><br>
<input name="email" type="email" placeholder="Введите ваш E-mail" required /><br>
<input name="telephone" type="Tel" placeholder="Введите ваш телефон" required/><br>
<textarea name="message" placeholder="Текст вашего сообщения" required></textarea><br>
<input type="submit" type="submit" value="Отправить">
</form>
В атрибуте action="send.php" указываем путь к PHP скрипту для отсылки полей формы к нам на почту (мы создадим его позже), а в атрибуте method="POST" тип запроса к PHP скрипту. Каждое из полей <input> имеет имя name (мы используем его для получения полей в PHP скрипте), и атрибут placeholder в котором отображается подсказка для клиентов сайта, что именно нужно вводить в данное поле. Элемент <textarea name="message" placeholder="Текст вашего сообщения" required></textarea> представляет собой многострочное поле ввода. Вся форма отправляется на сервер при нажатии на кнопку <input type="submit" type="submit" value="Отправить">.
После добавления блока отзывов и формы обратной связи наш лендинг выглядит так:
Материал подготовлен автором @pythono