Send formular med NuxtJS & Netlify
Udgivet
Opdateret
I denne lille tutorial vil jeg vise dig hvordan du nemt håndterer og sender formularer med Nuxt sammen med Netlify Forms.
Formularer i vores applikationer er noget, vi ofte benytter. Det er en måde at sende et request til en server med en stump data, som vi så kan få tilsendt eller lagret i vores systemer. Når man bygger et statisk site med fx Nuxt, så har man ikke et formularmodul, som man oftest ser i et traditionelt CMS-system som Umbraco, Episerver, Wordpress osv. På et statisk site er det op til os selv at håndtere formularer og data hertil.
Heldigvis kan dette løses meget nemt ved at benytte Netlify forms, kombineret med lidt frontend-udvikling i Vue og Nuxt.
Med Netlify forms får vi mulighed for at håndtere formularer, uden vi behøver en masse backend-konfigurering eller kode.
Sådan kommer du igang
For at komme i gang med at implementere formularer i din Nuxt-applikation kræver det lige et par ting:
- Du skal have et statisk site, som er hosted på Netlify
- Et unikt domæne – Ikke din test-url på Netlify
- Du skal have slået HTTPS til inde i Netlify’s kontrolpanel
På Netlify får du automatisk gratis HTTPS med, så du skal ikke bekymre dig om at købe et certifikat. Husk, det også altid er en god idé at have slået HTTPS til, når du har at gøre med formularer – på den måde sikrer du, at din applikation ikke sender ikke-krypterede data over en usikker forbindelse.
Byg en formular
Det første, vi skal have klaret, er at lave en basal kontaktformular med noget simpelt HTML. Start din lokale dev server op med kommandoen: ”npm run dev” Lokaliser mappen ”Pages” i din Nuxt-applikation, og opret en side, den kan du kalde ”kontakt.vue”.
I vores formular skal vi bruge 3 felter:
- Navn
- Besked
Min formular ser nogenlunde sådanne ud:
<template>
<div class="form">
<form name="contact"´method="POST">
<div class="form__input">
<input type="text" name="name" id="name" required />
<label for="name">Navn</label>
</div>
<div class="form__input">
<label for="email">Email</label>
<input type="email" name="email" id="email" required />
</div>
<div class="form__textarea">
<label for="message">Besked</label>
<textarea name="message" id="message" required></textarea>
</div>
<button type="submit" class="button button--submit">
<span>
Send besked
</span>
</button>
</form>
</div>
</template>
Hvis du kender til HTML, skulle dette være velkendt for dig. Vi har en form med 3 inputfelter og en submit-knap. Som du måske har bemærket, er der ikke tilføjet en ”action”. Det håndterer vi senere.
Dine inputfelter skal have en ”name”-attribut, i og med det er disse, der vil blive mappet til Netlify. Husk også at give formen et navn. I vores tilfælde navngiver vi den ”contact”
Tilføj lidt CSS til din formular, og så vil du måske have noget, der ligner min:
Normalt ville jeg oprette en side og derefter en separat komponent til formularen og så inkludere komponenten på siden, men for at holde det simpelt gør vi det direkte på vores side.
Enter Netlify
For at vores formular virker korrekt og sender dataen til Netlify, kræver vores formular lige et par ekstra ting.
Tilføjelse af Netlify-attributten Når den besøgende trykker på submit-knappen, ønsker vi at sende dataen videre til Netlify, derfor er vi nødt til at lade Netlify vide, at de skal håndtere formularen.
Dette kan vi gøre ved at tilføje ”data-netlify="true"-attributten til vores form-tag. Derved håndterer Netlify vores formular, og den data, der bliver submitted hertil, vil du nu kunne se i dit Netlify-kontrolpanel under forms.
Tilføjelse af form-name input Da et website oftest har mere end en formular, er det en god ide at lade serveren vide, hvor data kommer fra. Det kan vi klare ved at lave et inputfelt, der er skjult, samt give det en værdi af det, vores form hedder – dvs. ”name”-attributten, vi gav vores <form> tag.
Tilføj følgende til din formular - det gør, at Netlify nu gemmer data under Contact.
<input type="hidden" name="form-name" value="contact">
Sådan sikrer du din formular mod spam
Du kender det formentligt – uden en eller anden form for spam-sikring flyder din indbakke over af irriterende spam-mails.
Det er muligt at implementere flere forskellige løsninger, hvor du selv håndterer spam, eller du kan benytte Netlify’s indbyggede håndtering.
Honeypot metoden
Ved at implementere Honeypot-metoden fra Netlify kan du komme problemet til livs. Dermed kan vi sikre os, at vi ikke bliver spammet. Honeypot-metoden er skjulte formfelter, som narrer bots til at udfylde det, vi mennesker ikke kan se. Lad os prøve at udvide vores form.
Vi starter med at udvide vores <form> med "netlify-honeypot" med en værdi, der tilsvarer værdien på vores skjulte felt. I vores tilfælde giver det værdien ”bot-field”.
Lav herefter dit skjulte input felt i formularen – husk herefter at skjule feltet med CSS.
Det, der sker, er, hvis nogle udfylder feltet ”bot-field”, så vil Netlify se det som spam, da det vil være en spam-bot, der formentlig har udfyldt dette, da det ikke er synligt for brugeren. Dette er en af de små gemte guldkorn ved Netlify, nemlig automatisk ”spam-bot detection” Nu skulle din form gerne ligne noget a la:
<template>
<div class="form">
<form name="contact"´method="POST" netlify-honeypot="bot-field" data-netlify="true">
<p class="hidden">
<label>Skal ikke udfyldes: <input name="bot-field"></label>
</p>
<div class="form__input">
<input type="text" name="name" id="name" required />
<label for="name">Navn</label>
</div>
<div class="form__input">
<label for="email">Email</label>
<input type="email" name="email" id="email" required />
</div>
<div class="form__textarea">
<label for="message">Besked</label>
<textarea name="message" id="message" required></textarea>
</div>
<button type="submit" class="button button--submit">
<span>
Send besked
</span>
</button>
</form>
</div>
</template>
Test formularen
Vi kan desværre ikke teste vores form lokalt, derfor kræver det, at vi laver et deploy til Netlify. Derefter tester vi vores formular. Når du har lavet et deploy, naviger da til siden, hvor din kontaktformular er.
Dette kan eksempelvis være: https://nickychristensen.dk/kontakt/
Udfyld felterne, og tryk på submit-knappen. Log herefter ind i Netllify (https://www.netlify.com/), og gå til forms. Hvis alt er gået som forventet, vil du nu kunne se dine data:
Super godt – vi er nu ved at være i mål. Dataen kommer ind i systemet, og vores formular fungerer næsten, som den skal. Vi mangler blot at give brugeren et svar om, at formularen er blevet afsendt. Lad os prøve at se på, hvordan vi klarer denne udfordring.
Sig tak til brugeren
I din applikation opretter du en ny side under ”pages” – den kan du kalde: ”tak.vue”.
Style din side, som du ønsker. Den vigtigste læring her er blot, at vi skal kunne vise brugeren en takkeside.
Min kode for denne side ser således ud:
<template>
<div class="contact-page">
<section class="content__intro content--gutter">
<article>
<h2>
Tak for din besked
</h2>
<p>
Jeg vender tilbage hurtigst muligt.
</p>
</article>
</section>
</div>
</template>
Når du har opsat din side, skal vi have redigeret vores formular fra tidligere. Åbn ContactForm.vue og tilføj en action til din form. Sæt denne til at være ”action=”/tak-for-din-besked”.
Dette gør, at Netlify automatisk redirecter til din takkeside.
Du klarede det
Det eneste, du mangler nu, er at deploye dine seneste ændringer til Netlify og derefter teste det hele igen, simpelt, ikke? 😊
Jeg er blevet super glad for at bruge Netlify til mine statiske sites. Jeg er stor fan af deres integration til Contentful, GIT, hvilket gør, at man nemt kan opsætte Continues Deployment, men mere om det på et andet tidspunkt.
Det var alt for nu. Jeg håber, du fik en smule ud af det, og skulle du sidde tilbage med nogle spørgsmål, så smid mig en besked, så vil jeg meget gerne være behjælpelig.