Share
În acest tutorial ne vom uita la o modalitate fără probleme de a adăuga formulare dinamice și flexibile pe site-urile dvs. statice.
Imaginați-vă că tocmai ați creat un site web folosind pagini statice, fie că este vorba de ajutorul lui Jekyll, fie pur și simplu folosind anumite fișiere HTML, dar acum doriți să adăugați un formular de contact. Puteți să vă conectați la un serviciu online, să instalați ceva preconfirmat pe serverul dvs. sau să construiți ceva de la zero folosind PHP. Aceasta înseamnă că sunteți fie complet restricționat asupra designului, fie că depuneți mai mult efort într-o singură formă decât ați făcut pentru întregul site.
Ce se întâmplă dacă puteți utiliza un serviciu care vă oferă control complet asupra formularului, dar nu necesită instalarea a ceva pe serverul dvs.? Introduceți Formspree, un serviciu online care vă oferă posibilitatea de a crea formulare funcționale HTML fără a utiliza PHP sau JavaScript.
Permiteți-mi să vă dau o scurtă scurgere a pașilor necesari pentru a vă crea propria formă.
Primul lucru de care aveți nevoie este un formular pe care îl vom construi de la zero în HTML. Forma mea va fi o modalitate foarte simplă ca oamenii să intre în contact cu mine - voi avea un câmp pentru numele, adresa de e-mail și mesajul lor. Iată marcajul pentru forma mea:
Veți vedea că am adăugat o a depune introduceți și împachetați toate câmpurile cu a element.
Putem modela acest formular cu toate acestea dorim. Nu este iframe sau altceva pentru a restrânge cum arată.
Pentru ca Formspree să se ocupe de formularul dvs., va trebui să adăugați următorul atribut de acțiune la dvs. element:
Rețineți că câmpurile Nume și Mesaj sunt denumite în mod corespunzător, dar am folosit versiunea specială "_raspunde la"Pentru câmpul de e-mail. Formspree va recunoaște această valoare a atributului și, prin urmare, permiteți-mi să răspund direct la e-mailul introdus în formular atunci când este trimis.
Pot, de asemenea, să adaug _Următor → la o altă intrare ascunsă pentru a specifica adresa URL pe care aș dori să o trimită utilizatorilor la adresa pe care a trimis-o.
Pentru ca eu sa stiu de unde vine supunerea, o sa adaug o linie de subiect. Pot face acest lucru prin adăugarea următoarei intrări ascunse:
Acest câmp nu va apărea când un utilizator vizualizează formularul, dar valoarea va fi utilizată pentru linia de subiect atunci când primesc o trimitere.
Construit în Formspree este o metodă de "honeypot" de prevenire a spamului. Tehnica honeypot este destul de simplă; ascundeți un câmp în interiorul formularului pe care utilizatorii nu îl văd, dar care fac spambots. Spambotul va completa câmpul, în timp ce utilizatorii nu vor. Orice trimitere cu acest câmp completată va fi considerată spam.
Puteți folosi această tehnică prin adăugarea următoarelor formulare:
Este important să utilizați un atribut de stil pentru a ascunde câmpul. Browserul utilizatorilor va ascunde câmpul folosind CSS, dar spambotul va (probabil) ignora CSS-ul în totalitate și va continua să completeze câmpul. Prin denumirea câmpului "_gotcha", Formspree o va recunoaște și va ignora orice observații făcute cu acest lucru completat.
Pentru securitate suplimentară, vă puteți împacheta e-mailul în JavaScript. Acest lucru va reduce probabilitatea ca spamboturile să pară și să vă aleagă e-mailurile din HTML. Uitați-vă la ceea ce am făcut mai jos:
Aici am eliminat acțiune atribut de la element, și apoi a folosit o mică bucată de JavaScript pentru ao seta. De asemenea, am împărțit șirul de e-mail în segmente pentru al face să fie și mai obscur la spambot. Simțiți-vă liber să copiați și să înlocuiți segmentele e-mailului cu dvs..
Ultimul pas este să vă asigurați că forma dvs. funcționează. Accesați pagina care conține formularul dvs. în browserul dvs. web, completați formularul și îl trimiteți ca utilizator normal. Ar trebui să primiți un e-mail de la Formspree, care vă cere să vă confirmați adresa de e-mail.
Faceți clic pe link-ul de confirmare și veți fi setați!
Notă: va trebui să treceți prin acest proces de confirmare de fiecare dată când adăugați formularul la o pagină nouă.
Formularul API Formspree oferă o modalitate ușoară și foarte flexibilă de a adăuga formulare la o pagină web. Perfect pentru site-uri statice!
Accentsconagua