Sådan oprettes en kontaktformular med Netlify-formularer og Next.js

Hvis du vil have nogen til at kunne kontakte dig eller indsende oplysninger på et websted, er en HTML-formular en ret standard måde at opnå det på.

Men at acceptere formularindsendelser kræver normalt en ekstra service eller en kompleks server-side-kode. Hvordan kan vi udnytte Netlify til let at oprette nye formularer?

  • Hvad er Netlify?
  • Hvad skal vi bygge?
  • Hvor meget koster dette?
  • Del 1: Oprettelse af en kontaktformular med HTML
  • Del 2: Tilføjelse af en brugerdefineret Netlify-formular til en Next.js React-app

Hvad er Netlify?

Netlify er en webplatform, der giver dig mulighed for nemt at implementere nye webprojekter med nemme at konfigurere arbejdsgange. Dette inkluderer implementering af et statisk websted, lambda-funktioner, og som vi vil tale om her, brugerdefinerede formularer.

Deres formtjeneste fungerer som en del af build- og implementeringsrørledningen. Når vi inkluderer en formular med en bestemt attribut til vores side, genkender Netlify denne formular og konfigurerer den til at fungere.

Hvad skal vi bygge?

Vi bygger en kontaktformular, der giver folk mulighed for at sende dig en note via dit websted.

Selve formularen vil være ret enkel. Ligesom en standard kontaktformular beder vi om en persons navn, e-mail-adresse og en besked.

Vi skal bygge dette ud ved hjælp af almindelig HTML for at demonstrere, hvordan det fungerer, og derefter bygge det med Next.js til oprettelse af en formular i en React-app.

Hvor meget koster dette?

Netlify-formularer er gratis at komme i gang. Dette gratis niveau er begrænset til 100 formularindsendelser pr. Websted pr. Måned, så hvis du forbliver under det, vil det altid være gratis.

Når det er sagt, hvis du overstiger 100 formularafsendelse på et bestemt websted, vil det første niveau være $ 19+ på tidspunktet for dette. Du kan tjekke de seneste prisplaner på Netlify's websted.

Del 1: Oprettelse af en kontaktformular med HTML

For at komme i gang skal vi oprette en grundlæggende formular med ren HTML. Det er en hurtig gevinst for at demonstrere, hvordan dette fungerer.

Trin 1: Oprettelse af en HTML-formular

Til vores form kan vi virkelig bruge hvad vi vil. Kontaktformularer kan være så enkle som en e-mail-adresse og et meddelelsesfelt, eller det inkluderer en række muligheder for at hjælpe en virksomhed med at besvare specifikke spørgsmål.

Vi starter med noget simpelt. Vi opretter en formular, der beder om andres navn, e-mail-adresse og en besked.

For at komme i gang skal du oprette en ny HTML-fil i roden af ​​dit projekt. Denne HTML-fil skal omfatte den grundlæggende struktur for et HTML-dokument. Lad os tilføje vores nye form inde i kroppen:

Name

Email

Message

Send

I uddraget ovenfor er vi:

  • Oprettelse af en ny form
  • Formularen har en navneattribut, en metode og en data-netlifyattribut indstillet tiltrue
  • Oprettelse af 3 formularfelter med etiketter, hver identificeret med en navneattribut
  • Oprettelse af en knap for at indsende formularen

Det, vi gerne vil lægge mest mærke til, er data-netlifyattributten og formen name. Når Netlify læser webstedet, vil det se disse felter og bruge dem til at gøre din formular til en aktivt fungerende form.

Jeg vil også tilføje en lille smule CSS for at få etiketterne til at se lidt mere konsistente ud. Du kan eventuelt tilføje dette til dokumentet:

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

Og på dette tidspunkt skal vi have en grundlæggende form!

Du vil nu gerne placere denne formular på GitHub eller din foretrukne Netlify-understøttede Git-udbyder, og vi er klar til næste trin.

Følg med på forpligtelsen!

Trin 2: Konfiguration af en ny form med Netlify

Når vores formular er skubbet til vores Git-udbyder, kan vi nu synkronisere den med Netlify.

Opret først en konto eller brug en eksisterende konto med Netlify, og klik på Nyt sted fra Git- knappen.

Vælg her, hvilken Git-udbyder du har brugt. Jeg bruger GitHub i mit eksempel.

Når du har valgt din Git-udbyder, vil den bede dig om at godkende adgang, så Netlify kan finde dit Git-lager.

Når du har oprettet forbindelse til din konto, skal du nu se en liste over de arkiver, du har givet adgang til. Find det lager, du har føjet din formular til, og vælg det.

Hvis du følger med mig, er vores form ren HTML, hvilket betyder, at der ikke skal være nogen byggetrin eller nogen speciel mappe, den bliver offentliggjort til. Men du er velkommen til at tilpasse disse indstillinger, hvis du gjorde noget andet.

Klik nu på Implementér websted, der åbner en ny side i Netlify, og på ingen tid vil dit websted blive implementeret med succes.

Til sidst skal du klikke på URL'en øverst på Netlify-projektets dashboard, der ender i netlify.app. Når den er indlæst, kan du se din formular!

Trin 3: Visning af formularindsendelser

Nu hvor vi har vores form, vil vi i sidste ende se svar.

For at komme i gang skal du tilføje nogle oplysninger til din formular og klikke på send.

Når du har indsendt, vil du bemærke, at du bliver ført til en Netlify-side, der siger, at formularen blev sendt.

Du kan nu gå tilbage til dit Netlify-projekt dashboard og rulle lidt ned, hvor du nu kan se et felt med Seneste formularindsendelser samt din nye indsendelse.

Del 2: Tilføjelse af en brugerdefineret Netlify-formular til en Next.js React-app

Hvis formularen skal leve af sig selv og ikke være en del af et større websted, er der mange fordele ved at lade din formular være ren HTML. Men ofte ønsker vi, at vores kontaktformular skal være en del af vores websted eller app.

Her går vi gennem at tilføje en formular til en Next.js-app.

Bemærk: vores demo om at bruge Next.js er en statisk gengivet app. Hvis du indlæser din formularsklientside, hvilket betyder at den underliggende HTML ikke inkluderer formularen, skal du tjekke noterne nederst på denne side for at få flere oplysninger om løsninger.

Trin 0: Oprettelse af en Next.js-app

For at starte, har vi brug for en app. Vi skal bruge Next.js, da vi ret nemt kan spinde en ny app op fra bunden.

For at gøre dette kan du navigere til, hvor du vil oprette appen og køre:

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

Jeg vil navngive mit projekt my-nextjs-netlify-form.

Når Next.js er færdig med at installere afhængigheder, giver det dig instruktioner til at navigere til dit projektkatalog og starte din udviklingsserver.

Og når du kører yarn develler npm run dev, skal du være klar til at gå med din Next.js-app:

Følg med på forpligtelsen!

Trin 1: Tilføjelse af en HTML-formular til en Next.js-app

Vores trin 1 vil se meget ud som del 1.

Inde i pages/index.jsvil vi finde vores gitterindpakning, og vi bruger det til at tilføje vores formular.

Find og udskift hele blokken med følgende:

Name

Email

Message

Send

Her er hvad vi laver:

  • Vi udnytter det eksisterende net fra Next.js
  • Vi udnytter også det eksisterende kort, som vi inkluderer vores formular i
  • Inde i kortet indsætter vi nøjagtigt den samme HTML-form som del 1

Hvis vi genindlæser siden, kan vi nu se vores formular inde i et kort, som dette:

Inden vi går videre, ønsker vi at gøre to ting.

For det første, fordi vi opretter denne formular i en JavaScript-app, anbefaler Netlify, at vi tilføjer et skjult input med vores formularnavn.

Inde i vores formular tilføj følgende input øverst i formelementet:

Sørg for, at værdien af ​​dette input er den samme som din formularnavn.

For det andet, fordi kortet, som vi genbruger, er beregnet til en liste over links, inkluderer Next.js nogle svæveeffekter. Dette gør formularen forvirrende at bruge, så lad os fjerne dem

Fjern følgende fra styles/Home.module.css:

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

For et ekstra bonustrin skal jeg opdatere min sidetitel til "Kontakt mig" og fjerne beskrivelsen. Du er velkommen til at lave dette, hvad du vil.

Og når du er klar, ligesom før, skal du tilføje dette som et nyt lager til GitHub eller din foretrukne Git-udbyder.

Følg med på forpligtelsen!

Trin 2: Opsætning og implementering af din Next.js-app til Netlify

Implementering af vores app til Netlify vil se temmelig ens ud, men inden vi kommer dertil, skal vi oprette vores Next.js-app for at kunne eksportere på build.

I vores Next.js-app, inde i package.jsonfilen, vil vi opdatere buildscriptet til:

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

Nu når du kører buildscriptet, kompilerer det appen til statisk HTML, CSS og JS inde i outbiblioteket. Dette giver os mulighed for at distribuere det til Netlify. Du kan endda prøve det lokalt på din maskine, hvis du vil.

Med den ændring, begå det og skub det ud til din Git-udbyder.

Dernæst vil implementering af appen for det meste se ud som del 1. Den eneste forskel er, at fordi vi har en Next.js-app, skal vi tilføje vores byggetrin.

For at komme i gang vil vi oprette forbindelse til vores Git-udbyder ligesom i del 1.

Når vi kommer til siden Implementeringsindstillinger, vil vi konfigurere vores Build-kommando og vores Publish-bibliotek.

Vores Build-kommando vil være yarn buildeller npm run buildafhængigt af hvilken pakkehåndtering du har brugt og Publish-biblioteket vil være out.

Derefter skal du klikke på Implementer websted , så starter det som før.

Når implementeringen er færdig, er vi nu klar til at åbne appen.

Og når vi først har åbnet vores app, kan vi teste vores formular ved at udfylde den og trykke på send.

På samme måde som før lander vi på en Netlify-successide. Men hvis vi går tilbage og kigger ind i vores Netlify-dashboard, ser vi nu vores indsendelse!

Følg med på forpligtelsen!

Bonus: Hold folk på dit websted med en succesbesked

En anden sej funktion med Netlify-formularer er, at det giver dig mulighed for at konfigurere din formular til at holde folk på dit websted ved at konfigurere formularen lige på siden.

Du har mange muligheder her, hvad enten det er at omdirigere nogen til en ny side eller konfigurere beskeder på den side, de sendte fra.

Til denne demo opretter vi en URL-parameter, som vi kan registrere for at vise en succesmeddelelse, hvis vi ser denne parameter.

For at gøre dette skal du tilføje følgende attribut på din HTML-form:

action="/?success=true" 

Dette fortæller Netlify, at vi ønsker at forblive på hjemmesiden (da vi kun har en side), men anvender URL-parameteren, så vi kan registrere den i vores app.

Dernæst kan vi bruge useStateog useEffectkroge til at se denne parameter og opdatere siden.

Lad os importere disse kroge øverst i filen:

import { useState, useEffect } from 'react'; 

Lad os tilføje vores tilstand inde i vores hjemmekomponent øverst:

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

Og for at opdage URL-parameteren kan vi bruge useEffectkrogen:

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

Bemærk: dette er en enkel måde at opnå dette resultat til demoen på. Hvis du har en mere kompliceret app, kan du måske navngive parameteren noget mere logisk og korrekt analysere URL-parametrene for værdien.

Hvad dette gør, er når komponenten gengives, vil den skyde denne useEffectkrog, kontrollere parametrene i URL'en og lede efter success=true. Hvis den finder den, opdaterer den vores successtilstandsvariabel til true!

Dernæst under vores sidetitel (

), lad os tilføje følgende uddrag:

{success && ( 

Successfully submitted form!

)}

Her ser vi for at se, om det successer sandt, og hvis det er det, inkluderer vi en tekstlinje, der siger, at formularen blev sendt.

Mens du ikke kan indsende din formular lokalt, kan du teste dette ved at besøge din app, der kører lokalt med ?success=trueURL-parameteren som:

//localhost:3000/?success=true 

Endelig kan du skubbe disse ændringer ud til din Git-udbyder, og Netlify genopbygger automatisk dit websted.

Og når den er færdig, kan du indsende din formular som før og se succesmeddelelsen.

Og se, at vores formular stadig indsendes!

Følg med på forpligtelsen!

Netlify-formularer og klientsides kode

Én ting at være opmærksom på med Netlify's løsning er, at den kun fungerer dette "ganske enkelt" for statiske HTML-sider.

Hvis din side bruger JavaScript til at administrere indholdet på den side, f.eks. Ikke at tilføje en formular, før siden er indlæst, skal du tjekke Netlify's dokumentation om, hvordan du kan få dette til at fungere med en ekstra formattribut.

Netlify giver også et eksempel på, hvordan du kan indsende din formular dynamisk med JavaScript, så du kan oprette en brugerdefineret oplevelse i din app.

Hvad kan du ellers gøre?

Opsætning af avancerede arbejdsgange med andre værktøjer

Netlify giver dig mulighed for at integrere med andre værktøjer, så du kan kæmpe dine formularindsendelser. Især fungerer Netlify med Zapier, hvilket betyder, at du kan acceptere indgående indsendelser og gøre hvad du vil med dem.

//docs.netlify.com/forms/notifications/

Forebyggelse af spam med reCAPTCHA

Spam er også en rigtig ting. Du vil ikke have din indbakke oversvømmet med spam, så du kan drage fordel af Netlify's indbyggede Honeypot-felt, eller de leder dig gennem, hvordan du tilføjer reCAPTCHA 2.

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

Følg mig for mere Javascript, UX og andre interessante ting!

  • ? Følg mig på Twitter
  • ? Abonner på min Youtube
  • ✉️ Tilmeld dig mit nyhedsbrev
  • ? Sponsor mig