So fügen Sie ein Kontaktformular in WordPress hinzu (Tutorial 2023)

Veröffentlicht: 2023-08-30

Ein Kontaktformular ist eine hervorragende Möglichkeit, Informationen von Besuchern Ihrer WordPress-Website zu sammeln. Unabhängig davon, ob Sie Bestellungen, Umfrageantworten oder Bewerbungen erfassen möchten, ist das Hinzufügen eines WordPress-Kontaktformulars für Website-Besucher eine effektive Möglichkeit, online mit Ihnen und Ihrer Marke in Kontakt zu treten und mit ihnen zu interagieren.

Inhaltsverzeichnis
  • 1 Vorteile der Verwendung eines WordPress-Kontaktformulars
  • 2 So fügen Sie Ihrer WordPress-Site ein Kontaktformular hinzu (Schritt für Schritt)
    • 2.1 Installieren Sie WPForms
    • 2.2 Erstellen Ihres ersten Formulars
    • 2.3 Anpassen Ihres Formulars und Ihrer Formularfelder
    • 2.4 Anpassen Ihrer Formulareinstellungen
    • 2.5 Hinzufügen Ihres Kontaktformulars zu einer WordPress-Seite
    • 2.6 Gestalten Sie Ihr Formular
  • 3 So holen Sie das Beste aus Ihrem Kontaktformular heraus
  • 4 weitere Kontaktformular-Plugins und Plattformen
  • 5 Fazit

Vorteile der Verwendung eines WordPress-Kontaktformulars

Es gibt viele Plattformen und Online-Tools, mit denen Sie Formulare erstellen können. Viele moderne Plattformen bieten unter anderem eine benutzerfreundliche Oberfläche, Berichte und Analysen. Wenn Sie jedoch ein WordPress-Kontaktformular verwenden, können Sie all diese Funktionen und noch mehr in Ihrer WordPress-Oberfläche nutzen. Hier sind einige weitere Vorteile, die Sie mit einem WordPress-Kontaktformular erzielen können:

  • Lead-Generierung – Wenn Sie ein WordPress-Kontaktformular verwenden, können Sie diese Einträge nutzen, um Ihr Publikum über Ihre Website zu vergrößern. Ein gutes Formular-Plugin verfügt über viele, viele integrierte Funktionen, sodass Sie keine separaten Plugins für Lead-Generierung, Content-Trichter, E-Mail-Opt-Ins, CRM-Integration und mehr benötigen. Dies ist schwierig, wenn Besucher Ihnen E-Mails direkt von Ihrer Website oder ihrer E-Mail-Plattform aus senden.
  • Bessere Sicherheit und Validierung – Mit einem nativ auf Ihrer WordPress-Website erstellten Formular können Sie die Zustellbarkeit Ihrer Formularergebnisse sicherstellen und Spam-Schutzdienste wie Recaptcha, Akismet und mehr nutzen, um Ihre E-Mail-Adresse und die Daten Ihrer Benutzer zu schützen.
  • Einträge und Kontakte an einem Ort verwalten – Mit einem WordPress-Kontaktformular können Sie einen zentralen Ort für Ihre Formulareinträge haben und diese auf Ihrer gesamten Website verwenden. Viele Formular-Plugins ermöglichen Ihnen das Sortieren, Organisieren und Exportieren von Inhalten aus Formularen, die Sie speichern und auf einfache Weise umfassende Datenbanken erstellen können. Dies ist nicht möglich, wenn Ihnen jemand direkt eine E-Mail sendet.
  • Erstellen Sie verschiedene Formulartypen mit erweiterter Funktionalität – Umfragen, Umfragen, Antragsformulare und mehr können ganz einfach mit einem WordPress-Kontaktformular erstellt werden. Ihrer Fantasie sind keine Grenzen gesetzt, und mit Formularerstellern, die Funktionen wie erweiterte Berechnungen, bedingte Felder und mehr ermöglichen, trägt ein Kontaktformular auf Ihrer Website dazu bei, Ihre Website zu einem interaktiven Erlebnis für Ihre Besucher zu machen, das sie dazu bringt, zu bleiben – und wiederzukommen – auf Ihrer Website.

So fügen Sie Ihrer WordPress-Site ein Kontaktformular hinzu (Schritt für Schritt)

Wir verwenden das beliebte und funktionsreiche WPForms-Kontaktformular-Plugin, um ein Kontaktformular zu unserer WordPress-Website hinzuzufügen. Wir beginnen mit der Installation des Plugins auf unserer Website.

Installieren Sie WPForms

Melden Sie sich zunächst bei Ihrem WordPress-Dashboard an und bewegen Sie den Mauszeiger über Plugins . Klicken Sie dann auf „Neu hinzufügen“ und geben Sie im Suchfeld „WPForms“ ein . Klicken Sie auf die Schaltfläche „Installieren“, um mit der Plugin-Installation zu beginnen.

Installieren Sie WPForms

Klicken Sie abschließend auf die blaue Schaltfläche „Aktivieren“ , um die Installation des WPForms-Plugins abzuschließen.

Aktivieren Sie WPForms

Nachdem das Plugin nun installiert und aktiviert ist, können Sie sehen, dass Ihrem WordPress-Menü ein neuer Menüpunkt hinzugefügt wurde.

Erstellen Sie Ihr erstes Formular

Erstellen Sie Ihr erstes Formular

WPForms bietet Ihnen mehrere Orte zum Hinzufügen eines neuen Formulars, sobald Sie zum Dashboard navigieren. Wir beginnen mit dem Klicken auf die orangefarbene Schaltfläche „Neu hinzufügen“ oben im Dashboard.

Erstellt ein neues Formular über das WPForms-Dashboard

Der Formularerstellungsprozess in WPForms beginnt mit der Benennung Ihres Formulars und der Auswahl einer der vielen verfügbaren Vorlagen. Um Ihr Formular zu benennen, geben Sie einen Titel in das Textfeld „Titel“ ein . Wählen Sie dann Ihre Formularvorlage aus . Für unser Tutorial erstellen wir ein benutzerdefiniertes Formular. Wählen wir also die Vorlage „Leeres Formular“ aus .

Benennen Sie das Formular und wählen Sie Ihre Vorlage

Nachdem Sie die leere Formularvorlage ausgewählt haben, wird Ihnen der schöne Drag-and-Drop-Builder von WPForms angezeigt. Auf der linken Seite finden Sie Ihre Feldtypen.

WPForms-Feldtypen

Selbst mit der kostenlosen Version stehen Ihnen mehrere Formularfeldtypen zur Verfügung, mit denen Sie beeindruckende Formulare erstellen können. Wir erstellen ein einfaches Kontaktformular und verwenden die Felder „Name“, „E-Mail“, „Dropdown“ und „Absatztext“ für unser Formular.

Formularfelder hinzufügen

Nachdem wir nun unsere Formularfelder ausgewählt haben, schauen wir uns einige der Anpassungen an, die wir mit WPForms vornehmen können.

Anpassen Ihres Formulars und Ihrer Formularfelder

Klicken wir zunächst auf das Formularfeld „Name“ . Als Nächstes wählen wir in den Feldoptionen für dieses Formularfeld die Registerkarte „Allgemein“ aus . Jetzt ändern wir das Format dieses Feldes und wählen First Middle Last aus . Zum Schluss schalten wir das Feld „Erforderliches Formular“ um . Das bedeutet, dass wir das Ausfüllen dieses Formularfelds zur Pflicht gemacht haben.

Änderungen am Feld „Allgemeiner Name“.

Als nächstes klicken wir auf die Registerkarte „Erweitert“ . Fügen wir unseren Namensfeldern Platzhalter hinzu, indem wir das Platzhalterfeld mit dem von uns gewählten Text ausfüllen .

Erweiterte Bearbeitungen von Formularfeldern

Um zunächst unser E-Mail-Feld anzupassen, klicken Sie auf das E-Mail-Feld . Klicken Sie dann auf die Registerkarte Allgemein . Für dieses Feld fügen wir eine E-Mail-Bestätigungsoption hinzu (das bedeutet, dass Benutzer ihre E-Mail-Adresse durch zweimalige Eingabe bestätigen müssen). Wir tun dies, indem wir das E-Mail-Bestätigungsfeld umschalten .

Bearbeiten Sie Ihr E-Mail-Feld

Klicken Sie für unser Dropdown-Feld auf das Feld, um zu beginnen . Klicken Sie dann auf die Registerkarte Allgemein . Jetzt fügen wir dem Formularfeld eine Beschriftung hinzu , damit unsere Benutzer den Zweck dieses Dropdowns kennen. Abschließend fügen wir diesem Feld unsere Optionen hinzu .

Fügen Sie Optionen hinzu und bearbeiten Sie Ihr Dropdown-Feld

Zuletzt kommen wir zu unserem letzten Formularfeld, dem Absatzfeld. Klicken Sie auf das Formularfeld und dann auf die Registerkarte „Allgemein“ . Weisen Sie dem Feld eine Beschriftung zu . Nachdem wir nun die Formularfelder in unserem Kontaktformular bearbeitet haben, passen wir die Formulareinstellungen an unsere Bedürfnisse an.

Anpassen Ihrer Formulareinstellungen

Um unsere Formulareinstellungen anzupassen, klicken Sie auf das Symbol „Einstellungen“ auf der linken Seite des Formularerstellers. Klicken Sie dann auf die Registerkarte Allgemein . Auf dieser Registerkarte können Sie die allgemeinen Einstellungen des Formulars bearbeiten, z. B. seinen Namen, seine Beschreibung, Tags usw. Wir werden den Text auf unserer Senden-Schaltfläche ändern. Scrollen Sie nach unten zum Textfeld „Senden-Schaltflächentext“ . Geben Sie dann „Nachricht senden“ ein .

Darüber hinaus werden wir den Verarbeitungstext für unser Formular ändern. Fügen Sie den von Ihnen gewählten Text zum Textfeld hinzu . In unserem Fall haben wir es auf „Nachricht senden“ geändert.

Registerkarte „Allgemein“ der Formulareinstellungen

WPForms verfügt über integrierte Sicherheit; Wenn Sie jedoch einen anderen Anbieter verwenden möchten, können Sie über die Registerkarte „Spam-Schutz und Sicherheit“ den von Ihnen gewählten Spam- und Sicherheitsanbieter in Ihr Formular integrieren. Wir werden jetzt die nativen Bestimmungen verwenden, die WPForm für unser Formular bereitstellt.

Spam- und Schutzoptionen mit WPForms

Fügen wir nun einige Benachrichtigungen zu unserem Formular hinzu. Das bedeutet, dass wir eine E-Mail erhalten, wenn ein Besucher unsere Website besucht und uns über unser Formular eine Nachricht sendet. Um dies zu aktivieren, klicken Sie zunächst auf die Registerkarte Benachrichtigungen . Dann ändern wir die E-Mail-Betreffzeile in „Neue Website-Formularnachricht“. Passen wir außerdem den Absendernamen an einen Namen an, den wir in unserem E-Mail-Posteingang erkennen. Mit der Pro-Version von WPForms können in Zukunft mehrere Benachrichtigungen hinzugefügt werden.

Neue Formularbenachrichtigung hinzufügen

Abschließend senden wir unseren Website-Besuchern eine Bestätigung, dass wir ihre Formulareingabe erfolgreich erhalten haben. Klicken Sie dazu auf den Menüpunkt Bestätigung . Passen Sie dann Ihre Bestätigungsnachricht im Textfeld an . Sie können Benutzer auch auf eine andere Seite Ihrer Website umleiten oder zusätzlich zur Anzeige einer Bildschirmmeldung eine andere Seite anzeigen.

Fügen Sie Ihrem Formular eine Bestätigungsnachricht hinzu

Nachdem Sie alle diese Änderungen an Ihrem Formular vorgenommen haben, klicken Sie oben rechts auf dem Bildschirm auf die orangefarbene Schaltfläche „Speichern“ . Nachdem wir unser Formular erstellt haben, fügen wir es unserer Seite hinzu!

Hinzufügen Ihres Kontaktformulars zu einer WordPress-Seite

Um Ihr Formular zu Ihrer Seite hinzuzufügen, erstellen Sie eine neue Seite auf Ihrer Website oder bearbeiten Sie eine vorhandene Seite. Lassen Sie uns eine neue Seite für unser Kontaktformular erstellen. Bewegen Sie den Mauszeiger zunächst über die Menüoption „Seiten“ und klicken Sie dann auf „Neu hinzufügen“ .

Fügen Sie Ihrer WordPress-Website eine neue Seite hinzu

Nachdem wir zum standardmäßigen WordPress-Seiteneditor weitergeleitet wurden, geben Sie Ihrer Seite einen Titel . Klicken Sie dann auf das schwarze Plus-Symbol, um die Bibliothek der verfügbaren Blöcke zu öffnen . Durchsuchen Sie WPForms und wählen Sie den WPForms-Block aus .

Erstellen Sie Ihre neue Seite

Wählen Sie Ihr Formular aus der Dropdown-Liste der verfügbaren Formulare aus.

Wählen Sie Ihr Formular aus

Sobald Ihr Formular ausgewählt ist, können wir mit der Gestaltung im Blockeditor beginnen.

Gestalten Sie Ihr Formular

Mit WPForms können Sie Ihr Kontaktformular ganz einfach gestalten. Sie können zwar CSS verwenden, aber auch die einfachen Tools im Blockeditor verwenden, um Ihr Formular zu bearbeiten und zu gestalten.

Gestalten Sie Ihr Formular

Im Editor können Sie mit nur wenigen Klicks die Farbe von Formularfeldern, die Größe der Formularfelder und vieles mehr ändern. So sah unser Formular aus, bevor wir unsere Stiländerungen hinzufügten:

Vor dem Stylen formen

Nach dem Styling sieht unsere Form so aus. Beachten Sie, dass sich die Farbe der Schaltfläche „Senden“ geändert hat und am Rand der Formularfelder Änderungen vorgenommen wurden. Vergessen Sie nicht, dass wir jedem Aspekt unseres Formulars auch CSS-Klassen zuweisen und CSS verwenden können, um unser Formular weiter anzupassen.

Nach dem Form-Styling

Nachdem wir unser Formular angepasst und unsere Felder eingerichtet haben, haben wir erfolgreich unser erstes WordPress-Formular erstellt! Hier sind einige Tipps und Tricks, die Sie beim Erstellen Ihres Kontaktformulars beachten sollten.

So holen Sie das Beste aus Ihrem Kontaktformular heraus

Mit Kontaktformularen können Sie eine dynamische Verbindung zu den Besuchern Ihrer Website herstellen. Es gibt jedoch einige Tipps, die Sie bei der Erstellung Ihrer Website beachten sollten.

Anders denken

Obwohl wir in diesem Tutorial ein einfaches Formular erstellt haben, verfügen WPForms und andere Kontaktformular-Plugins über Hunderte von Vorlagen, mit denen Sie eine Vielzahl von Formularen erstellen können. Formulare werden nicht nur zum Sammeln von Kontaktinformationen verwendet, sondern können für den Erfolg Ihres Unternehmens von entscheidender Bedeutung sein. Mit vielen WordPress-Formularerstellern können Sie Umfragen erstellen, Umfragen durchführen und Angebote für Kunden erstellen. Es ist sogar möglich, Produktpersonalisierungsanfragen über ein Kontaktformular zu sammeln. Scheuen Sie sich auch nicht davor, bei der Verwendung von Formularen auf Ihrer Website kreativ zu werden.

Bewahren Sie Ihr Formular sicher auf

Spammer nutzen alle Mittel, um ihre Aufgaben zu erfüllen; Eine Methode sind Online-Kontaktformulare. Eine Sicherheitsfunktion wie Akismet oder Recaptcha kann jedoch dazu beitragen, den Inhalt Ihres Formulars und Ihre E-Mail-Adresse zu schützen. Vergessen Sie nicht, beim Hinzufügen von Formularen zu Ihrer Website auf die Sicherheit Ihrer Formulare zu achten.

Die Kraft der Integrationen

Bei Integrationen glänzt die Verwendung eines nativen WordPress-Kontaktformulars. Sie können benutzerdefinierte E-Mail-Abonnementformulare erstellen, die Ihre E-Mail-Marketinglösung (wie Mailchimp) automatisch füllen. Ihr Formular kann mit Ihrem CRM verbunden werden, sodass Sie Leads effektiv pflegen können. WordPress-Kontaktformulare schaffen bei Ihren Kunden Vertrauen, da sie wie Ihre Website aussehen und sich auch so anfühlen. Ihr Formular wird zu einem Kraftpaket, das verschiedene Aspekte Ihres Unternehmens ausfüllt und gleichzeitig Ihre Prozesse nahtlos und rationalisiert.

Passen Sie Ihre Formularbenachrichtigungen und E-Mails an

Denken Sie daran, Ihre Benachrichtigungen und E-Mails anzupassen, wenn Sie Benachrichtigungen an sich selbst oder Ihre Besucher senden. Durch das Hinzufügen Ihrer Markenfarben, das Ändern von Standardtexten und mehr vermitteln Sie Ihrem Website-Besucher das Gefühl, Ihrer Marke zu vertrauen. Wenn Sie Personen nach dem Absenden des Formulars auf andere Seiten weiterleiten, stellen Sie außerdem sicher, dass diese Seiten Ihren Kunden alle Informationen bieten, die sie für die nächsten Schritte mit Ihrer Website benötigen.

Denken Sie an die Benutzererfahrung

Durch die Erstellung eines Conversion-optimierten Formulars wird sichergestellt, dass Ihre Besucher Ihr Formular erfolgreich ausfüllen und absenden. Das Erstellen unkomplizierter und leicht verständlicher Formulare hilft Besuchern dabei, das Formular erfolgreich einzureichen. Erwägen Sie das Hinzufügen von Tooltips, Beschreibungen, Anweisungen und Platzhaltern, die Ihre Kunden über die verschiedenen Felder und Abschnitte Ihres Formulars informieren und ihnen so einen nahtlosen und reibungslosen Prozess zum Ausfüllen Ihres Formulars ermöglichen.

Berücksichtigen Sie die Barrierefreiheit

Auch wenn Barrierefreiheit nicht oft diskutiert wird, rückt sie in den Vordergrund des Webdesigns. Überlegen Sie, wie andere Benutzer auf alternative Weise mit Ihren Formularen interagieren könnten. Wenn Sie dafür sorgen, dass Beschriftungen, ARIA, Tab-Sequenzen und mehr vorhanden sind, können diejenigen, die das Internet möglicherweise anders nutzen, auch Ihre Website nutzen und letztendlich das interaktive Element Ihrer Website auf eine Weise erleben, die ihren Bedürfnissen am besten entspricht.

Weitere Kontaktformular-Plugins und Plattformen

Hier finden Sie einige alternative Kontaktformular-Plugins und Plattformen zum Testen.

  • Beeindruckende Formulare: Ein beliebter Formularersteller mit einer übersichtlichen Drag-and-Drop-Oberfläche, mehr als 15 Premium-Add-ons, der Erstellung erweiterter Rechner und mehr
  • Gravity Forms: Ein weiteres WordPress-Formular-Plugin, das über eine Bibliothek mit mehr als 30 Formularfeldtypen, Zahlungsprozessor-Integrationen und komplexen Formularvorlagen wie Tests, Umfragen und mehr verfügt
  • Ninja Forms: Dieses Formular-Plugin ist in Plattformen wie AWeber und CampaignMonitor integriert und verfügt über über 40 Premium-Add-ons, was es zu einem großartigen Formularersteller für diejenigen macht, die Wert auf Integration legen.
  • Kontaktformular 7: Ein leistungsstarkes, kostenloses WordPress-Formular-Plugin mit einer Vielzahl von Integrationen von Mailchimp bis Stripe
  • Divi: Das leistungsstärkste WordPress-Theme verfügt über ein großartiges Kontaktformularmodul, das die Erstellung gebrandeter, auf Mobilgeräte reagierender Formulare auf Ihrer Website zu einem reibungslosen Prozess macht
  • Google Forms: Google Forms, ein weiterer kostenloser Formularersteller, ist in jedem Google-Konto enthalten und ein leistungsstarker Builder mit hervorragenden Analysen, der die Erstellung mehrseitiger Formulare und mehr ermöglicht.
  • Typeform: Dieser Formularersteller ist im Laufe der Jahre aufgrund seines schönen UI-Designs, der Formularanimationen und der Integrationen beliebt geworden. Es bietet Benutzern eine einzigartige Möglichkeit, sich im Dialog mit dem Formular auseinanderzusetzen.
  • Jotform: Als einer der ersten Online-Formularersteller hat Jotform viele Änderungen erfahren und ist nach wie vor eine der beliebtesten kostenlosen Online-Formularersteller-Plattformen.

Abschluss

Ein Kontaktformular ist ein leistungsstarkes Tool, das jede Website haben sollte. Dies ist nicht nur eine Möglichkeit für Ihre Kunden, mit Ihnen in Kontakt zu treten, sondern auch eine Möglichkeit, Ihrer Website ein interaktives Element hinzuzufügen. Mit einem Plugin wie WPForms, das über einen Drag-and-Drop-Builder verfügt, ist die Erstellung hochfunktionaler und schöner Formulare ganz einfach. Integrationen, Benachrichtigungen und Sicherheit sind Funktionen, die den Aufbau eines nativen WordPress-Kontaktformulars zu einer tragenden Säule im Website-Erstellungsprozess machen. Um Ihre Recherche voranzutreiben, sehen Sie sich unsere Liste der besten Kontaktformular-Plugins an, die Sie zu Ihrer folgenden Website hinzufügen können. Wie fügen Sie Kontaktformulare zu Ihrer Website hinzu? Gibt es ein Plugin, das Ihnen gefällt und über das wir mehr erfahren möchten? Lassen Sie es uns im Kommentarbereich unten wissen!

Ausgewähltes Bild über Viktoria Kurpas / Shutterstock.com