Kako stvoriti obrazac za kontakt koristeći Formspree

Na svojoj web stranici možete koristiti mnoge metode kako biste korisnicima omogućili da vam sigurno šalju e-poštu. Jedan primjer je korištenje atributa mailto na obrascu za kontakt. Atribut mailto otvara instaliranu aplikaciju za poštu za korisnika da unese poruku.

Za bolje iskustvo, razmislite o integraciji alata kao što je Formspree. Formspree djeluje kao posrednik, bilježi podatke obrasca i šalje ih na vašu navedenu adresu e-pošte.

Što je Formspree i kako radi?

Formspree je usluga slanja e-pošte koju možete integrirati u prilagođeni obrazac za kontakt. Kada se prijavite u Formspree, možete odrediti svoju ciljnu adresu e-pošte za obrazac. Formspree upravlja slanjem obrazaca u vaše ime. To vam omogućuje izradite besplatni obrazac za kontakt, poput Google Forma, ali vi hostirate stvarnu oznaku obrasca na vlastitoj web stranici.

Formspree će generirati krajnju točku koju ćete morati dodati svom prilagođenom obrascu. Kada korisnik pritisne gumb "Pošalji", obrazac će koristiti krajnju točku za pozivanje Formspree API usluge. To će generirati e-poštu sa sadržajem obrasca za kontakt.

Formspree će poslati ovu e-poštu na ciljnu e-poštu koju ste naveli na svom Formspree računu. Tada ćete primiti e-poštu u svoju pristiglu poštu. Vaš Formspree račun također ima mjesto na kojem možete vidjeti svoje podneske obrasca za kontakt.

Da biste registrirali svoju e-poštu u Formspreeu, prijavite se i unesite ciljnu adresu e-pošte za svoj obrazac.

1. Prijavite se Formspree. Ako nemate račun, morat ćete unijeti svoju adresu e-pošte i lozinku. Registrirajte se koristeći adresu e-pošte na koju želite da kontakt obrazac šalje prijave. Možda ćete također morati potvrditi ovu adresu e-pošte tijekom procesa prijave.
2. Nakon dovršetka postupka prijave, otvorit će se stranica "Obrasci". Kliknite na Novi obrazac.
3. Unesite bilo koje ime za svoj kontakt obrazac i ostavite zadane postavke projekta. Unesite ciljnu adresu e-pošte u polje "Pošalji e-poštu". Ovdje će Formspree poslati vaše podneske obrasca za kontakt. Kada završite, kliknite na Napravite obrazac.
4. Formspree će vam pružiti krajnju točku i primjere kako je koristiti. Morat ćete dodati ovu krajnju točku u svoj prilagođeni obrazac za kontakt na svojoj web stranici (više o tome kasnije).
5. Formspree prema zadanim postavkama pohranjuje vaš obrazac u projekt pod nazivom "Moj prvi projekt". Ako želite promijeniti naziv ovoga, vratite se na stranicu "Obrasci". Kliknite na Postavke pored naziva projekta.
6. Ovdje možete promijeniti naziv svog projekta u nešto drugo. Na primjer, možete ga preimenovati tako da ima isti naziv kao i vaša web stranica. Također možete dodati URL za svoju web stranicu.

Morat ćete dodati krajnju točku koju daje Formspree u obrazac za kontakt u kodu vaše web stranice.

1. Dodajte krajnju točku u atribut "action" za obrazac. To će uzrokovati da korisnikov preglednik pošalje obrazac na taj URL kada ga pošalju.

   <oblik radnja="https://formspree.io/f/xjvlaqpe" metoda="POST">
   <!-- Vaš obrazac ovdje -->
   <tip gumba="podnijeti" razred="dugme"> podnijeti </button>
   </form>

2. Dodajte unose u svoj obrazac. Možete koristiti ovaj primjer obrasca koji koristi Bootstrap CSS okvir:

   <oblik radnja="https://formspree.io/f/mbjqjrdl" razred="dodatni padding" metoda="POST">
   <div klasa="form-grupa">
   <oznaka za="odgovarati na"> Vaša email adresa </label>
   <vrsta unosa="email" razred="kontrola oblika" id="odgovarati na" ime="_odgovarati na" ngModel="odgovor" aria-describedby="emailHelp" rezervirano mjesto="[email protected]">
   <mali id="emailHelp" razred="obrazac-tekst tekst-prigušen"> Vaša e-pošta neće se dijeliti ni s kim drugim. </small>
   </div>
   <div klasa="form-grupa">
   <oznaka za="poruka"> Tvoja poruka </label>
   <naziv tekstualnog područja="poruka" stil="visina: 200px" razred="kontrola oblika" id="poruka" rezervirano mjesto="Zdravo! ja'kontaktiram te jer..."></textarea>
   </div>
   <tip gumba="podnijeti" razred="dugme"> podnijeti </button>
   </form>
   

Da biste provjerili radi li Formspree, pošaljite sebi poruku pomoću obrasca za kontakt, pritisnite podnijeti, i provjerite pristiglu poštu svoje e-pošte.

1. Pokrenite svoju web stranicu i otvorite stranicu na kojoj se nalazi obrazac za kontakt. Unesite poruku u kontakt obrazac i pritisnite podnijeti.
2. Primit ćete poruku obrasca za kontakt u inbox.
3. Ako se vratite na Formspree, kliknite na Prijave tab. Ovdje ćete također moći vidjeti poslane poruke iz vašeg kontakt obrasca.

Formspree je jedna od mnogih usluga koje možete koristiti za integraciju prilagođenog obrasca za kontakt na svoju stranicu. Omogućuje vam da brzo počnete prihvaćati povratne informacije korisnika bez brige o pozadinskim detaljima.

Ako ste novi u stvaranju obrazaca s HTML-om i JavaScript-om, također možete saznati više o provjeravanju valjanosti obrazaca na strani klijenta. To pomaže da se osigura da vaši obrasci za kontakt mogu potvrditi sve korisničke unose.

O autoru

Sharlene Von Drehnen (Objavljeno 9 članaka)

Sharlene je tehnička spisateljica u MUO-u, a također radi puno radno vrijeme u razvoju softvera. Diplomirala je informatiku i ima prethodno iskustvo u osiguravanju kvalitete i sveučilišnom podučavanju. Sharlene voli igre i sviranje klavira.

Više od Sharlene Von Drehnen