Dacă doriți ca cineva să vă poată contacta sau să trimită informații pe un site web, un formular HTML este un mod destul de standard de a realiza acest lucru.

Dar acceptarea trimiterilor de formulare necesită de obicei un serviciu suplimentar sau un cod complex de pe server. Cum putem profita de Netlify pentru a crea cu ușurință noi formulare?

  • Ce este Netlify?
  • Ce vom construi?
  • Cât costă asta?
  • Partea 1: Crearea unui formular de contact cu HTML
  • Partea 2: Adăugarea unui formular Netlify personalizat într-o aplicație Next.js React

Ce este Netlify?

Netlify este o platformă web care vă permite să implementați cu ușurință noi proiecte web cu fluxuri de lucru ușor de configurat. Aceasta include implementarea unui site web static, funcții lambda și, așa cum vom vorbi aici, formulare personalizate.

Serviciul lor de formulare funcționează ca parte a conductei de construire și implementare. Când includem un formular cu un atribut specific paginii noastre, Netlify va recunoaște acel formular și îl va configura să funcționeze.

Ce vom construi?

Vom crea un formular de contact care va permite oamenilor să vă trimită o notă prin intermediul site-ului dvs. web.

ad-banner

Formularul în sine va fi destul de simplu. La fel ca un formular de contact standard, vom cere numele cuiva, adresa de e-mail și un mesaj.

Vom construi acest lucru folosind HTML simplu pentru a demonstra cum funcționează și apoi îl vom construi cu Next.js pentru crearea unui formular într-o aplicație React.

Cât costă asta?

Formularele Netlify sunt gratuite pentru a începe. Acest nivel gratuit este limitat la 100 de trimiteri de formulare pe site pe lună, așa că, dacă rămâneți sub acesta, va fi întotdeauna gratuit.

Acestea fiind spuse, dacă depășiți 100 de formulare trimise pe un anumit site, primul nivel va fi de peste 19 USD la momentul scrierii acestui document. Puteți verifica cele mai recente planuri de prețuri de pe site-ul Netlify.

Partea 1: Crearea unui formular de contact cu HTML

Pentru a începe, vom crea un formular de bază cu HTML pur. Este o victorie rapidă pentru a demonstra cum funcționează acest lucru.

Pasul 1: Crearea unui formular HTML

Pentru forma noastră, putem folosi cu adevărat orice vrem. Formularele de contact pot fi la fel de simple ca o adresă de e-mail și un câmp de mesaje sau pot include o varietate de opțiuni pentru a ajuta o companie să răspundă la întrebări specifice.

Vom începe cu ceva simplu. Vom crea un formular care solicită numele cuiva, adresa de e-mail și un mesaj.

Pentru a începe, creați un fișier HTML nou în rădăcina proiectului dvs. Acest fișier HTML ar trebui să includă structura de bază a unui document HTML. În interiorul corpului, să adăugăm noua noastră formă:

<form name="contact" method="POST" data-netlify="true">
    <p>
      <label for="name">Name</label>
      <input type="text" id="name" name="name" />
    </p>
    <p>
      <label for="email">Email</label>
      <input type="text" id="email" name="email" />
    </p>
    <p>
      <label for="message">Message</label>
      <textarea id="message" name="message"></textarea>
    </p>
    <p>
      <button type="submit">Send</button>
    </p>
  </form>

În fragmentul de mai sus, suntem:

  • Crearea unui nou formular
  • Formularul are un atribut de nume, o metodă și un data-netlify atribut setat la true
  • Crearea a 3 câmpuri de formular cu etichete, fiecare identificat cu un atribut de nume
  • Crearea unui buton pentru trimiterea formularului

Lucrul pe care vrem să-l luăm în considerare cel mai mult este data-netlify atributul și forma name. Când Netlify citește site-ul, acesta va vedea acele câmpuri și le va folosi pentru a transforma formularul într-un formular de lucru activ.

Voi adăuga, de asemenea, un pic de CSS pentru a face etichetele să arate puțin mai consistente. Opțional, puteți adăuga acest lucru la <head> documentului:

<style>
  body {
    font-family: sans-serif;
  }
  label {
    display: block;
    margin-bottom: .2em;
  }
</style>

Și în acest moment, ar trebui să avem o formă de bază!

Cum sa creati un formular de contact cu Netlify Forms
Formular HTML de bază

Acum veți dori să puneți acest formular pe GitHub sau pe furnizorul dvs. preferat de Git acceptat de Netlify și vom fi pregătiți pentru următorul pas.

Urmați împreună cu comiterea!

Pasul 2: Configurarea unui nou formular cu Netlify

Odată ce formularul nostru este trimis către furnizorul nostru Git, îl putem sincroniza acum cu Netlify.

Mai întâi creați un cont sau utilizați un cont existent cu Netlify și faceți clic pe Site nou de la Git buton.

Aici, selectați furnizorul Git pe care l-ați folosit. eu folosesc GitHub în exemplul meu.

1611277211 942 Cum sa creati un formular de contact cu Netlify Forms
Conectarea unui furnizor Git în Netlify

Odată selectat furnizorul dvs. Git, acesta vă va cere să autorizați accesul, astfel încât Netlify să vă poată găsi depozitul Git.

După ce v-ați conectat cu succes contul, ar trebui să vedeți acum o listă a depozitelor la care ați furnizat acces. Găsiți depozitul în care ați adăugat formularul și selectați-l.

1611277211 528 Cum sa creati un formular de contact cu Netlify Forms
Conectarea unui depozit Git la Netlify

Dacă urmăriți împreună cu mine, formularul nostru este HTML pur, adică nu ar trebui să existe pași de construire sau niciun director special în care să fie publicat. Dar nu ezitați să modificați aceste setări dacă ați făcut ceva diferit.

1611277211 550 Cum sa creati un formular de contact cu Netlify Forms
Configurarea pașilor de compilare în Netlify

Acum, faceți clic Implementați site-ul care va deschide o nouă pagină în Netlify și în cel mai scurt timp site-ul dvs. va fi implementat cu succes.

1611277211 379 Cum sa creati un formular de contact cu Netlify Forms

În cele din urmă, faceți clic pe adresa URL din partea de sus a tabloului de bord al proiectului Netlify care se termină în netlify.app. Odată încărcat, veți vedea formularul!

1611277211 615 Cum sa creati un formular de contact cu Netlify Forms

Pasul 3: Vizualizarea trimiterilor de formulare

Acum că avem forma noastră, în cele din urmă dorim să vedem răspunsuri.

Pentru a începe, adăugați câteva informații la formularul dvs. și faceți clic pe trimitere.

1611277211 566 Cum sa creati un formular de contact cu Netlify Forms
Testarea formularului HTML

După ce trimiteți, veți observa că sunteți condus la o pagină Netlify care spune că formularul a fost trimis cu succes.

Acum puteți să vă întoarceți la tabloul de bord al proiectului Netlify și să derulați puțin în jos, unde puteți vedea acum o casetă cu Trimiteri recente de formulare precum și noua dvs. depunere.

1611277211 528 Cum sa creati un formular de contact cu Netlify Forms
Trimiterea formularului Netlify

Partea 2: Adăugarea unui formular Netlify personalizat într-o aplicație Next.js React

Dacă formularul va trăi singur și nu va face parte dintr-un site mai mare, există o mulțime de avantaje în a-ți lăsa formularul ca HTML pur. Dar, de multe ori, dorim ca formularul nostru de contact să facă parte din site-ul sau aplicația noastră.

Aici vom trece prin adăugarea unui formular la un Next.js aplicație.

Notă: demo-ul nostru de utilizare a Next.js este o aplicație redată static. Dacă încărcați formularul dvs. partea clientului, adică HTML-ul de bază nu include formularul, consultați notele din partea de jos a acestei pagini pentru mai multe informații despre soluții.

Pasul 0: crearea unei aplicații Next.js

Pentru a începe, avem nevoie de o aplicație. Vom folosi Next.js, deoarece putem crea cu ușurință o nouă aplicație de la zero.

Pentru a face acest lucru, puteți naviga la locul în care doriți să creați aplicația și să rulați:

yarn create next-app [project-name]
# or
npx create-next-app [project-name]

Voi numi proiectul meu my-nextjs-netlify-form.

Odată ce Next.js termină instalarea dependențelor, acesta vă va oferi instrucțiuni pentru a naviga la directorul proiectului și a porni serverul de dezvoltare.

Și după ce alergi yarn dev sau npm run dev, ar trebui să fiți gata să folosiți aplicația Next.js:

1611277211 367 Cum sa creati un formular de contact cu Netlify Forms
Noua aplicație Next.js

Urmați împreună cu comiterea!

Pasul 1: Adăugarea unui formular HTML într-o aplicație Next.js

Pasul nostru 1 va arăta foarte asemănător cu partea 1.

Interior de pages/index.js, vrem să găsim învelișul nostru de rețea și îl vom folosi pentru a adăuga formularul nostru.

Găsi <div className={styles.grid}> și înlocuiți întregul bloc cu următoarele:

<div className={styles.grid}>
  <div className={styles.card}>
    <form name="contact" method="POST" data-netlify="true">
      <p>
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" />
      </p>
      <p>
        <label htmlFor="email">Email</label>
        <input type="text" id="email" name="email" />
      </p>
      <p>
        <label htmlFor="message">Message</label>
        <textarea id="message" name="message"></textarea>
      </p>
      <p>
        <button type="submit">Send</button>
      </p>
    </form>
  </div>
</div>

Iată ce facem:

  • Profităm de grila existentă de la Next.js
  • Profităm și de cardul existent în care vom include formularul nostru
  • În interiorul cardului, lipim exact același formular HTML ca partea 1

Dacă reîncarcăm pagina, acum ne putem vedea formularul în interiorul unui card, astfel:

1611277211 943 Cum sa creati un formular de contact cu Netlify Forms
Adăugarea unui formular la o aplicație Next.js

Acum, înainte de a trece mai departe, vrem să facem 2 lucruri.

În primul rând, pentru că creăm acest formular într-o aplicație JavaScript, Netlify recomandă că adăugăm o intrare ascunsă cu numele formularului nostru.

În interiorul formularului nostru, adăugați următoarea intrare în partea de sus a elementului formularului:

<input type="hidden" name="form-name" value="contact" />

Asigurați-vă că valoarea acelei intrări este aceeași cu numele formularului dvs.

În al doilea rând, deoarece cardul pe care îl reutilizăm este destinat unei liste de link-uri, Next.js include câteva efecte de plasare. Acest lucru face ca formularul să fie confuz de utilizat, așa că hai să le eliminăm

Eliminați următoarele din styles/Home.module.css:

.card:hover,
.card:focus,
.card:active {
  color: #0070f3;
  border-color: #0070f3;
}

Pentru un pas bonus suplimentar, voi actualiza titlul paginii mele la „Contactează-mă” și voi elimina descrierea. Simțiți-vă liber să faceți acest lucru orice doriți.

1611277212 137 Cum sa creati un formular de contact cu Netlify Forms
Actualizarea titlului formularului

Și odată ce sunteți gata, similar cu înainte, adăugați acest lucru ca un nou depozit la GitHub sau furnizorul dvs. preferat de Git.

Urmați împreună cu comiterea!

Pasul 2: Configurarea și implementarea aplicației Next.js pe Netlify

Implementarea aplicației noastre pe Netlify va arăta destul de asemănător, dar înainte de a ajunge acolo, trebuie să configurăm aplicația Next.js pentru a putea exporta pe build.

În aplicația noastră Next.js, în interiorul package.json fișier, dorim să actualizăm fișierul build script pentru:

"build": "next build && next export",

Acum, când rulați build script, va compila aplicația în HTML static, CSS și JS din interiorul out director. Acest lucru ne va permite să îl implementăm pe Netlify. Puteți încerca chiar local pe mașina dvs., dacă doriți.

Cu această schimbare, comiteți-o și împingeți-o către furnizorul dvs. Git.

În continuare, implementarea aplicației va arăta în cea mai mare parte similară cu partea 1. Singura diferență este că avem o aplicație Next.js, trebuie să adăugăm pașii de construire.

Pentru a începe, vom dori să ne conectăm furnizorul Git la fel ca în Partea 1.

Odată ce ajungem la pagina Deploy Settings, vrem să configurăm comanda Build și directorul Publish.

Al nostru Comanda Build va fi yarn build sau npm run build în funcție de ce manager de pachete ați folosit și de Publicare director va fi out.

1611277212 856 Cum sa creati un formular de contact cu Netlify Forms
Implementați setările pentru o aplicație statică Next.js

După aceea, faceți clic pe Implementați site-ulși va începe la fel ca înainte.

Odată ce ați terminat implementarea, vom fi acum gata să deschidem aplicația.

1611277212 775 Cum sa creati un formular de contact cu Netlify Forms
Aplicația Next.js a fost implementată cu succes pe Netlify

Și odată ce ne deschidem aplicația, ne putem testa formularul completându-l și apăsând pe Submit.

1611277212 445 Cum sa creati un formular de contact cu Netlify Forms

La fel ca înainte, vom ajunge pe o pagină de succes Netlify. Dar dacă ne întoarcem și ne uităm în interiorul tabloului nostru de bord Netlify, acum vom vedea trimiterea noastră!

1611277213 32 Cum sa creati un formular de contact cu Netlify Forms
Trimiterea formularului Next.js cu succes pe Netlify

Urmați împreună cu comiterea!

Bonus: Păstrați oamenii pe site-ul dvs. cu un mesaj de succes

O altă caracteristică interesantă a formularelor Netlify este că vă permite să configurați formularul pentru a păstra persoanele pe site-ul dvs. web, configurând formularul chiar pe pagină.

Aici aveți o mulțime de opțiuni, fie că redirecționați pe cineva către o pagină nouă sau configurați mesageria pe pagina din care a trimis.

Pentru această demonstrație, vom configura un parametru URL pe care îl putem detecta pentru a afișa un mesaj de succes dacă vedem acel parametru.

Pentru a face acest lucru, în formularul dvs. HTML, adăugați următorul atribut:

action="/?success=true"

Acest lucru va spune Netlify că dorim să rămânem pe pagina de pornire (deoarece avem doar o singură pagină), dar aplicăm parametrul URL pentru a-l putea detecta în aplicația noastră.

Apoi, putem folosi useState și useEffect cârlige pentru a vedea acest parametru și a actualiza pagina.

În partea de sus a fișierului, să importăm aceste cârlige:

import { useState, useEffect } from 'react';

În partea de sus a componentei Acasă, să adăugăm starea noastră:

const [success, setSuccess] = useState(false);

Și pentru a detecta parametrul URL, putem folosi useEffect cârlig:

useEffect(() => {
  if ( window.location.search.includes('success=true') ) {
    setSuccess(true);
  }
}, []);

Notă: acesta este un mod simplu de a obține acest rezultat pentru demo. Dacă aveți o aplicație mai complicată, vă recomandăm să numiți parametrul ceva mai logic și să analizați corect parametrii URL pentru valoare.

Ceea ce face acest lucru este când componenta redă, va declanșa acest lucru useEffect cârlig, verificarea parametrilor din adresa URL și căutarea success=true. Dacă îl găsește, ne va actualiza success variabila de stat la true!

Apoi, sub titlul paginii noastre (<h1>), să adăugăm următorul fragment:

{success && (
  <p style={{ color: 'green'}}>
    Successfully submitted form!
  </p>
)}

Aici căutăm să vedem dacă success este adevărat și, dacă este, includem un rând de text care spune că formularul a fost trimis cu succes.

Deși nu vă puteți trimite formularul la nivel local, puteți testa acest lucru accesând aplicația dvs. care rulează local cu ?success=true Parametru URL, cum ar fi:

http://localhost:3000/?success=true
1611277213 609 Cum sa creati un formular de contact cu Netlify Forms
Testarea mesajului de succes la nivel local

În cele din urmă, puteți trimite aceste modificări către furnizorul dvs. Git și Netlify vă va reconstrui automat site-ul.

Și după ce ați terminat, vă puteți trimite formularul ca înainte și puteți vedea mesajul de succes.

1611277213 16 Cum sa creati un formular de contact cu Netlify Forms
Redirecționarea formularului cu succes pe Netlify

Și vedeți că formularul nostru încă se trimite!

1611277213 343 Cum sa creati un formular de contact cu Netlify Forms
Trimiterea cu succes a formularului pe Netlify

Urmați împreună cu comiterea!

Netlify formulare și cod partea clientului

Un lucru de luat în seamă cu soluția Netlify este că acest lucru funcționează doar „simplu” pentru paginile HTML statice.

Dacă pagina dvs. folosește JavaScript pentru a gestiona conținutul acelei pagini, cum ar fi să nu adăugați un formular decât după încărcarea paginii, va trebui să consultați documentația Netlify despre cum puteți face acest lucru. cu un atribut de formular suplimentar.

Netlify oferă, de asemenea, un exemplu despre cum poți trimiteți formularul dvs. dinamic cu JavaScript astfel încât să puteți crea o experiență personalizată în aplicația dvs.

Ce altceva poti face?

Configurarea fluxurilor de lucru avansate cu alte instrumente

Netlify vă permite să vă integrați cu alte instrumente pentru a vă permite să vă confruntați cu trimiterea formularului. În special, Netlify funcționează cu Zapier, ceea ce înseamnă că puteți accepta trimiterile primite și puteți face orice doriți cu ele.

https://docs.netlify.com/forms/notifications/

Prevenirea spamului cu reCAPTCHA

Spamul este, de asemenea, un lucru real. Nu doriți ca căsuța de e-mail să fie inundată de spam, deci puteți profita de câmpul Honeypot încorporat al Netlify sau vă vor prezenta cum să adăugați reCAPTCHA 2.

https://docs.netlify.com/forms/spam-filters/