So erstellen Sie ein Kontaktformular mit Formspree

Sie können auf Ihrer Website viele Methoden verwenden, um Benutzern das sichere Senden von E-Mails an Sie zu ermöglichen. Ein Beispiel ist die Verwendung des mailto-Attributs in einem Kontaktformular. Das mailto-Attribut öffnet eine installierte E-Mail-Anwendung, damit der Benutzer eine Nachricht eingeben kann.

Erwägen Sie für eine bessere Erfahrung die Integration eines Tools wie Formspree. Formspree fungiert als Vermittler, erfasst Formulardaten und sendet sie an Ihre angegebene E-Mail-Adresse.

Was ist Formspree und wie funktioniert es?

Formspree ist ein E-Mail-Dienst, den Sie in ein benutzerdefiniertes Kontaktformular integrieren können. Wenn Sie sich bei Formspree anmelden, können Sie Ihre Ziel-E-Mail-Adresse für ein Formular angeben. Formspree verarbeitet Formularübermittlungen in Ihrem Namen. Es lässt dich

Formspree generiert einen Endpunkt, den Sie Ihrem benutzerdefinierten Formular hinzufügen müssen. Wenn ein Benutzer auf die Schaltfläche „Senden“ klickt, verwendet das Formular den Endpunkt, um den API-Dienst von Formspree aufzurufen. Dadurch wird eine E-Mail mit dem Inhalt des Kontaktformulars generiert.

Formspree sendet diese E-Mail an die Ziel-E-Mail, die Sie in Ihrem Formspree-Konto angegeben haben. Sie erhalten die E-Mail dann in Ihrem Posteingang. Ihr Formspree-Konto hat auch einen Ort, an dem Sie Ihre Kontaktformulareinsendungen anzeigen können.

Um Ihre E-Mail-Adresse bei Formspree zu registrieren, melden Sie sich an und geben Sie die Ziel-E-Mail-Adresse für Ihr Formular ein.

1. Einloggen in Formspree. Wenn Sie kein Konto haben, müssen Sie Ihre E-Mail-Adresse und ein Passwort eingeben. Registrieren Sie sich mit der E-Mail-Adresse, an die das Kontaktformular Einsendungen senden soll. Möglicherweise müssen Sie diese E-Mail-Adresse auch während des Anmeldevorgangs bestätigen.
2. Sobald der Anmeldevorgang abgeschlossen ist, wird die Seite „Formulare“ geöffnet. Klicke auf Neue Form.
3. Geben Sie einen beliebigen Namen für Ihr Kontaktformular ein und belassen Sie die Standard-Projekteinstellungen. Geben Sie die Ziel-E-Mail-Adresse in das Feld "E-Mails senden an" ein. Hierhin sendet Formspree Ihre Kontaktformulareinsendungen. Wenn Sie fertig sind, klicken Sie auf Formular erstellen.
4. Formspree stellt Ihnen einen Endpunkt und Beispiele für seine Verwendung zur Verfügung. Sie müssen diesen Endpunkt zu Ihrem benutzerdefinierten Kontaktformular auf Ihrer Website hinzufügen (dazu später mehr).
5. Standardmäßig speichert Formspree Ihr Formular unter einem Projekt namens „Mein erstes Projekt“. Wenn Sie den Namen ändern möchten, gehen Sie zurück zur Seite "Formulare". Klicke auf Einstellungen neben dem Namen des Projekts.
6. Hier können Sie den Namen Ihres Projekts ändern. Sie können sie beispielsweise so umbenennen, dass sie denselben Namen wie Ihre Website hat. Sie können auch die URL für Ihre Website hinzufügen.

Sie müssen den von Formspree bereitgestellten Endpunkt zum Kontaktformular im Code Ihrer Website hinzufügen.

1. Fügen Sie den Endpunkt dem Attribut "action" für das Formular hinzu. Dadurch sendet der Browser eines Benutzers das Formular an diese URL, wenn er es absendet.

   <form action="https://formspree.io/f/xjvlaqpe" Methode="POST">
   <!-- Ihr Formular hier -->
   <Schaltflächentyp="einreichen" Klasse="Taste"> Einreichen </button>
   </form>

2. Fügen Sie Ihrem Formular Eingaben hinzu. Sie können dieses Beispielformular verwenden, das verwendet das CSS-Framework Bootstrap:

   <form action="https://formspree.io/f/mbjqjrdl" Klasse="Extra-Polsterung" Methode="POST">
   <div-Klasse="Gruppe formen">
   <Bezeichnung für="Antwort an"> Ihre E-Mail-Adresse </label>
   <Eingabetyp="Email" Klasse="Formularkontrolle" id="Antwort an" name="_Antwort an" ngModel="Antwort" aria-beschrieben von="emailHilfe" Platzhalter="[email protected]">
   <kleine id="emailHilfe" Klasse="form-text text-stummgeschaltet"> Ihre E-Mail wird nicht mit anderen geteilt. </small>
   </div>
   <div-Klasse="Gruppe formen">
   <Bezeichnung für="Botschaft"> Ihre Nachricht </label>
   <Textfeldname="Botschaft" Stil="Höhe: 200px" Klasse="Formularkontrolle" id="Botschaft" Platzhalter="Sie da! ich'Ich kontaktiere Sie, weil..."></textarea>
   </div>
   <Schaltflächentyp="einreichen" Klasse="Taste"> Einreichen </button>
   </form>
   

Um zu testen, ob Formspree funktioniert, senden Sie sich eine Nachricht über das Kontaktformular, drücken Sie Einreichen, und überprüfen Sie Ihren E-Mail-Posteingang.

1. Führen Sie Ihre Website aus und öffnen Sie die Seite mit dem Kontaktformular. Geben Sie eine Nachricht in das Kontaktformular ein und drücken Sie Einreichen.
2. Sie erhalten die Kontaktformular-Nachricht in Ihrem Posteingang.
3. Wenn Sie zu Formspree zurückkehren, klicken Sie auf die Einreichungen Tab. Hier können Sie auch gesendete Nachrichten aus Ihrem Kontaktformular sehen.

Formspree ist einer der vielen Dienste, mit denen Sie ein benutzerdefiniertes Kontaktformular in Ihre Website integrieren können. Es ermöglicht Ihnen, schnell mit der Annahme von Benutzerfeedback zu beginnen, ohne sich um die Backend-Details kümmern zu müssen.

Wenn Sie neu in der Erstellung von Formularen mit HTML und JavaScript sind, können Sie auch mehr über die clientseitige Formularvalidierung erfahren. Dies hilft sicherzustellen, dass Ihre Kontaktformulare alle Benutzereingaben validieren können.

Über den Autor

Sharlene von Drehen (9 veröffentlichte Artikel)

Sharlene ist Tech Writer bei MUO und arbeitet auch Vollzeit in der Softwareentwicklung. Sie hat einen Bachelor of IT und hat bereits Erfahrung in der Qualitätssicherung und Universitätsnachhilfe. Sharlene liebt Spiele und spielt Klavier.

Mehr von Sharlene Von Drehnen