Share
In diesem Lernprogramm wird eine problemlose Möglichkeit zum Hinzufügen dynamischer, flexibler Formulare zu Ihren statischen Websites beschrieben.
Stellen Sie sich vor, Sie haben eine Website mit statischen Seiten erstellt, sei es mit Hilfe von Jekyll oder einfach mit HTML-Dateien. Jetzt möchten Sie ein Kontaktformular hinzufügen. Sie können eine Verknüpfung zu einem Onlinedienst herstellen, etwas Vorinstalliertes auf Ihrem Server installieren oder mit PHP etwas von Grund auf neu erstellen. Dies bedeutet, dass Sie entweder völlig auf das Design beschränkt sind oder sich mehr auf ein einziges Formular konzentrieren als auf die gesamte Website.
Was wäre, wenn Sie einen Dienst verwenden könnten, der Ihnen die vollständige Kontrolle über das Formular gibt, ohne dass Sie jedoch etwas auf Ihrem Server installieren müssen? Enter Formspree, ein Online-Service, mit dem Sie funktionale HTML-Formulare ohne Verwendung von PHP oder JavaScript erstellen können.
Gestatten Sie mir, Ihnen kurz die Schritte zu erläutern, die erforderlich sind, um Ihr eigenes Formular in Gang zu setzen.
Das erste, was Sie brauchen werden, ist ein Formular, das wir in HTML von Grund auf neu erstellen. Mein Formular ist eine sehr einfache Möglichkeit, um mit mir in Kontakt zu treten. Ich werde ein Feld für Name, E-Mail und Nachricht haben. Hier ist das Markup für mein Formular:
Sie werden sehen, dass ich ein hinzugefügt habe einreichen Eingabe und wickelte alle Felder mit ein Element.
Wir können diese Form beliebig gestalten. Da ist kein iframe oder irgendetwas anderes einschränken, wie es aussieht.
Damit Formspree Ihr Formular verarbeiten kann, müssen Sie das folgende Aktionsattribut hinzufügen Element:
Beachten Sie, dass die Felder "Name" und "Nachricht" entsprechend benannt sind._Antwort anWert für das E-Mail-Feld. Formspree erkennt diesen Attributwert und ermöglicht es mir daher, direkt auf die E-Mail zu antworten, die beim Senden im Formular eingegeben wird.
Ich kann auch hinzufügen _Nächster zu einer anderen versteckten Eingabe, um anzugeben, welche URL ich an einen Benutzer senden möchte, dem er das Formular übermittelt hat.
Damit ich weiß, woher die Vorlage kommt, füge ich eine Betreffzeile hinzu. Ich kann dies durch Hinzufügen der folgenden versteckten Eingabe tun:
Dieses Feld wird nicht angezeigt, wenn ein Benutzer das Formular anzeigt. Der Wert wird jedoch für die Betreffzeile verwendet, wenn ich eine Übermittlung erhalte.
In Formspree integriert ist eine "Honeypot" -Methode zur Verhinderung von Spam. Die Honeypot-Technik ist ziemlich einfach. Sie verbergen ein Feld in Ihrem Formular, das Benutzer nicht sehen können, aber Spambots. Der Spambot füllt das Feld aus, während Benutzer dies nicht tun. Jede Eingabe, bei der dieses Feld ausgefüllt ist, wird als Spam betrachtet.
Sie können diese Technik verwenden, indem Sie Ihrem Formular Folgendes hinzufügen:
Es ist wichtig, dass Sie ein Stilattribut verwenden, um das Feld auszublenden. Der Benutzerbrowser wird das Feld mit CSS ausblenden, der Spambot wird jedoch (wahrscheinlich) das CSS vollständig ignorieren und das Feld weiterhin ausfüllen. Durch die Benennung des Feldes "_Erwischt”, Formspree erkennt es und ignoriert alle Eingaben, die mit diesem ausgefüllt werden.
Für zusätzliche Sicherheit können Sie Ihre E-Mail in JavaScript einbetten. Dies verringert die Wahrscheinlichkeit, dass Spambots Ihre E-Mails aus dem HTML-Code lesen und auswählen. Schauen Sie sich an, was ich unten gemacht habe:
Hier habe ich die entfernt Aktion Attribut aus der Element und verwendet dann ein kleines Stück JavaScript, um es stattdessen festzulegen. Ich habe die E-Mail-Zeichenfolge auch in Segmente unterteilt, um sie für die Spambots noch dunkler zu machen. Fühlen Sie sich frei, dies zu kopieren und die Segmente der E-Mail durch Ihre eigenen zu ersetzen.
Der letzte Schritt ist, sicherzustellen, dass Ihr Formular funktioniert. Besuchen Sie die Seite mit Ihrem Formular in Ihrem Webbrowser, füllen Sie das Formular aus und senden Sie es wie ein normaler Benutzer ab. Sie sollten eine E-Mail von Formspree erhalten, in der Sie zur Bestätigung Ihrer E-Mail aufgefordert werden.
Klicken Sie auf den Bestätigungslink und Sie sind fertig!
Hinweis: Sie müssen diesen Bestätigungsvorgang jedes Mal durchlaufen, wenn Sie das Formular einer neuen Seite hinzufügen.
Die Formspree-API bietet eine einfache und sehr flexible Möglichkeit, Formulare zu einer Webseite hinzuzufügen. Perfekt für statische Standorte!
Accentsconagua