So fügen Sie Kontaktformulare mit dem Plugin hinzu – P2: Verwenden Sie WPForms

Im vorherigen Artikel der Serie „Kontaktformular“ haben wir erfahren, was ein Kontaktformular ist und wie man das Plugin Contact Form 7 verwendet. Wie versprochen, habe ich ein weiteres Tutorial mit WPForms geschrieben und werde es Ihnen in diesem Artikel zeigen.

WPForms ist ein kostenloses Drag-and-Drop-Kontaktformular-Plugin mit einer Echtzeitvorschau. Meiner Erfahrung nach ist es einfach und bequem, mit diesem Plugin zu arbeiten.

Erinnern Sie sich an dieses Muster für ein Universitätsregistrierungsformular, das wir in Teil 1 dieser Serie erstellt haben? Jetzt erstellen wir dasselbe mit WPForms.

Schritt 1: Installieren und aktivieren Sie das WPForms-Plugin

Dieses Plugin hat eine kostenlose Version auf wordpress.org, Sie müssen also nur das Plugin direkt im Admin Dashboard installieren und aktivieren.

Kontaktformular von WPForms – Drag & Drop Form Builder für WordPress

Autor(en): WPForms

Aktuelle Version: 1.7.1.2

Zuletzt aktualisiert: 18. November 2021

wpforms-lite.1.7.1.2.zip

98% Bewertungen 5,000,000+ Installiert WP 4.9+ Benötigt

Schritt 2: Erstellen Sie ein neues Kontaktformular und wählen Sie eine Vorlage

Gehen Sie in Ihrem Admin-Dashboard zu WPForms > Neu hinzufügen .

Hier ist die Schnittstelle, mit der Sie arbeiten müssen:

In der linken Seitenleiste sehen Sie 5 Abschnitte:

1. Einrichtung : Benennen Sie das Kontaktformular und wählen Sie seine Vorlage aus.
2. Felder : Felder für das Kontaktformular hinzufügen und anpassen.
3. Einstellungen : Konfigurieren Sie die Benachrichtigungen, Bestätigungen und allgemeinen Einstellungen.
4. Marketing : Verknüpfung mit E-Mail-Marketing-Tools wie Constant Contact, Campaign Monitor, Mailchimp, …
5. Zahlungen : Fügen Sie Zahlungen von PayPal Standard, Stripe und Authorize.Net hinzu.

Hinweis : Ich führe keine E-Mail-Marketingkampagne durch und mein Formular erfordert keine Zahlungsinformationen. Daher benötige ich die Abschnitte Marketing und Zahlungen nicht .

Geben Sie im Abschnitt Setup Ihren Formularnamen ein und wählen Sie Ihre gewünschte Vorlage aus.

Es gibt vier Standardvorlagen:

• Einfaches Kontaktformular
• Newsletter-Anmeldeformular
• Vorschlag für
• Leeres Formular

Mit Ausnahme von Blank Form haben andere Vorlagen ihre eigenen vorgefertigten Felder, die Sie verwenden können, um Kontaktformulare schneller zu erstellen. Darüber hinaus können Sie WPForms-Addons installieren (nur in kostenpflichtigen Versionen verfügbar), um weitere Vorlagen zu erhalten.

In diesem Artikel wähle ich die Vorlage Blank Form , um von Anfang an Schritt für Schritt ein Kontaktformular aufzubauen. Dies wird Ihnen helfen, alles leichter und tiefer zu verstehen.

Schritt 3: Felder für das Kontaktformular hinzufügen

Felder hinzufügen

Nachdem Sie in Schritt 2 die leere Formularvorlage ausgewählt haben , werden Sie zum Abschnitt Felder verschoben.

So fügen Sie Felder für Ihre Kontakt - Formular, ziehen Sie die gewünschten Felder aus dem Add Registerkarte Felder und legen Sie sie in das Kontaktformular.

Als nächstes ein Feld, klicken Sie darauf, anpassen und dann seine Parameter in den Feldern Registerkarte Optionen bearbeiten.

Außerdem können Sie ein Feld löschen oder duplizieren, indem Sie mit der Maus darüber fahren und auf die gewünschten Schaltflächen klicken.

In diesem Artikel muss ich die folgenden Felder hinzufügen:

Nachdem Sie alle diese Felder hinzugefügt haben, müssen Sie in den nächsten Schritten jedes Feld anpassen.

Allgemeine Optionen für jedes Feld anpassen

Im Allgemeinen gibt es zwei Arten von Optionen, um jedes Feld anzupassen:

Grundlegende Optionen : Alle Felder enthalten diese Optionen und Sie sollten unbedingt damit arbeiten, um Ihr Kontaktformular klar und verständlich zu gestalten.

• Label : Geben Sie den Feldnamen ein, der angezeigt werden soll.
• Beschreibung : Dies ist die Textanzeige unter dem Feld, um den Benutzern mitzuteilen, was zu tun ist.
• Erforderlich : Es ist optional! Markieren Sie dieses Feld, damit dieses Feld ausgefüllt werden muss.

Wenn ich in den nächsten Schritten „Basisinformationen“ erwähne, bedeutet dies, dass Sie sich mit diesen grundlegenden Optionen befassen müssen.

Erweiterte Optionen : Für jedes Feld gibt es einige erweiterte Funktionen. Es ist optional für Sie, sich mit ihnen zu befassen, aber es gibt einige wichtige Dinge, die Sie beachten sollten:

• Platzhaltertext : Zeigen Sie einen Text in den Feldern an, bevor Benutzer Daten eingeben. Dieser Text kann als Leitfaden oder Beispiel verwendet werden, damit Benutzer leicht verstehen, was sie ausfüllen müssen. Sie können beispielsweise den Platzhaltertext des E-Mail-Felds auf „E-Mail eingeben “ festlegen .
• Standardwert : Wenn viele Personen dieselbe Antwort haben, können Sie eine Standardantwort festlegen, um den Benutzern Zeit und Mühe zu sparen. Sie erstellen beispielsweise ein Kontaktformular für Personen, die in New York leben, sodass Sie im Feld „Standort“ den Standardwert „New York“ eingeben können.
• CSS-Klassen : Geben Sie CSS-Klassen in dieses Feld ein, um das Feld zu formatieren. Im nächsten Schritt füge ich Code in diesen Abschnitt ein, um das Kontaktformular zu gestalten.

Hinweis :

• In Contact Form 7 können Sie den Standardwert als Platzhaltertext verwenden. Aber es ist bequemer in WPForms , weil Sie die getrennt von Platzhaltertext Schnitt aufweisen. Außerdem hat WPForms den Abschnitt Beschreibung , der den Text unter dem Feld anzeigt. Ich nutze diesen Weg, weil er mein Kontaktformular besser aussehen lässt.

• Sie können auf die Fragezeichen-Schaltfläche neben den Optionen / Feldern klicken, um die Anweisungen von WPForms für sie zu lesen.

Darüber hinaus gibt es je nach Feld verschiedene Optionen. Lassen Sie uns herausfinden, was sie sind!

Passen Sie das Feld "Ihr Name" an

Wählen Sie das Feld Einfacher Zeilentext aus und geben Sie einfach die grundlegenden Informationen ein:

In diesem Feld gibt es im Abschnitt Erweiterte Optionen 2 weitere Optionen:

• Länge begrenzen : Aktivieren Sie dieses Kontrollkästchen, um eine Begrenzung für die maximale Anzahl von Zeichen auszuwählen, die in das Feld eingegeben werden können.
• Eingabemaske : Geben Sie Eingabemasken ein, um bestimmte Formate für das Feld zu erfordern. Lesen Sie hier mehr Details.

Passen Sie das Feld "Ihre Telefonnummer" an

Dieses Feld hat nichts besonderes. Wählen Sie einfach das Feld Zahlen aus und geben Sie die grundlegenden Informationen ein:

Passen Sie das Feld "Ihre E-Mail" an

Wählen Sie das Feld E-Mail aus und geben Sie die grundlegenden Informationen für das Feld ein:

Dieses Feld hat eine weitere grundlegende Option: E-Mail-Bestätigung aktivieren . Sie können es aktivieren, um Benutzer aufzufordern, ihre E-Mail-Adresse zweimal anzugeben. Dies stellt sicher, dass ihre E-Mail korrekt ist.

Passen Sie die Felder "Studienort" und "Haupt" an

Wählen Sie zunächst das Dropdown- Feld aus. Geben Sie im Abschnitt Auswahl die Optionen für das Feld ein. Sie können auf (+) (-) klicken, um Auswahlmöglichkeiten hinzuzufügen/zu entfernen.

Darüber hinaus können Sie auch auf die Schaltfläche Massenhinzufügen klicken, um viele Auswahlmöglichkeiten auf einmal hinzuzufügen. Geben Sie im Feld Auswahlmöglichkeiten hinzufügen die Auswahlmöglichkeiten in der gewünschten Reihenfolge ein (jede Auswahl ist eine Zeile) und klicken Sie dann auf Neue Auswahlmöglichkeiten hinzufügen .

Darüber hinaus gibt es in diesem Feld 2 erweiterte Optionen, die Sie beachten sollten:

• Stil : Sie können Ihr Dropdown-Menü mit zwei Optionen gestalten: klassisch und modern. Der moderne Stil ermöglicht die Suche nach Schlüsselwörtern. Daher funktioniert es gut in Menüs mit vielen Optionen (mehr als 10 Optionen).
• Dynamische Auswahlmöglichkeiten: Erlauben Sie Benutzern, Auswahlmöglichkeiten aus Beitragstypen oder Taxonomien auszuwählen. Wenn Sie beispielsweise als Quelle des dynamischen Beitragstyps Beiträge auswählen, ist jede Auswahl im Dropdown-Menü ein Beitrag auf Ihrer Website.

Passen Sie das Feld „Registrieren bei“ an

Wählen Sie die Kontrollkästchen- Felder aus und geben Sie Auswahlmöglichkeiten wie die Dropdown- Felder ein.

In diesem Feld gibt es 2 erweiterte Optionen, die Sie beachten sollten:

• Bildauswahl verwenden : Sie können es verwenden, um Ihre Auswahl zu veranschaulichen und Ihr Kontaktformular attraktiver und visualisierter zu gestalten.
• Zufällige Auswahl: Dies kann verhindern, dass Leute eine Wahl treffen, nur weil es die erste ist.

Schritt 4: Konfigurieren Sie das Kontaktformular

Nachdem wir ein Kontaktformular erstellt haben, müssen wir es konfigurieren. In der kostenlosen Version von WPForms können Sie die folgenden drei Abschnitte konfigurieren:

Allgemeine Einstellungen konfigurieren

Das WPForms-Plugin enthält spezifische Anweisungen für jede Option in diesem Teil. Sie sollten auf die Fragezeichen-Schaltfläche klicken, sie sorgfältig lesen und auf diese Felder achten:

• Text der Schaltfläche Senden : In Kontaktformular 7 müssen Sie das Feld Senden erstellen. Aber in WPForms ist die Senden-Schaltfläche integriert. Sie können den Text dieser Schaltfläche in diesem Abschnitt beliebig ändern, z. B. Registrieren an, E-Mail senden, …
• Anti-Spam-Schutz aktivieren : Spammer können Sie manchmal durch tonnenweise „Papierkorb“ belästigen. In diesem Fall sollten Sie diese Anti-Spam-Funktion aktivieren.

Konfigurieren Sie die Benachrichtigungen

Wenn Sie eine E-Mail-Benachrichtigung erhalten möchten, wenn ein Benutzer ein Kontaktformular sendet, wechseln Sie zu Einstellungen > Benachrichtigungen .

Sie können den Feldern in diesem Abschnitt „Smart Tags“ oder Text hinzufügen, um die E-Mails zu verwalten, die Sie erhalten, wenn ein Benutzer ein Kontaktformular abschickt.

Hinweis : Smart-Tags können automatisch Informationen zu Ihren Kontaktformularbenachrichtigungen hinzufügen.

Dies ist ein Beispiel für meine Einstellungen:

Konfigurieren Sie die Bestätigungen

Im Abschnitt Bestätigung können Sie die Nachrichten konfigurieren, die Benutzer nach dem Absenden von Kontaktformularen erhalten.

Wenn Sie die gesamte Konfiguration abgeschlossen haben, klicken Sie einfach auf Speichern .

Schritt 5: Zeigen Sie das Formular auf Seiten / Beiträgen an

Um Ihre Formulare auf Seiten / Beiträgen anzuzeigen, gibt es 2 Möglichkeiten.

Die erste Möglichkeit besteht darin, auf Einbetten zu klicken, um Ihr Formular auf einer Seite anzuzeigen:

Betten Sie anschließend das Kontaktformular in eine neue Seite oder eine vorhandene Seite Ihrer Website ein.

Die zweite Möglichkeit besteht darin, den Shortcode des Kontaktformulars in Seiten / Beiträge einzufügen. Ich empfehle Ihnen, den zweiten Weg zu wählen, da er das Kontaktformular sowohl auf Beiträgen als auch auf Seiten anzeigen kann. Gehen Sie dazu im Admin-Dashboard zu WPForms > Alle Formulare , suchen Sie Ihr Kontaktformular und kopieren Sie seinen Shortcode.

Als nächstes fügen Sie diesen Shortcode in die gewünschten Beiträge / Seiten ein.

Und hier das Ergebnis:

Es sieht noch nicht aus wie das Kontaktformular-Beispiel, also muss ich es ein bisschen stylen.

Schritt 6: Gestalten Sie das Formular

Gehen Sie im Admin-Dashboard zu WPForms > Alle Formulare , suchen Sie Ihr Kontaktformular und klicken Sie dann auf Bearbeiten .

Klicken Sie nun auf jedes Feld, gehen Sie zu Erweiterte Optionen > CSS-Klassen und fügen Sie die folgenden Werte hinzu:

• Dein Name und registriere ip-100 bei : ip-100
• Ihre Telefonnummer , E-Mail , Studienort , Hauptfach : ip-50

Gehen Sie als Nächstes zu Customizer > Addition CSS , fügen Sie diesen Code hinzu:

 .wpforms-field-container {
    Anzeige: flexibel;
    Flex-Wrap: Wickel;
		rechtfertigen-Inhalt: Zwischenraum
}

.ip-50 {
    Breite: 48%!wichtig;
}

.ip-100{
		Breite: 100%!wichtig;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
	maximale Breite: 100 %;
}

.ip-100 ul {
	Anzeige: flexibel;
	rechtfertigen-Inhalt: Zwischenraum;
}

div.wpforms-container-full {
    Rand-unten: 24px;
    Hintergrund: #eeeeee;
    Polsterung: 20px;
}

Klicken Sie abschließend auf Veröffentlichen .

Und hier das Endergebnis:

Das Kontaktformular sieht jetzt besser aus, oder? Nun, wir haben gerade die letzten Schritte abgeschlossen, um ein vollständig ähnliches Formular wie mein Beispiel zu haben.

Letzte Worte

Meiner Erfahrung nach ist die Verwendung der Drag-and-Drop-Oberfläche wie in WPForms einfacher und schneller als die Verwendung von Kontaktformular 7. Außerdem verfügt es über die vorgefertigte Schaltfläche zum Senden und 2 weitere nützliche Abschnitte als Platzhaltertext und Beschreibung . Sehr praktisch ist auch die Live-Vorschau. Es hilft mir, Fehler beim Erstellen und Anpassen des Formulars leichter zu erkennen.

Um zu erfahren, wie Sie weitere Kontaktformular-Plugins verwenden, folgen Sie unserem kommenden Artikel dieser Serie! Wenn Sie Fragen zu WPForms haben oder ein Kontaktformular-Plugin vorschlagen, können Sie es gerne im Kommentarbereich hinterlassen.