Formularele sunt elemente interactive utilizate pentru a obține intrări de la utilizator pentru procesare ulterioară. De cele mai multe ori, formularele sunt folosite doar pentru a primi intrări care nu necesită prelucrare, ci mai degrabă doar primirea de date, acesta ar putea fi un formular de contact, RSVP, obțineți o ofertă etc.

În mod tradițional, formularele sunt gestionate cu ajutorul unui server (cunoscut și sub numele de server), dar acest lucru este mai eficient atunci când prelucrați datele din formular, poate un formular de înregistrare a utilizatorului în care datele formularului sunt validate, autentificate și salvate într-o bază de date.

Atunci când creați un formular simplu în care primiți doar date de la utilizator și nu le prelucrați (adică formularul de contact), obiectivul este de a obține datele din formular și de a trimite e-mailului de asistență al companiei dvs. (de ex. Info @ …, asistență @ …)

Folosirea unui server aici nu este ideală și este doar o exagerare, un mod foarte obișnuit de a face acest lucru este prin PHPMailer (Biblioteca clasică de trimitere a e-mailurilor pentru PHP). PHPMailer este utilizat cu PHP și necesită o mulțime de configurații plictisitoare ale serverului. Ce se întâmplă dacă construiești doar un site static? Ar trebui să existe o modalitate mai ușoară de a face această parte a clientului, nu?

În acest articol, vă voi prezenta două metode de gestionare a datelor de formular din partea clientului pe site-uri statice. Există și alte metode, dar le-am folosit pe cele două și le-am considerat cele mai bune și mai ușoare (fără sentimente grele :)).

FĂRĂ configurații agitate, FĂRĂ servere, FĂRĂ lucruri serioase, doar construiește-ți formularul, fă câteva mici modificări, utilizatorul trimite și bingo se îndreaptă direct către e-mailul tău desemnat. 🙂

ad-banner

FORMULAR DE ÎNCEPUT

În scopul acestui articol, am construit un formular de bază cu HTML5 și Bootstrap 4, îl puteți furniza din Codepen mai jos.

În prezent, acest formular nu folosește niciuna dintre metodele despre care vom vorbi, la sfârșitul articolului, vă voi oferi integral code pentru ambele metode, puteți actualiza formularul și testați. Am adăugat o mică validare, nu vă faceți griji pentru asta

Acum, să începem !!

METODA UNU

Cum sa gestionati formularele statice Calea catre client

Formspree oferă formulare HTML funcționale prin platforma lor fără PHP sau JavaScript. Trimiteți formularul la adresa URL a acestora și acesta va fi redirecționat către adresa dvs. de e-mail. Nu este necesar PHP, Javascript sau înscriere – perfect pentru site-uri statice!

Asteapta asteapta asteapta!!! este Deschis Sourced de asemenea

MANIPULAREA FORMULARĂ CU FORMSPREE

(Urmați pasul următor și actualizați acest formular pentru a utiliza această metodă)

<form action="https://formspree.io/you@email.com" method="POST">
    <input type="hidden" name="_subject" value="Bolaji's Form">                 
    <input type="hidden" name="_next" value="/thanks.html" >
    <input type="text" name="name">
    <input type="email" name="_replyto">
    <input type="text" name="phone">
    <input type="submit" value="Send">
</form>

Acum să trecem în revistă lucrurile noi adăugate mai sus.

  • Am schimbat atributul de acțiune al formularului în https://formspree.io/you@email.com [replace your@email.com with your own email.] Aceasta este pur și simplu trimiterea datelor formularului dvs. la formspree, apoi la adresa dvs. de e-mail. Formspree acționează ca terță parte aici.
  • Am adăugat câteva atribute de nume câmpurilor de introducere. Aceasta este doar configurarea fiecărui câmp, astfel încât să putem prelua datele și să le trimitem la formspree.

– Pentru adresa de e-mail, am adăugat un _replyto atribut (Aceasta înseamnă doar că veți putea răspunde rapid utilizatorului care a trimis inițial prin e-mail)

– Am adăugat un _subiect atribut. Această valoare este utilizată pentru subiectul e-mailului, astfel încât să puteți răspunde rapid la trimiteri fără a fi nevoie să editați rândul subiectului de fiecare dată.

– Am adăugat un _Următor → atribut. În mod implicit, după trimiterea unui formular, utilizatorului i se afișează pagina Formspree „Mulțumesc”. Puteți furniza o adresă URL alternativă pentru pagina respectivă astfel: <input type=”hidden” name=”_next” value=”/thanks.html" />

1*M2O2tR08URl1I2i5bVGU5Q
1611263408 686 Cum sa gestionati formularele statice Calea catre client
pagina de succes implicită formspree
1611263408 155 Cum sa gestionati formularele statice Calea catre client
pagina de succes personalizată pe care am creat-o pentru un client.
  • Am adăugat un atribut de valoare butonului de trimitere [value=”Send”]

Acesta este Thanos-ul nostru, o singură apăsare pe acest buton și formularul dvs. este șters și datele sale trimise la adresa dvs. de e-mail.

1611263408 204 Cum sa gestionati formularele statice Calea catre client

Asta este totul pentru a folosi formularul 🙂 Deși există alte setări de configurare pentru alte câteva caracteristici, puteți verifica aici.

LUCRURI DE NOTAT!

  • Nu trebuie să vă înregistrați pentru a utiliza formspree, trebuie doar să adăugați atributul de acțiune și sunteți bine. Vă înscrieți numai dacă doriți un Plan plătit.
  • Asigurați-vă că formularul dvs. are method=”POST” atribut
  • Formspree folosește reCAPTCHA pentru a identifica trimiterile de spam. După ce un utilizator dă clic pe Thanos, vor trebui să facă o verificare CAPTCHA. Mod cool de a opri trimiterile de spam.
1611263408 565 Cum sa gestionati formularele statice Calea catre client
  • După aceea, formularul este trimis la adresa dvs. de e-mail desemnată și se afișează pagina de succes personalizată!
  • Formspree nu vă citește datele formularului, nu au acces la ele, sunt doar un serviciu de livrare, vă trimiteți coletul sigilat, le livrează clientului dvs., nu-i așa? 🙂
  • Formspree este gratuit pentru 50 de trimiteri pe formular pe lună NUMAI! Aveți nevoie de mai mult, puteți face upgrade la Plan plătit.
  • Formspree are planuri gratuite și plătite. Planurile plătite au alte câteva caracteristici, cum ar fi tabloul de bord de administrare, trimiteri nelimitate, gestionarea AJAX etc. Planurile plătite și caracteristicile lor pot fi găsite aici
1611263408 812 Cum sa gestionati formularele statice Calea catre client

Dacă construiți un site de bază, nu ar trebui să vă faceți griji cu privire la planurile plătite, planurile plătite sunt în mare parte necesare pentru aplicațiile și companiile Enterprise, planul gratuit ar acoperi toate nevoile dvs. Folosesc asta și pentru unele proiecte client 🙂

  • Utilizatorii premium Formspree pot trimite formulare prin AJAX. Trebuie doar să setați antetul Accept la application / json. Dacă utilizați jQuery, acest lucru se poate face astfel:
    $.ajax({
        url: "https://formspree.io/FORM_ID",
        method: "POST",
        data: {message: "hello!"},
        dataType: "json"
    });

Ei bine, aceasta este pentru utilizatorii plătiți 🙂

Dacă nu utilizați jQUERY ca mine și v-ați săturat de lunga sintaxă implicită AJAX, verificați bibliotecă simplă AJAX, o bibliotecă simplă pe care am construit-o pentru gestionarea solicitărilor HTTP. Ca astfel:

const http = new simpleAJAX;

const data = {
    "name": "Bolaji Ayodeji",
    "email": "hi@bolajiayodeji.com",
    "message": "hi"
};
http.post('https://formspree.io/FORM_ID', data,
(err, user) => {
    if(err) {
     console.log(err)
    } else {
     console.log(user);
   }
 });

O stea m-ar bucura! 🙂

Dacă sunteți în React, ZEIT are un ghid cuprinzător despre utilizarea Formspree cu Creați aplicația React, complet cu instrucțiuni de implementare. Foarte recomandat!

METODA DOUĂ

1611263408 338 Cum sa gestionati formularele statice Calea catre client

Netlify oferă gestionarea formularelor pentru site-urile implementate pe platforma lor.

MANIPULARE FORMULARE CU NETLIFY

  • Creați un cont pe Netlify și implementați-vă site-ul acolo.

Vă rugăm să urmăriți acest videoclip de 14 minute de @JamesQuick mai jos dacă nu știți ce este Netlify. Aflați despre toate funcțiile minunate din Netlify, cum ar fi implementarea continuă, funcțiile Lambda, testarea divizată, previzualizarea sucursalelor și multe altele!

  • Acum că v-ați implementat site-ul, să creăm din nou formularul
    <form action="/thanks.html" name="Bolaji's form" method="POST" data-netlify="true">
        <input type="text" name="name">
        <input type="email" name="email">
        <input type="text" name="phone">
        <input type="submit">
    </form>

Acum să trecem în revistă lucrurile noi pe care le-am adăugat mai sus.

  • Netlify este destul de ușor, pur și simplu adăugați netlify atribut data-netlify="true"la <form> și puteți începe să primiți trimiteri în panoul de administrare al site-ului Netlify.
  • Aici action atributul servește drept pagina dvs. personalizată de succes

Atât, trimiterea formularului dvs. merge direct la panoul de administrare Netlify

Setări> Construiți și implementați> Mediu> Variabile de mediu

(Urmăriți videoclipul de mai sus dacă nu înțelegeți ce înseamnă panoul)

Lucruri de remarcat!

  • Site-ul dvs. trebuie să fie găzduit pe netlify pentru a utiliza această metodă
  • Trebuie să adăugați atributul netlify pentru ca formularul să funcționeze
  • Puteți găsi toate trimiterile la formularele dvs. Netlify în fila Formulare din tabloul de bord al site-ului dvs. Setări> Formulare
  • Netlify are și planuri gratuite și plătite
1611263408 944 Cum sa gestionati formularele statice Calea catre client
https://www.netlify.com/pricing
  • Netlify are mai multe opțiuni de notificare încorporate pentru trimiterile de formulare verificate, inclusiv notificări prin e-mail și notificări Slack. (Disponibil numai în planurile cu plată). Le puteți găsi în Setări> Formulare> Notificări formular.
  • Netlify se integrează, de asemenea, cu Zapier, astfel încât să puteți configura declanșatoare care să trimită trimiterile de formulare verificate către oricare dintre cele peste 500 de aplicații din catalogul lor.
  • Toate e-mailurile de notificare sunt trimise de la team@netlify.com, iar orice răspuns la o notificare va merge la adresa respectivă. Dacă doriți să răspundeți unui expeditor de formulare, va trebui să introduceți adresa acestora manual.
  • Netlify Forms poate primi și încărcări de fișiere prin trimiterea formularelor :).

Pentru a face acest lucru, adăugați o intrare cu type="file" la orice formă. La trimiterea unui formular, în detaliile trimiterii formularului va fi inclus un link către fiecare fișier încărcat.

  • Netlify este limitat la 100 de trimiteri pe lună și 10 MB de încărcări pe lună pentru planul GRATUIT. Dacă doriți mai multe, va trebui să faceți upgrade
1611263408 889 Cum sa gestionati formularele statice Calea catre client
formularele trimise în panoul de administrare

Și asta e tot!!

CODUL FINAL AL ​​FORMULAREI HTML

<!--formspree.html-->

<form action="https://formspree.io/you@email.com" method="POST">
   <input type="hidden" name="_subject" value="Bolaji's Form">                 
   <input type="hidden" name="_next" value="/thanks.html" >
   <div class="form-group">
      <label>Name:</label>
      <input type="text" class="form-control" id="name" placeholder="Name">
      <div class="invalid-feedback">
         Name must be between 2 and 20 characters
      </div>
   </div>
   <div class="form-group">
      <label>Email:</label>
      <input type="text" class="form-control" id="email" placeholder="Email address">
      <div class="invalid-feedback">
         Enter a valid email address
      </div>
   </div>
   <div class="form-group">
      <label>Telephone:</label>
      <input type="text" class="form-control" id="phone" placeholder="Phone number">
      <div class="invalid-feedback">
         Enter a valid number
      </div>
   </div>
   <input type="submit" value="Send" class="btn btn-info btn-block">
</form>

<!--netlify.html-->

<form action="/thanks.html" name="Bolaji's form" method="POST" data-netlify="true">
   <div class="form-group">
      <label>Name:</label>
      <input type="text" class="form-control" id="name" placeholder="Name">
      <div class="invalid-feedback">
         Name must be between 2 and 20 characters
      </div>
   </div>
   <div class="form-group">
      <label>Email:</label>
      <input type="text" class="form-control" id="email" placeholder="Email address">
      <div class="invalid-feedback">
         Enter a valid email address
      </div>
   </div>
   <div class="form-group">
      <label>Telephone:</label>
      <input type="text" class="form-control" id="phone" placeholder="Phone number">
      <div class="invalid-feedback">
         Enter a valid number
      </div>
   </div>
   <input type="submit" value="Send" class="btn btn-info btn-block">
</form>

CONCLUZIE

Un lucru de remarcat despre formspree este că versiunea gratuită lasă adresa dvs. de e-mail expusă răzuitorilor și roboților, astfel încât s-ar putea să doriți să configurați o adresă de e-mail de unică folosință temporară în timp ce o utilizați. Dacă doriți să ascundeți adresa de e-mail în mod prestabilit, va trebui să vă actualizați planul.

Vrei practică suplimentară? Urmăriți acest videoclip tutorial de mai jos de Brad Traversy și aflați cum să adăugați un contact sau orice tip de formular pe site-ul dvs. web utilizând caracteristica formularului Netlify, inclusiv încărcarea fișierelor și filtrarea spamului. [Full guide + practical code]

Mulțumesc pentru lectură!