So erstellen Sie ein Kontaktformular mit Netlify Forms und Next.js.

Wenn Sie möchten, dass jemand Sie kontaktieren oder Informationen auf einer Website einreichen kann, ist ein HTML-Formular ein ziemlich normaler Weg, um dies zu erreichen.

Das Akzeptieren von Formularübermittlungen erfordert jedoch normalerweise einen zusätzlichen Dienst oder einen komplexen serverseitigen Code. Wie können wir Netlify nutzen, um auf einfache Weise neue Formulare zu erstellen?

  • Was ist Netlify?
  • Was werden wir bauen?
  • Wieviel kostet das?
  • Teil 1: Erstellen eines Kontaktformulars mit HTML
  • Teil 2: Hinzufügen eines benutzerdefinierten Netlify-Formulars zu einer Next.js React-App

Was ist Netlify?

Netlify ist eine Webplattform, mit der Sie auf einfache Weise neue Webprojekte mit einfach zu konfigurierenden Workflows bereitstellen können. Dies umfasst die Bereitstellung einer statischen Website, Lambda-Funktionen und, wie wir hier besprechen werden, benutzerdefinierte Formulare.

Ihr Formulardienst arbeitet als Teil der Build- und Bereitstellungspipeline. Wenn wir unserer Seite ein Formular mit einem bestimmten Attribut hinzufügen, erkennt Netlify dieses Formular und konfiguriert es so, dass es funktioniert.

Was werden wir bauen?

Wir werden ein Kontaktformular erstellen, mit dem die Leute Ihnen eine Notiz über Ihre Website senden können.

Das Formular selbst wird ziemlich einfach sein. Wie bei einem Standard-Kontaktformular werden wir nach dem Namen, der E-Mail-Adresse und einer Nachricht fragen.

Wir werden dies mit einfachem HTML erstellen, um zu demonstrieren, wie es funktioniert, und es dann mit Next.js erstellen, um ein Formular in einer React-App zu erstellen.

Wieviel kostet das?

Netlify-Formulare können kostenlos gestartet werden. Diese kostenlose Stufe ist auf 100 Formularübermittlungen pro Website und Monat begrenzt. Wenn Sie also darunter bleiben, ist sie immer kostenlos.

Wenn Sie jedoch mehr als 100 Formulare auf einer bestimmten Website einreichen, beträgt die erste Stufe zum Zeitpunkt des Schreibens dieses Formulars mehr als 19 US-Dollar. Die neuesten Preispläne finden Sie auf der Netlify-Website.

Teil 1: Erstellen eines Kontaktformulars mit HTML

Zunächst erstellen wir ein Basisformular mit reinem HTML. Es ist ein schneller Gewinn, um zu demonstrieren, wie dies funktioniert.

Schritt 1: Erstellen eines HTML-Formulars

Für unsere Form können wir wirklich verwenden, was wir wollen. Kontaktformulare können so einfach wie eine E-Mail-Adresse und ein Nachrichtenfeld sein oder eine Vielzahl von Optionen enthalten, mit denen ein Unternehmen bestimmte Fragen beantworten kann.

Wir werden mit etwas Einfachem beginnen. Wir erstellen ein Formular, in dem Sie nach dem Namen, der E-Mail-Adresse und einer Nachricht gefragt werden.

Erstellen Sie zunächst eine neue HTML-Datei im Stammverzeichnis Ihres Projekts. Diese HTML-Datei sollte die Grundstruktur eines HTML-Dokuments enthalten. Fügen wir im Körper unsere neue Form hinzu:

Name

Email

Message

Send

Im obigen Ausschnitt sind wir:

  • Neues Formular erstellen
  • Das Formular verfügt über ein Namensattribut, eine Methode und ein data-netlifyAttribut, auf das festgelegt isttrue
  • Erstellen von 3 Formularfeldern mit Beschriftungen, die jeweils mit einem Namensattribut gekennzeichnet sind
  • Erstellen einer Schaltfläche zum Senden des Formulars

Das, worauf wir am meisten achten möchten, ist das data-netlifyAttribut und die Form name. Wenn Netlify die Site liest, werden diese Felder angezeigt und verwendet diese, um Ihr Formular in ein aktiv funktionierendes Formular umzuwandeln.

Ich werde auch ein bisschen CSS hinzufügen, damit die Labels ein bisschen konsistenter aussehen. Sie können dies optional zum Dokument hinzufügen :

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

Und an diesem Punkt sollten wir eine Grundform haben!

Sie möchten dieses Formular jetzt auf GitHub oder Ihrem bevorzugten von Netlify unterstützten Git-Anbieter stellen, und wir sind für den nächsten Schritt bereit.

Folgen Sie dem Commit!

Schritt 2: Konfigurieren eines neuen Formulars mit Netlify

Sobald unser Formular an unseren Git-Anbieter gesendet wurde, können wir es jetzt mit Netlify synchronisieren.

Erstellen Sie zuerst ein Konto oder verwenden Sie ein vorhandenes Konto bei Netlify und klicken Sie auf die Schaltfläche Neue Site von Git .

Wählen Sie hier den von Ihnen verwendeten Git-Anbieter aus. Ich verwende GitHub in meinem Beispiel.

Sobald Sie Ihren Git-Anbieter ausgewählt haben, werden Sie aufgefordert, den Zugriff zu autorisieren, damit Netlify Ihr Git-Repository finden kann.

Nachdem Sie Ihr Konto erfolgreich verbunden haben, sollte nun eine Liste der Repositorys angezeigt werden, auf die Sie Zugriff gewährt haben. Suchen Sie das Repository, zu dem Sie Ihr Formular hinzugefügt haben, und wählen Sie es aus.

Wenn Sie mir folgen, ist unser Formular reines HTML, dh es sollte keine Erstellungsschritte oder kein spezielles Verzeichnis geben, in dem es veröffentlicht wird. Sie können diese Einstellungen jedoch jederzeit anpassen, wenn Sie etwas anderes vorgenommen haben.

Klicken Sie nun auf Site bereitstellen, wodurch eine neue Seite in Netlify geöffnet wird und Ihre Site in kürzester Zeit erfolgreich bereitgestellt wird.

Klicken Sie abschließend auf die URL oben im Netlify-Projekt-Dashboard, die auf netlify.app endet. Sobald es geladen ist, sehen Sie Ihr Formular!

Schritt 3: Anzeigen von Formularübermittlungen

Jetzt, wo wir unsere Form haben, wollen wir letztendlich Antworten sehen.

Fügen Sie zunächst einige Informationen zu Ihrem Formular hinzu und klicken Sie auf Senden.

Nach dem Absenden werden Sie feststellen, dass Sie zu einer Netlify-Seite weitergeleitet werden, auf der angegeben ist, dass das Formular erfolgreich übermittelt wurde.

Sie können jetzt zu Ihrem Netlify-Projekt-Dashboard zurückkehren und ein wenig nach unten scrollen, wo Sie jetzt ein Feld mit den zuletzt eingereichten Formularen sowie Ihrer neuen Übermittlung sehen können.

Teil 2: Hinzufügen eines benutzerdefinierten Netlify-Formulars zu einer Next.js React-App

Wenn das Formular für sich alleine lebt und nicht Teil einer größeren Site ist, bietet es viele Vorteile, wenn Sie Ihr Formular als reines HTML belassen. Oft möchten wir jedoch, dass unser Kontaktformular Teil unserer Website oder App ist.

Hier erfahren Sie, wie Sie einer Next.js-App ein Formular hinzufügen.

Hinweis: Unsere Demo zur Verwendung von Next.js ist eine statisch gerenderte App. Wenn Sie Ihre Formular-Clientseite laden und das zugrunde liegende HTML das Formular nicht enthält, lesen Sie die Hinweise unten auf dieser Seite, um weitere Informationen zu Lösungen zu erhalten.

Schritt 0: Erstellen einer Next.js-App

Zu Beginn benötigen wir eine App. Wir werden Next.js verwenden, da wir eine neue App ziemlich einfach von Grund auf neu starten können.

Dazu können Sie zu dem Ort navigieren, an dem Sie die App erstellen und ausführen möchten:

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

Ich werde mein Projekt benennen my-nextjs-netlify-form.

Sobald Next.js die Installation der Abhängigkeiten abgeschlossen hat, erhalten Sie Anweisungen, wie Sie zu Ihrem Projektverzeichnis navigieren und Ihren Entwicklungsserver starten können.

Und nachdem Sie yarn devoder ausgeführt haben npm run dev, sollten Sie bereit sein, Ihre Next.js-App zu verwenden:

Folgen Sie dem Commit!

Schritt 1: Hinzufügen eines HTML-Formulars zu einer Next.js-App

Unser Schritt 1 wird Teil 1 sehr ähnlich sehen.

Innerhalb von pages/index.jsmöchten wir unseren Grid Wrapper finden und verwenden diesen, um unser Formular hinzuzufügen.

Suchen und ersetzen Sie den gesamten Block durch Folgendes:

Name

Email

Message

Send

Folgendes machen wir:

  • Wir nutzen das vorhandene Raster von Next.js
  • Wir nutzen auch die vorhandene Karte, in die wir unser Formular aufnehmen
  • Innerhalb der Karte wird genau das gleiche HTML-Formular wie in Teil 1 eingefügt

Wenn wir die Seite neu laden, können wir unser Formular jetzt auf einer Karte wie folgt sehen:

Bevor wir weitermachen, wollen wir zwei Dinge tun.

Da wir dieses Formular in einer JavaScript-App erstellen, empfiehlt Netlify zunächst, eine versteckte Eingabe mit unserem Formularnamen hinzuzufügen.

Fügen Sie in unserem Formular die folgende Eingabe oben im Formularelement hinzu:

Stellen Sie sicher, dass der Wert dieser Eingabe mit dem Namen Ihres Formulars übereinstimmt.

Zweitens enthält Next.js einige Hover-Effekte, da die Karte, die wir wiederverwenden, für eine Liste von Links vorgesehen ist. Dies macht die Verwendung des Formulars verwirrend. Entfernen Sie diese

Entfernen Sie Folgendes aus styles/Home.module.css:

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

Für einen zusätzlichen Bonusschritt aktualisiere ich meinen Seitentitel auf "Kontakt" und entferne die Beschreibung. Fühlen Sie sich frei, dies zu machen, was Sie wollen.

Und wenn Sie bereit sind, fügen Sie dies ähnlich wie zuvor als neues Repository zu GitHub oder Ihrem bevorzugten Git-Anbieter hinzu.

Folgen Sie dem Commit!

Schritt 2: Einrichten und Bereitstellen Ihrer Next.js-App für Netlify

Die Bereitstellung unserer App in Netlify sieht ziemlich ähnlich aus, aber bevor wir dort ankommen, müssen wir unsere Next.js-App einrichten, damit sie beim Erstellen exportiert werden kann.

In unserer Next.js-App innerhalb der package.jsonDatei möchten wir das buildSkript aktualisieren auf:

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

Wenn Sie das buildSkript ausführen , wird die App innerhalb des outVerzeichnisses zu statischem HTML, CSS und JS kompiliert . Dadurch können wir es für Netlify bereitstellen. Sie können es sogar lokal auf Ihrem Computer ausprobieren, wenn Sie möchten.

Übertragen Sie diese Änderung und senden Sie sie an Ihren Git-Anbieter.

Als nächstes sieht die Bereitstellung der App meistens ähnlich aus wie in Teil 1. Der einzige Unterschied besteht darin, dass wir eine Next.js-App haben und unsere Build-Schritte hinzufügen müssen.

Zunächst möchten wir unseren Git-Anbieter wie in Teil 1 verbinden.

Sobald wir zur Seite "Bereitstellungseinstellungen" gelangen, möchten wir unseren Build-Befehl und unser Veröffentlichungsverzeichnis konfigurieren.

Unser Build-Befehl lautet yarn buildoder npm run buildhängt davon ab, welchen Paketmanager Sie verwendet haben und welches Verzeichnis veröffentlicht wird out.

Klicken Sie danach auf Site bereitstellen. Die Site wird wie zuvor gestartet .

Sobald die Bereitstellung abgeschlossen ist, können wir die App öffnen.

Und sobald wir unsere App geöffnet haben, können wir unser Formular testen, indem wir es ausfüllen und auf Senden klicken.

Ähnlich wie zuvor landen wir auf einer Netlify-Erfolgsseite. Wenn wir jedoch zurückgehen und in unser Netlify-Dashboard schauen, sehen wir jetzt unsere Einreichung!

Folgen Sie dem Commit!

Bonus: Halten Sie die Leute mit einer Erfolgsmeldung auf Ihrer Website

Eine weitere coole Funktion bei Netlify-Formularen besteht darin, dass Sie Ihr Formular so einrichten können, dass Personen auf Ihrer Website bleiben, indem Sie das Formular direkt auf der Seite konfigurieren.

Hier haben Sie viele Möglichkeiten, ob Sie jemanden auf eine neue Seite umleiten oder Nachrichten auf der Seite konfigurieren, von der er gesendet wurde.

Für diese Demo richten wir einen URL-Parameter ein, den wir erkennen können, um eine Erfolgsmeldung anzuzeigen, wenn wir diesen Parameter sehen.

Fügen Sie dazu in Ihrem HTML-Formular das folgende Attribut hinzu:

action="/?success=true" 

Dadurch wird Netlify mitgeteilt, dass wir auf der Startseite bleiben möchten (da wir nur eine Seite haben), aber den URL-Parameter anwenden, damit wir ihn in unserer App erkennen können.

Als nächstes können wir die useStateund useEffect-Hooks verwenden, um diesen Parameter anzuzeigen und die Seite zu aktualisieren.

Importieren wir oben in der Datei die folgenden Hooks:

import { useState, useEffect } from 'react'; 

Fügen Sie in unserer Home-Komponente oben unseren Status hinzu:

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

Und um den URL-Parameter zu erkennen, können wir den useEffectHook verwenden:

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

Hinweis: Dies ist eine einfache Möglichkeit, dieses Ergebnis für die Demo zu erzielen. Wenn Sie eine kompliziertere App haben, möchten Sie den Parameter möglicherweise logischer benennen und die URL-Parameter für den Wert ordnungsgemäß analysieren.

Wenn die Komponente gerendert wird, wird dieser useEffectHook ausgelöst, die Parameter in der URL überprüft und gesucht success=true. Wenn es es findet, aktualisiert es unsere successStatusvariable auf true!

Weiter unter unserem Seitentitel (

), fügen wir den folgenden Ausschnitt hinzu:

{success && ( 

Successfully submitted form!

)}

Hier prüfen wir, ob dies der successFall ist. Wenn dies der Fall ist, fügen wir eine Textzeile hinzu, die besagt, dass das Formular erfolgreich gesendet wurde.

Sie können Ihr Formular zwar nicht lokal senden, Sie können dies jedoch testen, indem Sie Ihre lokal ausgeführte App mit dem folgenden ?success=trueURL-Parameter besuchen :

//localhost:3000/?success=true 

Schließlich können Sie diese Änderungen an Ihren Git-Anbieter weitergeben, und Netlify erstellt Ihre Site automatisch neu.

Und wenn es fertig ist, können Sie Ihr Formular wie zuvor senden und die Erfolgsmeldung sehen.

Und sehen Sie, dass unser Formular noch gesendet wird!

Folgen Sie dem Commit!

Netlify-Formulare und clientseitigen Code

Bei der Netlify-Lösung ist zu beachten, dass dies nur „einfach“ für statische HTML-Seiten funktioniert.

Wenn Ihre Seite JavaScript verwendet, um den Inhalt dieser Seite zu verwalten, z. B. erst nach dem Laden der Seite ein Formular hinzuzufügen, müssen Sie in der Dokumentation von Netlify nachlesen, wie Sie dies mit einem zusätzlichen Formularattribut tun können.

Netlify gibt auch ein Beispiel dafür, wie Sie Ihr Formular dynamisch mit JavaScript senden können, um eine benutzerdefinierte Erfahrung in Ihrer App zu erstellen.

Was kannst du sonst noch tun?

Einrichten erweiterter Workflows mit anderen Tools

Mit Netlify können Sie sich in andere Tools integrieren, um Ihre Formularübermittlungen zu streiten. Insbesondere arbeitet Netlify mit Zapier zusammen, sodass Sie eingehende Einsendungen akzeptieren und mit ihnen tun können, was Sie wollen.

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

Spam mit reCAPTCHA verhindern

Spam ist auch eine echte Sache. Sie möchten nicht, dass Ihr Posteingang mit Spam überflutet wird, sodass Sie das integrierte Honeypot-Feld von Netlify nutzen können, oder Sie erfahren, wie Sie reCAPTCHA 2 hinzufügen.

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

Folgen Sie mir für mehr Javascript, UX und andere interessante Dinge!

  • ? Folge mir auf Twitter
  • ? Abonniere mein Youtube
  • ✉️ Melden Sie sich für meinen Newsletter an
  • ? Sponsor mich