Выбрать страницу

Как сделать форму для получения контактов пользователей на landing page компании

Форма для обратной связи – обязательный элемент структуры любой посадочной страницы. Она позволяет принимать заказы посетителей или отправлять потенциальным клиентам каталоги продуктов и услуг компании, получив их e-mail. В этой статье мы подробно расскажем о том, как создать такую форму самостоятельно.

Html-разметка

Обычно форме для обратной связи достаточно создать 3 поля со следующей разметкой:

Откройте этот код в интернет-обозревателе и взгляните на то, что получилось. В разных версиях браузеров могут быть различия, но обычно это выглядит так:

Css-разметка

Теперь создадим для нашей формы стиль и сделаем ее более читабельной:

Для плавного изменения цвета кнопки, в .applicationButton и .applicationButton:hover можно добавить строку:

Где .6s — продолжительность анимации в миллисекундах.

Php-разметка

Теперь создадим файл application.php. Он должен отправлять нам на email данные, полученные из контактной формы при ее заполнении. Это будет обычный html-файл, например – ваша Thank you page. Пользователь попадет на нее, нажав на активную кнопку формы обратной связи, поэтому оформить ее нужно соответствующим образом:

Где $subject = «Новое сообщение»; — название темы письма.

Чтобы письмо приходило с адреса, который пользователь указал при заполнении соответствующего поля формы (input type=»email»), нужно подставить данные из $usermail (переменная, которая хранит информацию из поля для ввода email). Для этого прописываем строку:

Дальше мы задаем внешний вид письма:

Первая строка отвечает за шрифт, вторая – выводит само сообщение. Следующие три строки передают данные из формы обратной связи. Далее определяем, что произойдет, если письмо отправлено успешно или не успешно, с помощью функции mail:

Можно вместо картинок с текстом выводить полноценные страницы. Можно сделать автоматический редирект на главную страницу через пару секунд, добавив между тегами <head></head> строку:

<meta http-equiv=»Refresh» content=»3; url=http://Адрес сайта/»>

Вот, пожалуй, и все. Теперь вы можете сами сделать форму обратной связи для landing page компании. Если есть предложения по улучшению кода – пишите их в комментариях!

Источник: smartlanding.biz/sozdanie-formy-obratnoj-svyazi.html

apteka mujchine for man ukonkemerovo woditely driver.