Cum se creează un formular de contact folosind Formspree

Puteți folosi multe metode pe site-ul dvs. pentru a permite utilizatorilor să vă trimită e-mailuri în siguranță. Un exemplu este utilizarea atributului mailto într-un formular de contact. Atributul mailto deschide o aplicație de e-mail instalată pentru ca utilizatorul să introducă un mesaj.

Pentru o experiență mai bună, luați în considerare integrarea unui instrument precum Formspree. Formspree acționează ca un intermediar, înregistrând datele din formular și trimițându-le la adresa de e-mail specificată.

Ce este Formspree și cum funcționează?

Formspree este un serviciu de e-mail pe care îl puteți integra într-un formular de contact personalizat. Când vă conectați la Formspree, puteți specifica adresa de e-mail țintă pentru un formular. Formspree se ocupă de trimiterile de formulare în numele dvs. Vă permite

Formspree va genera un punct final, pe care va trebui să-l adăugați la formularul personalizat. Când un utilizator apasă butonul „Trimite”, formularul va folosi punctul final pentru a apela serviciul API al Formspree. Aceasta va genera un e-mail cu conținutul formularului de contact.

Formspree va trimite acest e-mail către e-mail-ul țintă pe care l-ați enumerat în contul dvs. Formspree. Veți primi apoi e-mailul în căsuța dvs. de e-mail. Contul dvs. Formspree are, de asemenea, un loc în care puteți vizualiza formularele de contact trimise.

Pentru a vă înregistra e-mailul la Formspree, conectați-vă și introduceți adresa de e-mail țintă pentru formularul dvs.

1. Conectați la Formspree. Dacă nu aveți un cont, va trebui să introduceți adresa de e-mail și o parolă. Înregistrați-vă folosind adresa de e-mail la care doriți ca formularul de contact să trimită trimiterile. De asemenea, poate fi necesar să verificați această adresă de e-mail în timpul procesului de înscriere.
2. După finalizarea procesului de înscriere, se va deschide pagina „Formulare”. Click pe Formă nouă.
3. Introduceți orice nume pentru formularul dvs. de contact și lăsați setările implicite ale proiectului. Introduceți adresa de e-mail țintă în câmpul „Trimite e-mailuri către”. Aici Formspree va trimite formularele de contact trimise. Odată finalizat, faceți clic pe Creați formular.
4. Formspree vă va oferi un punct final și exemple despre cum să îl utilizați. Va trebui să adăugați acest punct final la formularul personalizat de contact de pe site-ul dvs. web (mai multe despre asta mai târziu).
5. În mod implicit, Formspree stochează formularul dvs. într-un proiect numit „Primul meu proiect”. Dacă doriți să schimbați numele acestuia, reveniți la pagina „Formulare”. Click pe Setări lângă numele proiectului.
6. Aici, puteți schimba numele proiectului dvs. cu altceva. De exemplu, îl puteți redenumi pentru a avea același nume cu site-ul dvs. De asemenea, puteți adăuga adresa URL pentru site-ul dvs.

Va trebui să adăugați punctul final furnizat de Formspree în formularul de contact din codul site-ului dvs. web.

1. Adăugați punctul final în atributul „acțiune” pentru formular. Acest lucru va face ca browserul unui utilizator să trimită formularul la acea adresă URL atunci când îl trimite.

   <form action="https://formspree.io/f/xjvlaqpe" metoda="POST">
   <!-- Formularul dvs. aici -->
   <tip de buton="Trimite" clasa="buton"> Trimite </button>
   </form>

2. Adăugați intrări în formularul dvs. Puteți folosi acest exemplu de formular care utilizează cadrul CSS Bootstrap:

   <form action="https://formspree.io/f/mbjqjrdl" clasa="extra-căptușeală" metoda="POST">
   <div class="forma-grup">
   <etichetă pentru="raspunde la"> Adresa dvs. de e-mail </label>
   <tip de intrare="e-mail" clasa="controlul formei" id="raspunde la" nume="_raspunde la" ngModel="răspuns" aria-describedby="e-mailAjutor" substituent="[email protected]">
   <id mic="e-mailAjutor" clasa="formular-text text-dezactivat"> E-mailul dvs. nu va fi partajat cu nimeni altcineva. </small>
   </div>
   <div class="forma-grup">
   <etichetă pentru="mesaj"> Mesajul dvs </label>
   <textarea name="mesaj" stil="înălțime: 200px" clasa="controlul formei" id="mesaj" substituent="Hei acolo! eu'te contactez pentru ca..."></textarea>
   </div>
   <tip de buton="Trimite" clasa="buton"> Trimite </button>
   </form>
   

Pentru a testa dacă Formspree funcționează, trimiteți-vă un mesaj folosind formularul de contact, apăsați Trimiteși verifică căsuța de e-mail a ta.

1. Rulați site-ul și deschideți pagina care are formularul de contact. Introduceți un mesaj în formularul de contact și apăsați Trimite.
2. Veți primi mesajul din formularul de contact în căsuța dvs. de e-mail.
3. Dacă reveniți la Formspree, faceți clic pe Trimiterile fila. Aici veți putea vedea și mesajele trimise din formularul dvs. de contact.

Formspree este unul dintre numeroasele servicii pe care le puteți utiliza pentru a integra un formular de contact personalizat pe site-ul dvs. Vă permite să începeți rapid să acceptați feedbackul utilizatorilor fără a fi nevoie să vă faceți griji cu privire la detaliile backend.

Dacă sunteți nou în crearea de formulare cu HTML și JavaScript, puteți afla, de asemenea, mai multe despre validarea formularelor pe partea clientului. Acest lucru vă ajută să vă asigurați că formularele dvs. de contact pot valida toate datele introduse de utilizator.

Despre autor

Sharlene Von Drehnen (9 articole publicate)

Sharlene este scriitoare tehnică la MUO și lucrează, de asemenea, cu normă întreagă în dezvoltarea de software. Ea are o licență în IT și are experiență anterioară în asigurarea calității și tutorat universitar. Sharlene iubește să joace și să cânte la pian.

Mai multe de la Sharlene Von Drehnen