Как да добавиш форма за контакт в уебсайта си (която наистина стига до теб)

За да добавиш форма за контакт, която работи, направи кратка форма (име, имейл, съобщение), изпрати я към сървърен маршрут, който валидира въведеното, запазва съобщението в база данни и после ти изпраща имейл известие през доставчик на имейли с таен API ключ. Добави скрито поле honeypot и ограничаване на честотата, за да спреш повечето спам, покажи ясно съобщение за успех и тествай от край до край на публикувания сайт. Най-важното е запазването преди изпращането на имейл: ако имейлът някога се провали, запитването ти остава.

Твоите възможности

Ако сайтът ти вече има бекенд и база данни – каквото често имат приложенията, изградени с AI конструктори – последната опция е най-надеждната и държи запитванията на едно място, където ги виждаш.

Какво включва добрата форма за контакт

• Колкото се може по-малко полета. Име, имейл, съобщение. Падащо меню за тема („Продажби“, „Поддръжка“, „Друго“) само ако ще насочваш по нея.
• Ясни етикети над всяко поле, а не само текст в полето, който изчезва.
• Полезна валидация: „Въведи валиден имейл адрес“, показано до полето.
• Състояние на успех, което казва какво следва: „Благодарим – ще отговорим в рамките на един работен ден.“
• Бележка за поверителността, която казва как ще използваш данните, с връзка към политиката за поверителност.
• Резервен вариант, например имейл адрес или телефон, за хората, които предпочитат него.

Примерни промпти

Основната форма:

Добави форма за контакт на страницата Контакт с име, имейл и съобщение (всички задължителни, съобщението до 2000 символа). Изпрати я към сървърен маршрут, който валидира въведеното, запазва го в таблица contact_messages с времето на получаване и показва съобщение за успех: „Благодарим, ще отговорим в рамките на един работен ден.“ Показвай грешките в полетата. Направи я удобна на телефони.

Имейл известия:

Когато съобщение за контакт се запази, изпрати ми известие на hello@example.com през Resend с ключа в RESEND_API_KEY. Задай reply-to на имейла на подателя, за да мога да отговоря директно. Ако изпращането се провали, запази съобщението и запиши грешката в лога, без да показваш ключа.

Защита от спам:

Добави защита от спам към формата за контакт: скрито поле honeypot, което трябва да остане празно, лимит от 5 изпращания на IP на час на сървъра и отхвърляне на съобщения с повече от 3 линка. Тихо отхвърляй изпращанията с honeypot, но покажи успех.

Входяща кутия:

Добави административна страница, защитена с парола, която показва съобщенията за контакт, най-новите първи, с отметка „обработено“ и филтър за необработените.

Стъпка по стъпка

1. Реши къде отиват съобщенията: кой получава известията и кой отговаря.
2. Изгради формата с полетата по-горе, достъпни етикети и полета, удобни за телефон (използвай тип email, за да се показва правилната клавиатура).
3. Създай сървърния маршрут. Той проверява задължителните полета, формата на имейла и лимитите за дължина. Никога не разчитай само на валидация в браузъра.
4. Запази в базата данни първо. Виж как да добавиш база данни към приложението си.
5. Настрой доставчик на имейли. Създай акаунт, потвърди домейна за изпращане и съхрани API ключа като тайна. Как да изпращаш имейли от приложението си разглежда настройката на домейна (SPF, DKIM) подробно.
6. Изпрати известието от сървъра след запазването. Използвай потвърдения си домейн като подател и имейла на посетителя като reply-to – не изпращай „от“ името на адреса на посетителя, защото вероятно ще бъде отхвърлено като подмяна.
7. По желание изпращай автоматичен отговор до посетителя, но да е кратък; автоматичните отговори към спам адреси могат да навредят на репутацията ти като подател.
8. Добави защита от спам: honeypot, ограничаване на честотата, после проверка от типа CAPTCHA, ако е нужна.
9. Тествай на публикувания сайт: изпрати, провери базата данни, провери входящата си кутия и папката за спам, кликни „Отговори“.

Спиране на спама

Формите за контакт привличат ботове в рамките на дни след пускането. Слагай защити от най-малко към най-натрапчивото:

1. Поле honeypot. Поле, скрито от хората; ботовете го попълват. Не струва нищо на реалните посетители.
2. Ограничаване на честотата на сървъра. Ограничава колко съобщения може да изпрати един адрес за даден период.
3. Правила за съдържанието. Отхвърляй съобщения, пълни с линкове, или с празно или абсурдно дълго поле за съобщение.
4. Проверка от типа CAPTCHA, като Cloudflare Turnstile или Google reCAPTCHA. Токенът трябва да се проверява на сървъра; проверка, която работи само в браузъра, може да бъде пропусната.

Често срещани грешки

• Показване на „Изпратено!“, когато нищо не е изпратено. Интерфейсът казва успех преди или независимо от отговора на сървъра. Винаги чакай сървъра.
• Само имейл, без база данни. Една грешно конфигурирана стойност и запитванията изчезват за седмици, без никой да забележи.
• API ключ във фронтенд кода. Всеки може да го използва, за да изпраща имейл от твое име.
• Непотвърден домейн за изпращане. Известията попадат в спам или никога не пристигат.
• Изпращане „от“ имейла на посетителя. Използвай reply-to.
• Без лимити за дължина. Ботовете вмъкват огромни блокове текст.
• Никога не тестван публикуван сайт. Ключовете и домейните често се различават между preview и продукция.

Контролен списък

• Кратка форма с видими етикети и ясни грешки
• Валидация на сървъра и лимити за дължина
• Всяко съобщение е запазено в базата данни
• Известието се изпраща от потвърден домейн, с зададен reply-to
• API ключът за имейл е съхранен само като сървърна тайна
• Honeypot и ограничаване на честотата са на място
• Съобщението за успех се показва, едва след като сървърът потвърди
• Бележката за поверителност води към политиката за поверителност
• Тествано от край до край на публикувания сайт, включително папката за спам

Форми за контакт в Mythex

В Mythex можеш да изградиш цялото нещо от чат. Поискай формата и база данни в същия промпт (или напиши /database), за да се запазват изпращанията. Mythex няма вграден продукт за изпращане на имейли, затова за известията ти трябва доставчик като Resend, SendGrid или Postmark; добави ключа му с /secrets или в настройките на проекта и поискай агентът да изпраща от сървъра – виж Изпращане на имейл от приложението ти. Преди да разчиташ на него, пусни App Testing (/test) срещу формата в Preview, после публикувай и тествай на живия URL.

Формата за контакт е ключова част от повечето уебсайтове за малък бизнес и целеви страници. Прегледай контролния списък за сигурност преди пускане.

Въпроси