Yhteydenottolomakkeen lisääminen verkkosivuille, joka oikeasti tavoittaa sinut

Toimivan yhteydenottolomakkeen tekeminen tarkoittaa lyhyttä lomaketta (nimi, sähköposti, viesti), joka lähetetään palvelinreitille. Reitti validoi syötteen, tallentaa viestin tietokantaan ja lähettää sitten sinulle ilmoituksen sähköpostipalvelun kautta salaisella API-avaimella. Lisää piilotettu hunajapurkkikenttä ja nopeusrajoitus, jotta suurin osa roskapostista pysähtyy, näytä selkeä onnistumisviesti ja testaa koko ketju julkaistulla sivulla. Tallentaminen ennen sähköpostin lähettämistä on tärkein osa: jos sähköposti joskus epäonnistuu, viesti on silti tallessa.

Vaihtoehtosi

Jos sivustollasi on jo backend ja tietokanta, mitä tekoälysovellusrakentajilla rakennetut sovellukset usein ovat, viimeinen vaihtoehto on luotettavin ja pitää tiedustelut paikassa, jossa näet ne.

Mitä hyvä yhteydenottolomake sisältää

• Mahdollisimman vähän kenttiä. Nimi, sähköposti, viesti. Lisää aihevalikko (”Myynti”, ”Tuki”, ”Muu”) vain, jos ohjaat viestejä sen perusteella.
• Selkeät otsikot jokaisen kentän yläpuolella, ei pelkkiä paikkamerkkitekstejä, jotka katoavat.
• Hyödyllinen validointi: ”Anna kelvollinen sähköpostiosoite” näkyy kentän vieressä.
• Onnistumistila, joka kertoo, mitä seuraavaksi tapahtuu: ”Kiitos, vastaamme yhden työpäivän sisällä.”
• Tietosuojamaininta, joka kertoo, miten tietoja käytetään, ja linkki tietosuojakäytäntöösi.
• Varakanava, kuten sähköpostiosoite tai puhelinnumero, niille, jotka haluavat sen.

Esimerkkikehotteet

Perusmuotoinen lomake:

Lisää yhteydenottolomake Yhteystiedot-sivulle: nimi, sähköposti ja viesti (kaikki pakollisia, viesti enintään 2 000 merkkiä). Lähetä lomake palvelinreitille, joka validoi syötteen, tallentaa sen contact_messages-tauluun vastaanottoaikoineen ja näyttää onnistumisviestin: ”Kiitos, vastaamme yhden työpäivän sisällä.” Näytä kenttävirheet suoraan kentän vieressä. Varmista, että se toimii hyvin puhelimella.

Sähköposti-ilmoitukset:

Kun yhteydenottoviesti tallennetaan, lähetä minulle ilmoitussähköposti osoitteeseen hello@example.com Resendin kautta, avain RESEND_API_KEY-muuttujassa. Aseta reply-to lähettäjän sähköpostiosoitteeseen, jotta voin vastata suoraan. Jos lähetys epäonnistuu, säilytä tallennettu viesti ja kirjaa virhe ilman, että avain paljastuu.

Roskapostin esto:

Lisää roskapostisuojaus yhteydenottolomakkeeseen: piilotettu hunajapurkkikenttä, joka pitää jäädä tyhjäksi, enintään 5 lähetystä per IP-osoite tunnissa palvelimella ja hylkää viestit, joissa on yli 3 linkkiä. Hylkää hunajapurkkilähetykset hiljaa, mutta näytä silti onnistumisviesti.

Postilaatikko:

Lisää salasanalla suojattu ylläpitosivu, joka listaa yhteydenottoviestit uusin ensin, ja jossa on ”käsitelty” -valintaruutu sekä suodatin käsittelemättömille viesteille.

Vaihe vaiheelta

1. Päätä, minne viestit menevät: kuka saa ilmoitukset ja kuka vastaa.
2. Rakenna lomake yllä olevilla kentillä, saavutettavilla otsikoilla ja mobiiliystävällisillä kentillä (käytä sähköpostityyppistä kenttää, jotta puhelimet näyttävät oikean näppäimistön).
3. Luo palvelinreitti. Se tarkistaa pakolliset kentät, sähköpostin muodon ja pituusrajat. Älä koskaan luota pelkkään selaimen validointiin.
4. Tallenna tietokantaan ensin. Katso miten tietokanta lisätään sovellukseen.
5. Ota sähköpostipalvelu käyttöön. Luo tili, vahvista lähetysdomainisi ja tallenna API-avain salaisuutena. Miten sovelluksesta lähetetään sähköposteja käsittelee domainin asetukset (SPF, DKIM) tarkemmin.
6. Lähetä ilmoitus palvelimelta tallentamisen jälkeen. Käytä vahvistettua domainia lähettäjänä ja kävijän osoitetta reply-to-kenttänä. Älä lähetä ”lähettäjänä” kävijän osoitetta, sillä se hylätään todennäköisesti väärennöksenä.
7. Lähetä halutessasi automaattinen vastaus kävijälle, mutta pidä se lyhyenä; automaattivastaukset roskapostiosoitteisiin voivat heikentää lähettäjämainettasi.
8. Lisää roskapostisuojaus: hunajapurkki, nopeusrajoitus ja tarvittaessa CAPTCHA-tyyppinen tarkistus.
9. Testaa julkaistulla sivulla: lähetä viesti, tarkista tietokanta, tarkista postilaatikkosi ja roskapostikansio ja paina vastaa.

Roskapostin pysäyttäminen

Yhteydenottolomakkeet houkuttelevat robotteja muutamassa päivässä julkaisusta. Lisää puolustus kerroksittain vähiten tunkeilevasta tunkeilevimpaan:

1. Hunajapurkkikenttä. Kenttä, joka on piilotettu ihmisiltä; robotit täyttävät sen. Se ei maksa oikeille kävijöille mitään.
2. Palvelinpuolen nopeusrajoitus. Rajoittaa, kuinka monta viestiä yksi osoite voi lähettää tietyssä ajassa.
3. Sisältösäännöt. Hylkää viestit, jotka ovat täynnä linkkejä, tai joissa viestikenttä on tyhjä tai kohtuuttoman pitkä.
4. CAPTCHA-tyyppinen tarkistus, kuten Cloudflare Turnstile tai Google reCAPTCHA. Tunnus on vahvistettava palvelimella; pelkästään selaimessa ajettava tarkistus voidaan ohittaa.

Yleisiä virheitä

• ”Lähetetty!” näkyy, vaikka mitään ei lähetetty. Käyttöliittymä ilmoittaa onnistumisesta ennen palvelimen vastausta tai sen riippumatta. Odota aina palvelimen vahvistusta.
• Vain sähköposti, ei tietokantaa. Yksi väärin määritelty avain, ja tiedustelut katoavat viikkojen ajaksi, eikä kukaan huomaa.
• API-avain käyttöliittymän koodissa. Kuka tahansa voi käyttää sitä lähettämään sähköpostia nimissäsi.
• Vahvistamaton lähetysdomain. Ilmoitukset päätyvät roskapostiin tai eivät saavu koskaan.
• Lähettäminen kävijän sähköpostiosoitteesta. Käytä reply-to-kenttää.
• Ei pituusrajoja. Robotit liittävät valtavia tekstilohkoja.
• Live-sivun testaamatta jättäminen. Avaimet ja domainit eroavat usein esikatselun ja tuotannon välillä.

Tarkistuslista

• Lyhyt lomake, jossa näkyvät otsikot ja selkeät virheilmoitukset
• Palvelinpuolen validointi ja pituusrajat
• Jokainen viesti tallennetaan tietokantaan
• Ilmoitussähköposti lähetetään vahvistetusta domainista, reply-to asetettuna
• Sähköpostin API-avain on vain palvelinpuolen salaisuuksissa
• Hunajapurkki ja nopeusrajoitus käytössä
• Onnistumisviesti ilmestyy vasta, kun palvelin vahvistaa lähetyksen
• Tietosuojamaininta linkittää tietosuojakäytäntöösi
• Testattu päästä päähän julkaistulla sivulla, myös roskapostikansio mukaan lukien

Yhteydenottolomakkeet Mythexissä

Mythexissä voit rakentaa koko kokonaisuuden chatista. Pyydä lomaketta ja tietokantaa samassa kehotteessa (tai kirjoita /database), jotta lähetykset säilyvät. Mythexissä ei ole sisäänrakennettua sähköpostilähetyspalvelua, joten ilmoituksia varten tuot mukaan palveluntarjoajan, kuten Resendin, SendGridin tai Postmarkin, lisäät sen avaimen komennolla /secrets tai projektiasetuksissa ja pyydät agenttia lähettämään palvelimelta. Katso Lähetä sähköpostia sovelluksesta. Ennen kuin luotat siihen, aja App Testing (/test) lomakkeelle esikatselussa, julkaise sitten ja testaa live-osoitteella.

Yhteydenottolomake on keskeinen osa useimpia pienyritysten verkkosivuja ja laskeutumissivuja. Tarkista tietoturvalista ennen julkaisua.

Kysymykset