Kaip sukurti kontaktinę formą naudojant „Formspree“.

Savo svetainėje galite naudoti daugybę metodų, kad naudotojai galėtų saugiai siųsti jums el. laiškus. Vienas iš pavyzdžių yra atributo mailto naudojimas kontaktinėje formoje. Atributas mailto atidaro įdiegtą pašto programą, kad vartotojas galėtų įvesti pranešimą.

Norėdami gauti geresnę patirtį, apsvarstykite galimybę integruoti tokį įrankį kaip „Formspree“. Formspree veikia kaip tarpininkas, įrašo formos duomenis ir siunčia juos Jūsų nurodytu el. pašto adresu.

Kas yra Formspree ir kaip jis veikia?

„Formspree“ yra el. pašto paslauga, kurią galite integruoti į pasirinktinę kontaktinę formą. Kai prisijungiate prie Formspree, galite nurodyti tikslinį formos el. pašto adresą. Formspree tvarko formų pateikimus jūsų vardu. Tai leidžia jums

„Formspree“ sugeneruos galutinį tašką, kurį turėsite pridėti prie pasirinktinės formos. Kai vartotojas paspaus mygtuką „Pateikti“, forma naudos galutinį tašką, kad iškviestų „Formspree“ API paslaugą. Tai sugeneruos el. laišką su kontaktinės formos turiniu.

„Formspree“ išsiųs šį el. laišką tiksliniu el. pašto adresu, kurį nurodėte „Formspree“ paskyroje. Tada gausite el. laišką į savo pašto dėžutę. Jūsų Formspree paskyroje taip pat yra vieta, kur galite peržiūrėti kontaktinės formos pateiktus duomenis.

Norėdami užregistruoti savo el. paštą Formspree, prisijunkite ir įveskite savo formos tikslinį el. pašto adresą.

1. Prisijungti Formspree. Jei neturite paskyros, turėsite įvesti savo el. pašto adresą ir slaptažodį. Registruokitės naudodami el. pašto adresą, kuriuo norite, kad susisiekimo forma būtų išsiųsta paraiška. Taip pat gali tekti patvirtinti šį el. pašto adresą registracijos proceso metu.
2. Kai registracijos procesas bus baigtas, atsidarys puslapis „Formos“. Spustelėkite Nauja forma.
3. Įveskite bet kokį kontaktinės formos pavadinimą ir palikite numatytuosius projekto nustatymus. Lauke „Siųsti el. laiškus“ įveskite tikslinį el. pašto adresą. Čia „Formspree“ išsiųs jūsų kontaktinės formos pateiktus duomenis. Baigę spustelėkite Sukurti formą.
4. „Formspree“ pateiks galutinį tašką ir pavyzdžius, kaip jį naudoti. Šį galinį tašką turėsite pridėti prie tinkintos kontaktinės formos savo svetainėje (daugiau apie tai vėliau).
5. Pagal numatytuosius nustatymus „Formspree“ saugo jūsų formą projekte „Mano pirmasis projektas“. Jei norite pakeisti pavadinimą, grįžkite į puslapį „Formos“. Spustelėkite Nustatymai šalia projekto pavadinimo.
6. Čia galite pakeisti savo projekto pavadinimą į kitą. Pavyzdžiui, galite pervardyti, kad jis būtų toks pat kaip ir jūsų svetainė. Taip pat galite pridėti savo svetainės URL.

Turėsite įtraukti Formspree pateiktą galinį tašką į kontaktinę formą savo svetainės kode.

1. Pridėkite galinį tašką į formos atributą „action“. Dėl to naudotojo naršyklė išsiųs formą tuo URL, kai ją pateiks.

   <forma veiksmas="https://formspree.io/f/xjvlaqpe" metodas ="PAST">
   <!-- Jūsų forma čia -->
   <mygtuko tipas="Pateikti" klasė ="mygtuką"> Pateikti </button>
   </form>

2. Pridėkite įvestį į formą. Galite naudoti šią pavyzdinę formą, kuri naudoja Bootstrap CSS sistema:

   <forma veiksmas="https://formspree.io/f/mbjqjrdl" klasė ="papildomas kamšalas" metodas ="PAST">
   <div klasė ="forma-grupė">
   <etiketė ="atsakinėti į"> Jūsų elektroninio pašto adresas </label>
   <įvesties tipas ="paštu" klasė ="formos valdymas" id="atsakinėti į" vardas ="_atsakinėti į" ngModel="atsakyti" aria-describedby="pašto žinynas" vietos rezervuaras="[email protected]">
   <mažas id ="pašto žinynas" klasė ="forma-tekstas tekstas-nutildytas"> Jūsų el. pašto adresas nebus bendrinamas su niekuo kitu. </small>
   </div>
   <div klasė ="forma-grupė">
   <etiketė ="žinutę"> Tavo žinutė </label>
   <tekstinės srities pavadinimas="žinutę" stilius ="aukštis: 200px" klasė ="formos valdymas" id="žinutę" vietos rezervuaras="Labas! aš'kreipiuosi į jus, nes..."></textarea>
   </div>
   <mygtuko tipas="Pateikti" klasė ="mygtuką"> Pateikti </button>
   </form>
   

Norėdami patikrinti, ar Formspree veikia, išsiųskite sau žinutę naudodami kontaktinę formą, paspauskite Pateiktiir patikrinkite savo el. pašto dėžutę.

1. Paleiskite savo svetainę ir atidarykite puslapį, kuriame yra kontaktinė forma. Įveskite žinutę į kontaktų formą ir paspauskite Pateikti.
2. Kontaktinės formos pranešimą gausite savo pašto dėžutėje.
3. Jei grįšite į „Formspree“, spustelėkite Pateikimai skirtukas. Čia taip pat galėsite matyti pateiktus pranešimus iš savo kontaktinės formos.

„Formspree“ yra viena iš daugelio paslaugų, kurias galite naudoti norėdami integruoti tinkintą kontaktinę formą į savo svetainę. Tai leidžia greitai pradėti priimti vartotojų atsiliepimus, nesijaudinant dėl ​​išsamios informacijos.

Jei pradėjote kurti formas naudojant HTML ir JavaScript, taip pat galite sužinoti daugiau apie kliento pusės formų patvirtinimą. Tai padeda užtikrinti, kad jūsų kontaktinės formos gali patvirtinti visą vartotojo įvestį.

Apie autorių

Sharlene von Drehnen (9 straipsniai paskelbti)

Sharlene yra MUO technologijų rašytoja ir visą darbo dieną dirba programinės įrangos kūrimo srityje. Ji turi IT bakalauro laipsnį ir ankstesnę patirtį kokybės užtikrinimo ir universitetų kuravimo srityse. Sharlene mėgsta žaisti ir groti pianinu.

Daugiau iš Sharlene Von Drehnen