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

Продолжаем разбирать тему создания Landing Page. Сегодня мы добавим блок отзывов, и форму обратной связи.

Ссылки на предыдущие уроки:

Создаем лендинг - урок 1
Создаем лендинг - урок 2
Создаем лендинг - урок 3
Создаем лендинг - урок 4

HTML код index.html смотрите тут:

https://pastebin.com/uePkEMCW

Основной CSS код здесь:

https://pastebin.com/Kb6FnFnu

При добавлении блока отзывов для правильного позиционирования элементов пришлось применить 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

vox-populiпрограммированиесайтостроениесайтылендинг
25%
30
106
206.386 GOLOS
0
В избранное
Web Development
Тех, кто презирает программистов, программисты презирают сильнее, чем те, кто презирает тех программистов, которые презирают тех, кто их презирает.
106
0

Зарегистрируйтесь, чтобы проголосовать за пост или написать комментарий

Авторы получают вознаграждение, когда пользователи голосуют за их посты. Голосующие читатели также получают вознаграждение за свои голоса.

Зарегистрироваться
Комментарии (1)
Сортировать по:
Сначала старые