Formulare mit WPForms erstellen

Mit dem Plugin WPForms kannst du einfach per Drag & Drop dein Formular zusammenstellen. Es gibt WPForms in der kostenlosen Version und in verschiedenen Pro-Versionen. Je nach Version sind unterschiedliche Funktionen möglich. Ein einfaches Kontaktformular ist schon mit der kostenlosen Version möglich.

Du kannst außerdem Formulare für

  • Umfragen
  • Newsletter
  • Registrierungen
  • Zahlungsvorgänge
  • usw. erstellen

Inhaltsverzeichnis

Checkbox für den Datenschutz (DSGVO)

Bevor du loslegst: Denke an den Datenschutz. Füge deinem Formular ein Feld für den Datenschutz hinzu. Dafür gehst du in der linken Menüleiste zu den WPForms-Einstellungen und setzt den Schieber neben „DSGVO-Verbesserungen“ auf EIN und klickst auf Einstellungen speichern.
wpforms-checkbox-datenschutz

Jetzt hast du deine Formuarfelder um eine DSGVO-Abfrage erweitert.

Ein neues Formular erstellen​

Klicke auf WPForms ⟶ und dann auf Neues Formular erstellen

wpforms-uebersicht

Hier hast du die Möglichkeit aus verschiedenen vorgefertigten Formularen auszuwählen. Die meisten sind allerdings nur mit der Pro-Version nutzbar. Ansonsten wählst du einfach ein leeres Formular und startest manuell mit dem Aufbau.

Gib deinem Formular unter Einstellungen –> Allgemein einen aussagekräftigen Namen.

Inhalte aufbauen bearbeiten

Auf der linken Seite unter Felder findest du die verschiedenen Elemente, die du dem Formular hinzufügen kannst. In der kostenlosen Version kannst du auswählen zwischen Feldern, wie Namen und E-Mail-Adresse, Textfelder und Zahlen, Dropdown, Checkboxen usw.

Klicke das gewünschte Feld an und dein Formular baut sich Stück für Stück auf im rechten leeren Bereich auf. Falls du speziellere Felder, wie Telefonnummer, Adresse, Bewertungen oder besondere Zahlungsmethoden benötigst, kannst du auf die Pro-Version umsteigen.

Zur Info: Du kannst später die Reihenfolge der Felder immer noch ändern oder ein weiteres Feld einfügen.

wpforms-felder

Um die Inhalte zu bearbeiten, klicke auf das entsprechende Formularfeld.

wpforms-name-feld

Allgemeine Feldoptionen

Auf der linken Seite öffnet sich ein Bearbeitungsmenü, in dem du verschiedene Einstellungen vornehmen kannst. Wie hier im Beispiel:
  • Passe die Abfrage des Namens an.
  • Füge Beschreibungen und Hinweise hinzu, falls ein Feld erklärungsbedürftiger ist.
  • Markiere ein Feld als Pflichtfeld.
wpforms-feld-optionen
wpforms-feld-optionen-2

Die Einstellung „Erforderlich“ markiert eine Zeile als Pflichtfeld. Es gibt immer wieder Gründe, warum eine Information verpflichtend sein kann, z.B. eine E-Mail-Adresse bei einer Newsletter-Anmeldung oder die Rechnungsadresse bei einer kostenpflichtigen Beschreibung. Aber damit sollte man aus Datenschutzgründen und um es dem Nutzer einfach zu machen, sparsam umgehen.

Erweiterte Feldoptionen

Unter den erweiterten Feldoptionen kannst du die Feldgrößen anpassen.

Außerdem kannst du dich entscheiden, ob die Labels oder Sub-Labels (die Feldbezeichnungen) auf der Webseite später angezeigt werden sollen. Du kannst dich stattdessen für einen Platzhaltertext innerhalb der Formularfelder entscheiden.

wpforms-feld-optionen-3

Jedes Feld hat seine individuellen Einstellungsoptionen.

Layout anpassen

Standardmäßig werden alle Formularfelder untereinander angeordnet. Wenn du mehrere Formularfelder nebeneinander anzeigen möchtest, z.B. Name und E-Mail-Adresse, kannst du dein Layout anpassen.

Klicke das obere der beiden Felder an, die nebeneinanderstehen sollen. In diesem Fall das Feld „Name“

Gehe auf Erweitert –> CSS-Klassen –> Layouts anzeigen

Hier kannst du dein gewünschtes Layout auswählen.

wpforms-layout

Im nächsten Schritt markierst du, ob du dem Feld die rechte oder linke Seite zuordnest. Das gleiche machst du mit dem Feld „E-Mail-Adresse“.

Leider zeigt der WPForms-Editor diese Einstellung nicht direkt an. Du kannst dir das Ergebnis aber unter Vorschau anzeigen lassen. Dafür musst du das Formular zuerst speichern.

Absenden und weitere Einstellungen

Damit deine Seitenbesucher dir auch eine Nachricht schicken können, wechselst du wieder zu den Formular-Einstellungen.

wpforms-einstellungen-allgemein
Unter Allgemein hast du die Möglichkeit du den Namen des Formulars zu ändern, eine Beschreibung hinzufügen, falls du mehrere Formulare verwendest und den Aufruf zum Absenden (Absenden-Button) nach deinen Wünschen anzupassen.

Benachrichtigungen

Wichtig ist der Teil Benachrichtigungen. Hier stellst du ein, was passiert, nachdem jemand den Absenden-Button geklickt hat, z.B. an wen das Formular gesendet wird und welche weiteren Informationen übermittelt werden.

Falls Benachrichtigungen nicht aktiviert ist, schiebe den Regler einfach nach rechts.

wpforms-einstellungen-benachrichtigungen

Platzhalter für Tabelle

Zur Info: In der Pro-Version sind noch weitere Einstellungen möglich, beispielsweise
  • der/die Absender:in erhält eine Kopie der Nachricht
  • Formulare können auf mehrere Schritte aufgeteilt werden
  • Einbindung von verschiedenen Zahlungsanbietern.
  • Du kannst die Terminbuchung über deine Webseite einrichten, anstatt Calendly oder einen ähnlichen Service zu verwenden.

Bestätigungen

Unter Bestätigen kannst du auswählen, was nach dem Absenden passiert. Dafür hast du drei Möglichkeiten: Nachricht, Seite anzeigen, Gehe zu URL.
NACHRICHT Die absendende Person erhält eine einfache Bestätigung, wie ein „Danke, wir melden uns in Kürze“
wpforms-einstellungen-bestaetigung
SEITE Die Person wird auf eine andere Seite innerhalb deiner Domain weitergeleitet, beispielsweise www.deine-domain.de/andere-unterseite.
wpforms-bestätigung-seite-anzeigen
GEHE ZU URL  Die Person wird auf eine andere URL weitergeleitet, beispielsweise www. eine-andere-domain.de.
wpformas-bestätigung-url

Formular auf deiner Seite einbinden

Das Einbinden auf der Webseite ist sehr einfach. Du gehst in deine Formularübersicht und suchst das gewünschte Formular. In der Übersicht findest du einen Shortcode.

wpforms-shortcode
  1. Kopiere den Shortcode,
  2. füge ihn ein an der Stelle auf deiner Seite, an der dein Formular erscheinen soll und
  3. speichere die Seite
wpforms-shortcode-kontakt
wpforms-shortform-formular

Jetzt ist dein Formular sichtbar.

Cookie Consent Banner von Real Cookie Banner