Kako ustvariti kontaktni obrazec z uporabo Formspree

Na svojem spletnem mestu lahko uporabite številne metode, da uporabnikom omogočite varno pošiljanje e-pošte. En primer je uporaba atributa mailto v kontaktnem obrazcu. Atribut mailto odpre nameščeno poštno aplikacijo, v katero lahko uporabnik vnese sporočilo.

Za boljšo izkušnjo razmislite o integraciji orodja, kot je Formspree. Formspree deluje kot posrednik, beleži podatke obrazca in jih pošilja na vaš določen e-poštni naslov.

Kaj je Formspree in kako deluje?

Formspree je e-poštna storitev, ki jo lahko integrirate v kontaktni obrazec po meri. Ko se prijavite v Formspree, lahko določite svoj ciljni e-poštni naslov za obrazec. Formspree obravnava oddaje obrazcev v vašem imenu. To vam omogoča ustvarite brezplačen kontaktni obrazec, kot je Google Forms, vendar gostite dejansko oznako obrazca na svojem spletnem mestu.

Formspree bo ustvaril končno točko, ki jo boste morali dodati v obrazec po meri. Ko uporabnik pritisne gumb »Pošlji«, bo obrazec uporabil končno točko za klic storitve Formspree API. To bo ustvarilo e-pošto z vsebino kontaktnega obrazca.

Formspree bo poslal to e-pošto na ciljno e-pošto, ki ste jo navedli v svojem računu Formspree. Nato boste prejeli e-pošto v vaš nabiralnik. Vaš račun Formspree ima tudi mesto, kjer si lahko ogledate oddane kontaktne obrazce.

Če želite registrirati svoj e-poštni naslov s Formspree, se prijavite in vnesite ciljni e-poštni naslov za svoj obrazec.

1. Prijavite se Formspree. Če nimate računa, boste morali vnesti svoj elektronski naslov in geslo. Registrirajte se z e-poštnim naslovom, na katerega želite, da kontaktni obrazec pošlje oddaje. Ta e-poštni naslov boste morda morali preveriti tudi med postopkom prijave.
2. Ko je postopek prijave končan, se odpre stran »Obrazci«. Kliknite na Nov obrazec.
3. Vnesite poljubno ime za vaš kontaktni obrazec in pustite privzete nastavitve projekta. Vnesite ciljni e-poštni naslov v polje »Pošlji e-pošto«. Tu bo Formspree poslal vaše oddane kontaktne obrazce. Ko končate, kliknite na Ustvari obrazec.
4. Formspree vam bo zagotovil končno točko in primere, kako jo uporabljati. To končno točko boste morali dodati v svoj kontaktni obrazec po meri na svojem spletnem mestu (več o tem pozneje).
5. Formspree privzeto shrani vaš obrazec v projekt, imenovan »Moj prvi projekt«. Če želite spremeniti ime tega, se vrnite na stran »Obrazci«. Kliknite na Nastavitve poleg imena projekta.
6. Tukaj lahko spremenite ime svojega projekta v nekaj drugega. Na primer, lahko ga preimenujete, da bo imelo isto ime kot vaše spletno mesto. Dodate lahko tudi URL za svoje spletno mesto.

Končno točko, ki jo zagotavlja Formspree, boste morali dodati v kontaktni obrazec v kodi vašega spletnega mesta.

1. Dodajte končno točko v atribut "action" za obrazec. To bo povzročilo, da bo brskalnik uporabnika poslal obrazec na ta URL, ko ga pošlje.

   <oblika dejanje="https://formspree.io/f/xjvlaqpe" metoda="OBJAVI">
   <!-- Vaš obrazec tukaj -->
   <tip gumba="predložiti" razred="gumb"> Pošlji </button>
   </form>

2. Dodajte vnose v obrazec. Uporabite lahko ta primer obrazca, ki uporablja okvir Bootstrap CSS:

   <oblika dejanje="https://formspree.io/f/mbjqjrdl" razred="dodatno oblazinjenje" metoda="OBJAVI">
   <div razred="obrazec-skupina">
   <oznaka za="odgovori na"> Vaš email naslov </label>
   <vrsta vnosa="E-naslov" razred="nadzor nad obrazcem" id="odgovori na" ime="_odgovori na" ngModel="odgovori" aria-describedby="email Help" nadomestni znak="[email protected]">
   <majhen id="email Help" razred="obrazec-besedilo besedilo utišano"> Vaš e-poštni naslov ne bo deljen z nikomer drugim. </small>
   </div>
   <div razred="obrazec-skupina">
   <oznaka za="sporočilo"> Tvoje sporočilo </label>
   <textarea name="sporočilo" slog ="višina: 200px" razred="nadzor nad obrazcem" id="sporočilo" nadomestni znak="Živijo! jaz'kontaktiram te, ker..."></textarea>
   </div>
   <tip gumba="predložiti" razred="gumb"> Pošlji </button>
   </form>
   

Če želite preveriti, ali Formspree deluje, si pošljite sporočilo s kontaktnim obrazcem, pritisnite Pošlji, in preverite e-poštni predal.

1. Zaženite svoje spletno mesto in odprite stran s kontaktnim obrazcem. V kontaktni obrazec vnesite sporočilo in pritisnite Pošlji.
2. V vaš nabiralnik boste prejeli sporočilo s kontaktnim obrazcem.
3. Če se vrnete na Formspree, kliknite na Predložitve zavihek. Tukaj boste lahko videli tudi poslana sporočila iz vašega kontaktnega obrazca.

Formspree je ena izmed številnih storitev, ki jih lahko uporabite za integracijo kontaktnega obrazca po meri na vaše spletno mesto. Omogoča vam, da hitro začnete sprejemati povratne informacije uporabnikov, ne da bi vam bilo treba skrbeti za podrobnosti v ozadju.

Če ste novi pri ustvarjanju obrazcev s HTML in JavaScript, lahko izveste tudi več o preverjanju obrazcev na strani odjemalca. To pomaga zagotoviti, da lahko vaši kontaktni obrazci potrdijo vse uporabniške vnose.

O avtorju

Sharlene Von Drehnen (Objavljenih 9 člankov)

Sharlene je tehnična pisateljica pri MUO in polni delovni čas dela tudi na področju razvoja programske opreme. Je diplomirana informatika in ima predhodne izkušnje na področju zagotavljanja kakovosti in univerzitetnega mentorstva. Sharlene obožuje igre in igra klavir.

Več od Sharlene Von Drehnen