Paano Magdagdag ng Contact Form sa Website Mo (Na Talagang Nakakarating sa Iyo)

Para magdagdag ng contact form na gumagana, gumawa ng maikling form (pangalan, email, mensahe), ipadala ito sa server route na nagva-validate ng input, i-save ang mensahe sa database, at saka magpadala ng notification sa email sa pamamagitan ng email provider gamit ang lihim na API key. Magdagdag ng nakatagong honeypot field at rate limiting para pigilan ang karamihan ng spam, magpakita ng malinaw na mensahe ng tagumpay, at subukan ito nang buo sa nailathalang site. Ang mahalagang bahagi ay ang pag-save bago ang email: kung pumalya ang email, nasa iyo pa rin ang tanong.

Mga opsyon mo

Kung may backend at database na ang site mo, na madalas mangyari sa mga app na ginawa gamit ang AI app builder, ang huling opsyon ang pinakamaaasahan at pinapanatili ang mga tanong kung saan mo sila makikita.

Ano ang kasama sa mahusay na contact form

• Pinakakaunting field hangga't maaari. Pangalan, email, mensahe. Magdagdag ng dropdown ng subject ("Sales", "Support", "Iba pa") kung ire-route mo ito ayon doon.
• Malinaw na label sa itaas ng bawat field, hindi lang placeholder text na nawawala kapag tina-type.
• Kapaki-pakinabang na validation: "Maglagay ng tamang email address", ipinapakita sa tabi ng field.
• Estado ng tagumpay na nagsasabi kung ano ang susunod: "Salamat. Sasagot kami sa loob ng isang working day."
• Paalala sa privacy na nagsasabi kung paano gagamitin ang detalye, na naka-link sa privacy policy mo.
• Alternatibo tulad ng email address o numero ng telepono para sa mga mas gusto nito.

Mga halimbawang prompt

Ang pangunahing form:

Magdagdag ng contact form sa Contact page na may pangalan, email, at mensahe (lahat kailangan, hanggang 2,000 karakter ang mensahe). Ipadala sa server route na nagva-validate ng input, sine-save ito sa contact_messages table kasama ang oras ng pagtanggap, at magpakita ng mensaheng tagumpay: "Salamat, sasagot kami sa loob ng isang working day." Ipakita ang error ng field sa loob mismo ng form. Gawin itong maayos sa telepono.

Mga notification sa email:

Kapag na-save ang contact message, magpadala ng notification email sa akin sa hello@example.com gamit ang Resend, kasama ang key sa RESEND_API_KEY. Itakda ang reply-to sa email ng nagpadala para direkta ko siyang masagot. Kung pumalya ang pagpapadala, panatilihin ang naka-save na mensahe at i-log ang error nang hindi inilalantad ang key.

Proteksyon laban sa spam:

Magdagdag ng proteksyon sa spam sa contact form: isang nakatagong honeypot field na dapat manatiling walang laman, limitasyon na 5 submission kada IP kada oras sa server, at tanggihan ang mensaheng may higit sa 3 link. Tahimik na itapon ang mga submission na napuno ang honeypot pero magpakita pa rin ng tagumpay.

Inbox:

Magdagdag ng admin page na protektado ng password na naglilista ng contact message, pinakabago muna, na may checkbox na "nasagot na" at filter para sa mga hindi pa nasasagot.

Hakbang-hakbang

1. Magpasya kung saan pupunta ang mga mensahe: sino ang tatanggap ng notification, at sino ang sasagot.
2. Gawin ang form na may mga field sa itaas, accessible na label, at input na madaling gamitin sa telepono (gamitin ang email input type para lumabas ang tamang keyboard sa telepono).
3. Gawin ang server route. Sinusuri nito ang kinakailangang field, format ng email, at haba. Huwag kailanman pagkatiwalaan ang validation na browser lang.
4. I-save muna sa database. Tingnan ang how to add a database to your app.
5. Mag-setup ng email provider. Gumawa ng account, i-verify ang sending domain mo, at itago ang API key bilang secret. Sakop ng how to send emails from your app ang setup ng domain (SPF, DKIM) nang mas detalyado.
6. Ipadala ang notification mula sa server pagkatapos mag-save. Gamitin ang na-verify mong domain bilang sender at ang email ng bisita bilang reply-to. Huwag magpadala na "mula sa" email ng bisita, dahil malamang na tanggihan ito bilang spoofing.
7. Opsyonal na auto-reply sa bisita, pero panatilihing maikli; ang auto-reply sa spam address ay maaaring makasira sa reputasyon mo bilang nagpapadala.
8. Magdagdag ng proteksyon sa spam: honeypot, rate limiting, at saka CAPTCHA-style check kung kailangan.
9. Subukan sa nailathalang site: mag-submit, tingnan ang database, tingnan ang inbox at spam folder mo, at i-click ang reply.

Pagpigil sa spam

Naaakit ng contact form ang bot sa loob ng ilang araw pagkatapos mag-live. Maglagay ng mga depensa mula sa pinakamagaan hanggang sa pinakamabigat:

1. Honeypot field. Field na nakatago sa tao; pinupunan ito ng bot. Walang kawala sa tunay na bisita.
2. Rate limiting sa server. Naglilimita kung ilang mensahe ang maaaring ipadala ng isang address sa loob ng isang panahon.
3. Panuntunan sa nilalaman. Tanggihan ang mensaheng puno ng link, o may field ng mensahe na walang laman o sobrang haba.
4. CAPTCHA-style na check, tulad ng Cloudflare Turnstile o Google reCAPTCHA. Dapat bine-verify ang token sa server mo; ang check na tumatakbo lang sa browser ay madaling laktawan.

Mga karaniwang pagkakamali

• Pagpapakita ng "Sent!" kahit walang naipadala. Sinasabi ng UI na matagumpay bago o anuman ang sagot ng server. Laging hintayin ang server.
• Email lang, walang database. Isang maling-setup na key at mawawala ang mga tanong nang ilang linggo nang walang nakakapansin.
• API key sa frontend code. Maaaring gamitin ito ng sinuman para magpadala ng email na ikaw ang nagpadala.
• Hindi na-verify na sending domain. Napupunta sa spam ang notification o hindi na dumarating.
• Pagpapadala na "mula sa" email ng bisita. Gamitin na lang ang reply-to.
• Walang limitasyon sa haba. Nagpi-paste ang bot ng malalaking bloke ng teksto.
• Hindi kailanman sinubukan ang live na site. Madalas magkaiba ang key at domain sa preview at production.

Checklist

• Maikling form na may nakikitang label at malinaw na error
• Validation sa server at limitasyon sa haba
• Bawat mensahe ay naka-save sa database
• Notification email na galing sa na-verify na domain, may naka-set na reply-to
• Nakatago ang email API key sa server-side secret lamang
• Naka-set ang honeypot at rate limiting
• Lumalabas ang mensahe ng tagumpay pagkatapos lang kumpirmahin ng server
• Naka-link sa privacy policy mo ang paalala sa privacy
• Nasubukan nang buo sa nailathalang site, kasama ang spam folder

Mga contact form sa Mythex

Sa Mythex, kaya mong buuin ang lahat mula sa chat. Humiling ng form at database sa iisang prompt (o i-type ang /database) para manatili ang mga submission. Walang built-in na produkto ang Mythex para sa pagpapadala ng email, kaya para sa notification, magdala ng provider tulad ng Resend, SendGrid, o Postmark, idagdag ang key nito gamit ang /secrets o project settings, at humiling sa agent na magpadala mula sa server. Tingnan ang Send email from your app. Bago mo ito pagkatiwalaan, patakbuhin ang App Testing (/test) laban sa form sa Preview, saka mag-publish at subukan sa live URL.

Mahalagang bahagi ang contact form ng karamihan ng small business websites at landing pages. Suriin ang security checklist bago mag-launch.

Mga tanong