Вообще-то, данная форма обратной связи подойдёт не только для статических сайтов, но и прекрасно будет работать в
связке с любой CMS, — будь то ресурс на движке WordPress или любой другой.
Если с сайтами на CMS всё просто — за отправку сообщений там отвечает функционал движка и настройки хостинга, на котором развёрнут сайт, то для какого-нибудь статического сайта, собранного на голом html уже придётся искать другие варианты.
Учитывая то, что последние несколько лет всё ещё в тренде сайты-одностраничники (Landing Page или продающие страницы), которые чаще всего являются статическими, вопрос о способах создания контактной формы на таких сайтах вполне актуальный.
В сегодняшнем примере, за отправку сообщений с нашего сайта будет отвечать сервис Formspree.io
Вот код предлагаемой простейшей формы:
<form action="//formspree.io/you@email.com">
<input type="text" name="name">
<input type="email" name="_replyto">
<input type="submit" value="Send">
</form>
А вот так она выглядит:
Естественно, что получившийся минималистичный арт-хаус, позже мы обязательно доведём до ума, а сейчас, давайте в первую очередь рассмотрим сам код.
Обратите внимание на значение поля form action — здесь мы видим url сервиса и email на который будут отправляться наши сообщения. Далее идут стандартные поля формы.
Приступим непосредственно к созданию рабочего примера и разберём этот процесс поэтапно.
Для начала подредактируем внешний вид формы: добавим поле для сообщения, а также добавим и русифицируем поля имён, плейсхолдеров и кнопки:
Код получившейся формы:
<form action="//formspree.io/you@email.com">
<p><input type="text" name="Имя" placeholder="Имя" /></p>
<p><input type="email" name="_replyto" placeholder="Email" /></p>
<p><textarea name="Сообщение" placeholder="Ваше сообщение" rows="7"></textarea></p>
<input type="submit" value="Отправить" />
</form>
Теперь давайте сделаем все три поля (Имя, email и Сообщение) обязательными для заполнения. Для этого будем использовать атрибут required
Получившийся код:
<form action="//formspree.io/you@email.com">
<p><input type="text" name="Имя" required placeholder="Имя" /></p>
<p><input type="email" name="_replyto" required placeholder="Email" /></p>
<p><textarea name="Сообщение" required placeholder="Ваше сообщение" rows="7"></textarea></p>
<input type="submit" value="Отправить" />
</form>
При успешной отправке сообщения, произойдёт редирект на специальную страницу-заглушку сервиса. Мне такой расклад не нравится по двум причинам:
— во-первых, отправителя письма перекидывает на страницу стороннего ресурса;
— во-вторых, на этой самой странице сообщение об успешной отправке сообщения выводится на английском языке, что для русскоязычного сайта будет тоже не совсем красиво.
Исправим эти погрешности.
Добавим скрытое поле, и в нём пропишем url страницы нашего сайта, на который произойдёт редирект после успешной отправки сообщения:
<input type="hidden" name="_next" value="/thanks.html" />
В моём примере это страница thanks.html
Прописать можно как относительный, так и абсолютный адрес страницы.
Саму страницу thanks.html оформляем в соответствии с общим дизайном сайта.
Следующее, что мы сделаем, это оформим описание поля «тема», которое мы будем видеть при получении письма. Чтобы сразу было понятно, что письмо пришло с нашего сайта, пропишем, например, такой заголовок: «Сообщение с моего сайта».
Добавляем это скрытое поле:
<input type="hidden" name="_subject" value="Сообщение с моего сайта" />
Вот как это будет выглядеть в нашем почтовом ящике:
Далее, можно снабдить нашу форму лёгкой защитой от спама:
<input type="text" name="_gotcha" style="display:none" />
Суть защиты такова: по атрибуту display:none мы видим, что это поле скрытое, но в отличие от живого человека, спам боты его видят и соответственно заполняют. Перед отправкой письма адресату, сервис проверяет, заполнено это поле или нет. Если поле заполнено, то сообщение блокируется. Конечно, некоторые боты уже научились выявлять такие трюки, но от
большинства спам мусора, такая защита всё ещё спасает.
Итак, в итоге у нас получился следующий код:
<form method="post" action="//formspree.io/you@email.com">
<input type="hidden" name="_next" value="/thanks.html" />
<input type="hidden" name="_subject" value="Сообщение с моего сайта" />
<input type="text" name="_gotcha" style="display:none" />
<p><input type="text" name="Имя" required placeholder="Имя" /></p>
<p><input type="email" name="email" required placeholder="Email" /></p>
<p><textarea name="Сообщение" required placeholder="Ваше сообщение" rows="7"></textarea></p>
<input type="submit" value="Отправить" />
</form>
Настало время проверить нашу форму на работоспособность.
Перед этим, в поле form action не забудьте заменить you@email.com на свой email.
Перед тем как форма начнёт полноценно работать, нам надо активировать email, который мы прописали в коде. Для этого откройте страницу с вашей формой, заполните все поля и нажмите Отправить. Сервис выдаст следующее сообщение:
Послушно открываете свою почту, находите там письмо от сервиса и жмёте ссылку верификации. После этого сервис нам сообщает:
Всё! Адрес электронной почты подтверждён и следующее сообщение, отправленное из нашей формы обратной связи, попадёт уже непосредственно в наш ящик:
И напоследок, ещё несколько важных нюансов:
Если рабочий код формы обратной связи вы перенесли на какую-либо другую страницу вашего сайта, то, несмотря на то, что email остался прежним, процедуру верификации email’а необходимо будет пройти заново.
Вы не сможете протестировать эту форму локально. Чтобы форма обратной связи работала, страница с кодом формы должна находиться уже непосредственно на хостинге.
Естественно, с помощью многочисленных шаблонов можно придать ей стильный, модный, молодёжный вид. Например, такой:
Всё. Наша форма обратной связи готова.