So erstellen Sie ein Kontaktformular mit Next.js und Netlify

Erstellen Sie effiziente Kontaktformulare mit Next.js und netlify und integrieren Sie eine leistungsstarke Spam -Erkennung! In diesem Artikel werden Sie dazu veranlasst, ein Kontaktformular mit einer Bestätigungsseite zu erstellen und die integrierten Funktionen von Netlify zu verwenden, um Anti-Spam-Funktionen zu verbessern.

Next.js ist ein leistungsstarkes React-Framework, das Hochleistungs-skalierbare React-Anwendungen aufbauen kann. In Kombination mit Netlify können Sie schnell ein Kontaktformular erstellen, ohne den serverseitigen Code zu schreiben.

Netlify -Formulare sind bequem eingerichtet und die kostenlose Version ist verfügbar (jede Netlify -Website kann ein Formular bis zu 100 kostenlosen Mal einreichen). Eingereichte Formulare werden automatisch durch den integrierten Spam-Filter von Netlify (mit Akismet) weitergeleitet und bieten eine Vielzahl von Konfigurationsoptionen zur Verbesserung der SPAM-Erkennung.

Erstellen Sie ein Kontaktformular

Erstellen Sie in der nächsten Anwendung in der nächsten.js eine ContactForm -Komponente, um Formulare auf der Kontaktseite zu rendern. Wenn Sie möchten, dass das Formular unter dem /contact rendert, sollten Sie die folgende ContactForm -Komponente in pages/contact.js verwenden, einschließlich der Tags und Eingabefelder:

 const contactForm = (/ * Code siehe */ unten);

Der folgende Code -Snippet erstellt ein Formular mit Namen, Firmen-, E -Mail- und Nachrichtenfeldern und einer Schaltfläche Senden. Nach der Übermittlung des Formulars wird es nach dem action des Formulars zu /contact/?success=true umgeleitet. Derzeit gibt es keinen Unterschied darin, wie die Seite aussieht, wenn sie mit Parametern und ohne success aussieht, und wir werden sie später aktualisieren.

Die aktuelle Datei Contact.js ist wie folgt:

 Import reagieren aus "reagieren";
const contactPage = () => {
 const contactForm = (/* Code im obigen Code -Snippet*/)

 Zurückkehren (
   <div>
     <h1>Kontaktieren Sie uns</h1>
     {ContactForm}
   </div>
 );
};

Standard -Kontaktpage exportieren;

Sobald wir das Grundformular fertiggestellt haben, müssen wir einige Informationen hinzufügen, damit Netlify das Formular in zukünftigen Site -Bereitstellungen automatisch erkennt. Dazu müssen Sie das Formular aktualisieren. Fügen Sie data-netlify="true" und ein verstecktes Eingangsfeld hinzu, das den Formularnamen enthält. Navigieren Sie im Netlify Dashboard zu Ihrer Website und klicken Sie auf die Registerkarte Formulare, um die Formularantwort basierend auf dem im Feld Hidden festgelegten Namen anzuzeigen. Wenn es auf der Website mehrere Formulare gibt, sollten Sie für jedes Formular einen eindeutigen Namen festlegen, damit Netlify -Datensätze korrekt sind.

 {/* Siehe unten für Code*/}

Nach erfolgreicher Bereitstellung der Site zum Netlify und dem Hinzufügen des data-netlify Attributs und form-name Feldes können Sie auf die bereitgestellte Site zugreifen und das Formular ausfüllen. Navigieren Sie nach dem Einreichen des Formulars zu https://app.netlify.com/sites/site-name/forms (wobei site-name Ihr Site-Name ist). Wenn das Formular erfolgreich ist, sollte die neueste Formulare zur Einreichung des Formulars angezeigt werden.

Auf der Bestätigungsseite umleiten

Um die Benutzererfahrung zu verbessern, sollten wir eine Logik hinzufügen, um der Bestätigungsseite nach dem Einreichen des Formulars zu leiten, wenn sich die URL an /contact/?success=true ändert. Sie können sich auch dafür entscheiden, auf eine völlig andere Seite umzuleiten, wenn das Formular eingereicht wird, aber die Verwendung von Abfrageparametern kann den nächsten Router verwenden, um einen ähnlichen Effekt zu erzielen. Wir können eine neue Variable erstellen, um die Sichtbarkeit der Bestätigungsseite oder Formular basierend auf den Abfrageparametern zu bestimmen. Sie können den next/router import { useRouter } from "next/router"; um die aktuellen Abfrageparameter abzurufen.

 const Router = userouter ();
const nancationscreenvisible = router.query?

In diesem Beispiel ist es nicht möglich, gleichzeitig auf der Seite und gleichzeitig sichtbar zu sein.

 const formvissible =! conträloscreenisible;

Um den Benutzern die Option zum erneuten Anleiten des Formulars zu geben, können Sie der Bestätigungsseite eine Schaltfläche hinzufügen, um das Formular durch Löschen der Abfrageparameter zurückzusetzen. Verwenden Sie router.replace (anstelle von router.push ) nicht nur die Seite, sondern ersetzt die aktuelle Seite auch durch eine Version, die keine Abfrageparameter enthält.

 Router.Replace ("/contact", undefiniert, {flach: true})

Wir können dann das Formular bedingt aufbauen, basierend darauf, ob es sichtbar ist oder nicht:

 {formvissible?

Basierend auf dem oben genannten können wir den folgenden Code verwenden, um das Formular basierend auf Abfrageparametern bedingt zu rendern (aktualisiert, wenn das Formular eingereicht wird):

 reag import, {usestate} aus "react";
{userouter} aus "next/router" importieren;

const contactPage = () => {
 const [subleTEnName, setSubMitterName] = Usestate ("");
 const Router = userouter ();
 const nancationscreenvisible =
   Router.Query?
 const formvissible =! conträloscreenisible;

 const bestätigende Message = (
   <react.fragment>
     <p>Vielen Dank, dass Sie das Formular eingereicht haben. Wir werden Sie innerhalb von 24-48 Stunden kontaktieren.</p>
     <button onclick="{()"> Router.Replace ("/contact", undefined, {flach: true})}> eine weitere Antwort einreichen</button>
   </react.fragment>
 );

 const contactForm = (/* Code im ersten Codebeispiel*/);

 Zurückkehren (
   <div>
     <h1>Kontaktieren Sie uns</h1>
     {formvissible?
   </div>
 );
};

Standard -Kontaktpage exportieren;

Fügen Sie versteckte Roboterfelder hinzu

Nachdem die Kernfunktionalität des Formulars abgeschlossen ist, können wir dem Formular zusätzlich zu dem standardmäßigen Akismet eine zusätzliche Spam -Erkennung hinzufügen. Diese Funktion kann aktiviert werden, indem data-netlify-honeypot="bot-field" zum Formular hinzugefügt wird.

 {/* Siehe unten für Code*/}

Wir müssen auch einen neuen versteckten Absatz mit einem Tag namens bot-field erstellen, das die Eingabe enthält. Dieses Feld ist für den Roboter "sichtbar", aber nicht für den Menschen. Wenn dieses versteckte Feld ausgefüllt wird, erkennt Netlify den Bot und markiert die Einreichung als Spam.

<p hidden>
  <label>Bitte füllen Sie diesen Artikel nicht aus:</label>
  <input type="text" name="bot-field">
</p>

Weitere Anpassung

• Wir können eine andere von Netlify unterstützte Spam -Schutzoption untersuchen, bei der Netlify -Formulare Recaptcha 2 hinzufügen können.
• Wir können das Formular aktualisieren und das Hochladen von Dateien zulassen.
• Wir können Benachrichtigungen für Formulareinreichungen festlegen. Dies kann in https://app.netlify.com/sites/[your-site-name]/settings/forms enthalten sein, wo wir ein benutzerdefiniertes Themenfeld (kann versteckt werden können) für E-Mail-Benachrichtigungen einbezogen werden.

Vollständiger Code

Der vollständige Site -Code ist auf GitHub verfügbar. (Bitte geben Sie einen GitHub -Link an, wenn im Artikel einen vorhanden ist)

Zusätzlicher Inhalt

Der folgende Code enthält alles, was wir besprochen haben, sowie die Logik, um benutzerdefinierte Betreffzeilen mit den im Feld Name eingereichten Namen einzurichten. (Bitte geben Sie den Code an)

Bitte beachten Sie, dass das obige Code -Snippet mit dem vollständigen Code gemäß dem Originaldokument ergänzt werden muss. Ich versuchte mein Bestes, um basierend auf dem Originaldokument umzuschreiben und zu polieren, und bemühte mich, die Pseudo-Original-Kreation vorzunehmen, ohne die ursprüngliche Bedeutung zu ändern.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Kontaktformular mit Next.js und Netlify. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!