Форма mailto чи бекенд для форм: що обрати

Що насправді робить форма mailto

Звичайна форма надсилає поля на вебадресу. У формі mailto в атрибуті action стоїть email. Стандарт HTML описує, що з цим робить браузер. Лист за вас він не надсилає ніколи.

• З method="GET" браузер перетворює поля на тему та заголовки нового листа.
• З method="POST" браузер кладе поля в текст листа. З enctype="text/plain" текст читабельний. Без нього він закодований, як в адресі сторінки.

В обох випадках браузер відкриває поштову програму з чернеткою. Відвідувач ще має натиснути «Надіслати» вже там. Сторінка не отримує відповіді, тож не знає, чи лист пішов.

Чому форма mailto губить заявки

Кожен крок після кліку залежить від пристрою відвідувача. Саме там і губляться листи:

• Немає поштової програми. Багато людей читає пошту у вкладці браузера. Якщо програму за замовчуванням не задано, клік може нічого не зробити. Або система спитає, чим відкрити посилання.
• Ніхто не натиснув «Надіслати». Чернетка відкрилася, а людина її закрила, відволіклася чи подумала, що форма вже все надіслала.
• Немає підтвердження. Сторінка не може написати «Дякуємо, ми отримали заявку», бо не знає результату.
• Немає копії. Ніщо не зберігається, тож загублений лист зникає назавжди.
• Адреса на виду. Ваш email лежить у коді сторінки, звідки його збирають спам-боти.
• Незручний текст. Без text/plain лист приходить як name=Olena&message=Dobryi%20den.

До того ж відвідувач пише зі своєї особистої скриньки. Не кожен хоче світити її компанії, яку ще не знає.

Коли посилання mailto цілком доречне

Посилання mailto — це не те саме, що форма mailto. Посилання чесне: людина натискає «Написати нам» і очікує, що відкриється пошта. Воно добре працює як другий спосіб зв'язку поруч із формою.

У посиланні можна заздалегідь задати тему й перший рядок листа. Формат описано в RFC 6068. Кирилицю, пробіли й переноси рядків треба закодувати, інакше частина програм обріже текст.

<!-- Кирилиця, пробіли й переноси рядків закодовані як UTF-8. -->
<a href="mailto:hello@example.com?subject=%D0%97%D0%B0%D0%BF%D0%B8%D1%82%20%D1%89%D0%BE%D0%B4%D0%BE%20%D0%BF%D1%80%D0%BE%D1%94%D0%BA%D1%82%D1%83&body=%D0%94%D0%BE%D0%B1%D1%80%D0%B8%D0%B9%20%D0%B4%D0%B5%D0%BD%D1%8C!%0D%0A%0D%0A%D0%A5%D0%BE%D1%87%D1%83%20%D0%B7%D0%B0%D0%BF%D0%B8%D1%82%D0%B0%D1%82%D0%B8%20%D0%BF%D1%80%D0%BE">
  Написати нам про проєкт
</a>

Замініть форму mailto на робочу

Поля залишаються ті самі. Змінюються дві речі: action і прихований ключ. Тепер форма надсилає дані на бекенд для форм. Він зберігає заявку, надсилає вам лист і показує відвідувачу сторінку подяки. Від поштової програми відвідувача більше нічого не залежить.

У прикладі нижче використано Formgong. Замініть fk_your_access_key на ключ із кабінету. Поле _lang задає мову сторінки подяки, а _subject — тему листа-сповіщення. Приховане поле botcheck ловить простих ботів. Вашої адреси в коді сторінки більше немає.

<!-- Було: <form action="mailto:you@example.com" method="POST" enctype="text/plain"> -->
<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="uk">
  <input type="hidden" name="_subject" value="Нова заявка з сайту">
  <label>Ім'я <input type="text" name="name" required autocomplete="name"></label>
  <label>Email <input type="email" name="email" required autocomplete="email"></label>
  <label>Повідомлення <textarea name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
    <input type="text" name="botcheck" tabindex="-1" autocomplete="off">
  </div>
  <button type="submit">Надіслати</button>
</form>

Інші способи отримувати дані з форми

• Бекенд для форм. Змінили action — і готово. Так працюють Formgong, Formspree, Web3Forms та інші. Різницю в лімітах і можливостях показує порівняння сервісів форм.
• Власний скрипт. PHP-файл або серверна функція приймає форму й надсилає лист. Усе під вашим контролем, але доставку листів і захист від спаму теж налаштовуєте ви.
• Готова форма на чужому сервісі. Google Forms і схожі сервіси дають посилання чи вбудовування. Швидко, але виглядає як їхній продукт, а не ваш сайт.

Повну форму крок за кроком розбираємо в статті HTML-форма зворотного зв'язку без бекенду. Усі приховані поля Formgong описано в документації для HTML.

Перевірте форму перед публікацією

Вставте HTML форми в безкоштовну перевірку форм. Вона позначає як помилку action, що не є вебадресою, наприклад mailto:. Також вона перевіряє назви полів, метод і поле-пастку.

Потім надішліть справжню тестову заявку з опублікованої сторінки, з телефона й з ноутбука. Переконайтеся, що лист приходить, а відвідувач бачить зрозумілу сторінку подяки.