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


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

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

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

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

https://pastebin.com/uePkEMCW

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

https://pastebin.com/Kb6FnFnu

При добавлении блока отзывов для правильного позиционирования элементов пришлось применить JQuery - для этого мы подключили JQuery и JS скрипты блока внизу HTML страницы, после тега

Кроме того, добавилось несколько файлов CSS в шапке страницы:

Весь код, вместе с файлами можно скачать здесь

Кроме блока отзывов мы добавили форму обратной связи. Форма выглядит следующим образом:

<form id="form"  ><br>
       <input  id="zayavkaName"  required /><br>
       <input    required /><br>
       <input    required/><br>
       <textarea   required></textarea><br>
       <input   >
   </form>

В атрибуте action="send.php" указываем путь к PHP скрипту для отсылки полей формы к нам на почту (мы создадим его позже), а в атрибуте method="POST" тип запроса к PHP скрипту. Каждое из полей <input> имеет имя name (мы используем его для получения полей в PHP скрипте), и атрибут placeholder в котором отображается подсказка для клиентов сайта, что именно нужно вводить в данное поле. Элемент <textarea required></textarea> представляет собой многострочное поле ввода. Вся форма отправляется на сервер при нажатии на кнопку <input >.

После добавления блока отзывов и формы обратной связи наш лендинг выглядит так:

Материал подготовлен автором @pythono


Comments 1