Yhteydenottolomakkeen luominen Formspreen avulla

Voit käyttää verkkosivustollasi monia menetelmiä, jotta käyttäjät voivat lähettää sinulle sähköposteja turvallisesti. Yksi esimerkki on mailto-attribuutin käyttö yhteydenottolomakkeessa. mailto-attribuutti avaa asennetun sähköpostisovelluksen, jossa käyttäjä voi kirjoittaa viestin.

Paremman kokemuksen saamiseksi harkitse Formspreen kaltaisen työkalun integrointia. Formspree toimii välittäjänä, tallentaa lomaketiedot ja lähettää ne antamaasi sähköpostiosoitteeseen.

Mikä Formspree on ja miten se toimii?

Formspree on sähköpostipalvelu, jonka voit integroida mukautettuun yhteydenottolomakkeeseen. Kun kirjaudut sisään Formspreeen, voit määrittää lomakkeelle kohdesähköpostiosoitteesi. Formspree käsittelee lomakkeiden lähetykset puolestasi. Sen avulla voit Luo ilmainen yhteydenottolomake, kuten Google Forms

Formspree luo päätepisteen, joka sinun on lisättävä mukautettuun lomakkeeseen. Kun käyttäjä painaa "Lähetä"-painiketta, lomake käyttää päätepistettä kutsuakseen Formspreen API-palvelua. Tämä luo sähköpostin, joka sisältää yhteydenottolomakkeen sisällön.

Formspree lähettää tämän sähköpostin kohdesähköpostiosoitteeseen, jonka määritit Formspree-tililläsi. Tämän jälkeen saat sähköpostin postilaatikkoosi. Formspree-tililläsi on myös paikka, jossa voit tarkastella yhteydenottolomakkeesi lähetyksiä.

Rekisteröi sähköpostisi Formspreessa kirjautumalla sisään ja antamalla lomakkeen kohdesähköpostiosoite.

1. Kirjaudu sisään Formspree. Jos sinulla ei ole tiliä, sinun on annettava sähköpostiosoitteesi ja salasanasi. Rekisteröidy käyttämällä sähköpostiosoitetta, johon haluat yhteydenottolomakkeen lähettävän palautetta. Sinun on ehkä myös vahvistettava tämä sähköpostiosoite rekisteröitymisprosessin aikana.
2. Kun kirjautuminen on valmis, "Lomakkeet"-sivu avautuu. Klikkaa Uusi lomake.
3. Kirjoita mikä tahansa nimi yhteydenottolomakkeellesi ja jätä projektin oletusasetukset. Kirjoita kohdesähköpostiosoite Lähetä sähköpostit -kenttään. Tähän Formspree lähettää yhteydenottolomakkeesi. Kun olet valmis, napsauta Luo lomake.
4. Formspree tarjoaa sinulle päätepisteen ja esimerkkejä sen käytöstä. Sinun on lisättävä tämä päätepiste verkkosivustosi mukautettuun yhteydenottolomakkeeseen (lisää tästä myöhemmin).
5. Oletuksena Formspree tallentaa lomakkeesi "My First Project" -nimiseen projektiin. Jos haluat muuttaa tämän nimen, palaa Lomakkeet-sivulle. Klikkaa asetukset projektin nimen vieressä.
6. Täällä voit muuttaa projektisi nimen joksikin muuksi. Voit esimerkiksi nimetä sen uudelleen niin, että sillä on sama nimi kuin verkkosivustollasi. Voit myös lisätä verkkosivustosi URL-osoitteen.

Sinun on lisättävä Formspreen tarjoama päätepiste verkkosivustosi koodin yhteydenottolomakkeeseen.

1. Lisää päätepiste lomakkeen "action"-attribuutille. Tämä saa käyttäjän selaimen lähettämään lomakkeen kyseiseen URL-osoitteeseen, kun hän lähettää sen.

   <muoto toiminta ="https://formspree.io/f/xjvlaqpe" menetelmä="LÄHETTÄÄ">
   <!-- Lomakkeesi tässä -->
   <painikkeen tyyppi="Lähetä" luokka="-painiketta"> Lähetä </button>
   </form>

2. Lisää syötteitä lomakkeeseen. Voit käyttää tätä esimerkkilomaketta, joka käyttää Bootstrap CSS -kehys:

   <muoto toiminta ="https://formspree.io/f/mbjqjrdl" luokka="ylimääräinen pehmuste" menetelmä="LÄHETTÄÄ">
   <div class="muoto-ryhmä">
   <otsikko ="vastata"> Sähköpostiosoitteesi </label>
   <syöttötyyppi="sähköposti" luokka="muodonhallinta" id="vastata" nimi ="_vastata" ngModel="Vastaa" aria-describedby="sähköposti Apua" paikkamerkki="[email protected]">
   <pieni tunnus ="sähköposti Apua" luokka="muoto-teksti teksti-mykistetty"> Sähköpostiosoitettasi ei jaeta kenenkään muun kanssa. </small>
   </div>
   <div class="muoto-ryhmä">
   <otsikko ="viesti"> Viestisi </label>
   <tekstialueen nimi="viesti" tyyli ="korkeus: 200px" luokka="muodonhallinta" id="viesti" paikkamerkki="Hei siellä! minä'Otan sinuun yhteyttä, koska..."></textarea>
   </div>
   <painikkeen tyyppi="Lähetä" luokka="-painiketta"> Lähetä </button>
   </form>
   

Voit testata Formspreen toimivuutta lähettämällä itsellesi viestin yhteydenottolomakkeella, paina Lähetäja tarkista sähköpostisi postilaatikko.

1. Suorita verkkosivustosi ja avaa sivu, jolla on yhteydenottolomake. Kirjoita viesti yhteydenottolomakkeeseen ja paina Lähetä.
2. Saat yhteydenottolomakkeen viestin sähköpostiisi.
3. Jos palaat Formspreeen, napsauta Lähetykset -välilehti. Täällä näet myös yhteydenottolomakkeellasi lähetetyt viestit.

Formspree on yksi monista palveluista, joiden avulla voit integroida mukautetun yhteydenottolomakkeen sivustollesi. Sen avulla voit nopeasti aloittaa käyttäjäpalautteen vastaanottamisen ilman, että sinun tarvitsee huolehtia taustajärjestelmän yksityiskohdista.

Jos olet uusi HTML- ja JavaScript-lomakkeiden luomisessa, voit myös lukea lisää asiakaspuolen lomakkeiden validoinnista. Tämä auttaa varmistamaan, että yhteydenottolomakkeesi voivat vahvistaa kaiken käyttäjän syötteen.

Kirjailijasta

Sharlene von Drehnen (9 artikkelia julkaistu)

Sharlene on tekninen kirjoittaja MUO: ssa ja työskentelee myös kokopäiväisesti ohjelmistokehityksessä. Hän on koulutukseltaan tietotekniikan kandidaatti ja hänellä on aikaisempaa kokemusta laadunvarmistuksesta ja yliopistotutoroinnista. Sharlene rakastaa pelaamista ja pianon soittamista.

Lisää Sharlene Von Drehneniltä