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

За да додадете контакт формулар што работи, изградете краток формулар (име, е-пошта, порака), испратете го до серверска рута што ги проверува внесените податоци, ја зачувува пораката во база на податоци, а потоа ти испраќа известување по е-пошта преку провајдер за е-пошта со тајен API клуч. Додајте скриено honeypot поле и ограничување на брзината за да спречите најголем дел спам, прикажете јасна порака за успех и тестирајте од почеток до крај на објавената страница. Зачувувањето пред испраќањето е важниот дел: ако е-поштата некогаш не успее, сè уште го имате упитот.

Вашите опции

Ако твојата страница веќе има backend и база на податоци — што апликациите изградени со AI градители на апликации често имаат — последната опција е најпоуздана и ги чува упитите таму каде што можеш да ги видиш.

Што содржи добар контакт формулар

• Колку што е можно помалку полиња. Име, е-пошта, порака. Додај падајачко поле за тема („Продажба“, „Поддршка“, „Друго“) само ако ќе насочуваш според неа.
• Јасни ознаки над секое поле, а не само текст за место што исчезнува.
• Корисна валидација: „Внеси валидна адреса на е-пошта“, прикажана до полето.
• Состојба на успех што кажува што следува: „Благодариме — одговараме во рок од еден работен ден.“
• Белешка за приватност што објаснува како ќе ги користиш податоците, поврзана со твојата политика за приватност.
• Резерва, како твојата е-пошта или телефонски број, за луѓе што така претпочитаат.

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

Основниот формулар:

Додај контакт формулар на страницата Contact со име, е-пошта и порака (сите задолжителни, пораката до 2.000 знаци). Испрати го до серверска рута што ги проверува податоците, ја зачувува во табелата contact_messages со времето на приемот и прикажува порака за успех: „Благодариме, ќе одговориме во рок од еден работен ден.“ Прикажувај грешки за полињата внатре во формуларот. Направи го добро да работи на телефони.

Известувања по е-пошта:

Кога ќе се зачува контакт порака, испрати ми известување по е-пошта на hello@example.com со Resend, со клучот во RESEND_API_KEY. Постави reply-to на е-поштата на испраќачот за да можам директно да одговорам. Ако испраќањето не успее, задржи ја зачуваната порака и запиши ја грешката без да го откриваш клучот.

Заштита од спам:

Додај заштита од спам на контакт формуларот: скриено honeypot поле што мора да остане празно, ограничување од 5 испраќања по IP адреса на час на серверот и одбивање на пораки со повеќе од 3 линкови. Тивко отфрли ги испраќањата со honeypot, но сепак прикажи успех.

Поштинско сандаче:

Додај административна страница заштитена со лозинка што ги наведува контакт порака најновите прво, со поле „обработено“ и филтер за необработени пораки.

Чекор по чекор

1. Одлучи каде одат пораките: кој ги прима известувањата и кој одговара.
2. Изгради го формуларот со горните полиња, достапни ознаки и инпути погодни за мобилни уреди (користи го типот на влез за е-пошта за телефоните да ја покажат вистинската тастатура).
3. Создај ја серверската рута. Таа ги проверува задолжителните полиња, форматот на е-поштата и ограничувањата на должината. Никогаш не верувај на валидација само во прелистувачот.
4. Зачувај во базата на податоци прво. Погледни како да додадеш база на податоци во твојата апликација.
5. Постави провајдер за е-пошта. Создај сметка, потврди го доменот за испраќање и зачувај го API клучот како тајна. Како да испраќаш е-пошта од твојата апликација ги опфаќа поставките на доменот (SPF, DKIM) подетално.
6. Испрати го известувањето од серверот по зачувувањето. Користи го твојот потврден домен како испраќач и е-поштата на посетителот како reply-to — не испраќај „од“ адресата на посетителот, бидејќи најверојатно ќе биде одбиено како spoofing.
7. По желба автоматски одговор до посетителот, но нека биде краток; автоматските одговори до спам адреси можат да ја наштетат репутацијата на твојот испраќач.
8. Додај заштита од спам: honeypot, ограничување на брзината, па проверка во стилот на CAPTCHA ако е потребно.
9. Тестирај на објавената страница: испрати, провери ја базата на податоци, провери го поштинското сандаче и папката со спам, кликни одговори.

Спречување спам

Контакт формуларите привлекуваат ботови во рок од денови откако ќе се пуштат. Слоеви одбрани од најмалку до најнаметливо:

1. Honeypot поле. Поле скриено од луѓето; ботовите го пополнуваат. Вистинските посетители ништо не чини.
2. Ограничување на брзината на серверот. Ограничува колку пораки може да испрати една адреса во даден период.
3. Правила за содржина. Одбивај пораки полни со линкови или со поле за порака што е празно или апсурдно долго.
4. Проверка во стилот на CAPTCHA, како Cloudflare Turnstile или Google reCAPTCHA. Токенот мора да се проверува на твојот сервер; проверка што работи само во прелистувачот може да се прескокне.

Чести грешки

• Прикажување „Испратено!“ кога ништо не е испратено. Интерфејсот кажува успех пред или без оглед на одговорот од серверот. Секогаш почекај го серверот.
• Само е-пошта, без база на податоци. Еден погрешно конфигуриран клуч и упитите исчезнуваат со недели, а никој не забележува.
• API клуч во фронтенд кодот. Секој може да го користи за да испраќа е-пошта во твое име.
• Непотврден домен за испраќање. Известувањата завршуваат во спам или никогаш не стигнуваат.
• Испраќање „од“ е-поштата на посетителот. Користи reply-to наместо тоа.
• Без ограничувања на должината. Ботовите залепуваат огромни блокови текст.
• Никогаш не тестирање на живата страница. Клучевите и домените често се различни меѓу прегледот и продукцијата.

Листа за проверка

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

Контакт формулари во Mythex

Во Mythex, целото нешто можеш да го изградиш од разговор. Побарај формулар и база на податоци во истиот промпт (или впиши /database) за испраќањата да бидат трајни. Mythex нема вграден производ за испраќање е-пошта, па за известувања донесуваш провајдер како Resend, SendGrid или Postmark, додаваш негов клуч со /secrets или поставките на проектот и го бараш од агентот да испраќа од серверот — погледни Испраќање е-пошта од твојата апликација. Пред да се потпреш на тоа, пушти App Testing (/test) врз формуларот во Preview, па објави и тестирај на живиот URL.

Контакт формуларот е клучен дел од повеќето мали деловни веб страници и страници за слетување. Провери ја листата за безбедност пред лансирање.

Прашања