Wenn wir eine unabhängige Website erstellen, fügen wir auf unserer Website, wie z. B. „Kontakt“ oder einigen Top-Sites, häufig einige Kontaktformulare mit einem ähnlichen Effekt hinzu. Nun, wir haben bereits ein anderes Formular-Plugin mit Ihnen geteilt, nämlich Kontaktformular 7 ist das Formular-Plugin, das wir jetzt sehen, aber es gibt ein Problem mit diesem Formular-Plugin. Nachdem wir es geöffnet haben, werden wir feststellen, dass es beim Einrichten des Formulars Shortcodes verwendet. Wenn wir beispielsweise ein Textformular einfügen möchten, fügen wir direkt einen solchen Text-Shortcode ein, aber der vom Shortcode angezeigte Effekt ist nicht besonders gut. Beispielsweise muss unser Name oft nicht lang sein. Wir hoffen, dass der Name und die E-Mail-Adresse zusammen platziert werden. Nun, wenn Sie das Frontend nicht kennen, können Sie es nicht ändern.

Kontaktformular 7 - Formularbearbeitungsoberfläche

Einführung in das wpforms-Plugin:

Tatsächlich verwenden wir beim Erstellen einer unabhängigen Website auch ein anderes sehr bekanntes Formular-Plugin namens WPforms. Dieses Plugin ist visuell und wir können das Formularmodul direkt hineinziehen und ablegen. Jetzt führen wir es Ihnen vor. Wenn Sie WPforms installiert haben, dann dieses Kontaktformular 7. Löschen Sie es einfach; beide haben dieselbe Funktion.

Einführung in das wpforms-Plugin

Installieren Sie das WPForms-Formular-Plugin:

Nun installieren wir das Plug-In auf die gleiche Weise, klicken auf „Hochladen“ und wählen das Plug-In aus, das wir auf dem Desktop vorbereitet haben. Die neueste Version ist 1.84. Wenn es später ein Versionsupdate gibt, können Sie es direkt aus dem Artikel zum Erstellen einer Website herunterladen. Das ist alles.

Natürlich wird auch ein chinesisches Paket bereitgestellt. Wir brauchen es jetzt nicht, da wir bei Verwendung einer unabhängigen Website normalerweise Englisch verwenden und auf die Installation klicken, um sie zu öffnen. Nachdem die Installation abgeschlossen ist, können wir dieses Plug-In aktivieren. Nach erfolgreicher Aktivierung wird eine solche Schnittstelle aufgerufen. Es fügt unserer linken Seite eine Funktion hinzu.

Installieren Sie das WPForms-Formular-Plugin

Das wpforms-Plugin legt die Einstellungsschnittstelle fest;

Zuerst gehen wir in die Einstellungen und klicken auf Einstellungen. Dann hat dieses Formular-Plugin einige einfache Einstellungen. Zuerst sehen wir das aktuelle Plugin. Es ist aktiviert und hat dann einige Standardeinstellungen. Wir müssen die Einstellungen nicht ändern.

wpforms-Plugin-Einstellungen

Das andere ist unsere gesendete E-Mail. Wir können also auch das Format dieser E-Mail ändern, sodass sie unter normalen Umständen standardmäßig angezeigt wird. Es gibt auch einen Prozess zur Nachahmung von Müll. Wenn beispielsweise einige Leute unsere Formulare zufällig ausfüllen, können wir zu diesem Zeitpunkt erkennen, ob es sich um Roboter handelt. Dies ist hauptsächlich eine Funktion.

Validierung des WPForms-Plugins

Es gibt auch einige andere Einstellungen. Wir können uns diese kurz ansehen. Dies ist für die E-Mail, die nach dem Senden eine Beschreibung enthält, z. B. welche Elemente erforderlich sind. Wenn Sie dann beispielsweise kein Element ausfüllen, wird die E-Mail auf die erforderlichen Felder eingestellt. Wenn Sie die E-Mail nicht ausfüllen, wird Ihnen mitgeteilt, dass die E-Mail erforderlich ist. Es gibt auch einige andere Anweisungen. Wenn Sie beispielsweise erfolgreich gesendet haben und das Senden fehlgeschlagen ist, gibt es einige Erklärungen. Natürlich gibt es die. Wenn der Text normal ist, können wir ihn standardmäßig verwenden.

wpforms Formularinformationsbenachrichtigung

Wir werden dieses Formular grundsätzlich nicht zum Bezahlen verwenden. Einige andere Einstellungen können standardmäßig verwendet werden und müssen nicht festgelegt werden.

Erstellen Sie Formulare mit wpforms;

Die Formularfunktion, die wir hier hauptsächlich verwenden, ist, alle Formulare zu öffnen, zuerst ein Formular zu erstellen, auf „Neu hinzufügen“ zu klicken und dann die Formulareinstellungsoberfläche aufzurufen. Diese Oberfläche ist sehr einfach. Zuerst legen wir beispielsweise Folgendes fest: Sie können beispielsweise ganz einfach einen Formularnamen festlegen, dieser Name wird jedoch nicht an der Rezeption angezeigt. Es ist ganz normal, dass dieser Name aufgerufen werden muss, wenn Sie ihn an der Rezeption anzeigen. Wir können Englisch oder Pinyin verwenden.

wpforms Formularerstellung

Es gibt zwei Möglichkeiten. Die erste Möglichkeit besteht darin, ein leeres Formular zu erstellen. Die zweite Möglichkeit besteht darin, die Vorlage zu verwenden. Derzeit sehen wir, dass hier eine einfache Vorlage vorhanden ist. Wir können sie direkt in der Vorschau anzeigen. Sie dient zum Anzeigen dieses Formats. Wenn wir diese beiden Inhalte sehen, werden sie in einer Zeile angezeigt. Dies ist die Standardeinstellung. Es ist nicht anders, als es selbst zu erstellen, also gehen wir direkt zum Erstellen eines neuen Formulars.

Der größte Unterschied zwischen diesem Formular und Contact Form 7 ist die Visualisierung. Sie können beispielsweise alle Module auf der linken Seite per Drag & Drop verschieben. Hier demonstrieren wir Ihnen dies. In meinem Formular müssen beispielsweise die Kundeninformationen eingegeben werden. Ich wähle beispielsweise einfach „Name“ aus und ziehe es dann hierher. Es wird als Eingabefeld für den Namen angezeigt.

WPForms-Formularelementergänzungen

Nachdem wir das Eingabefeld hineingezogen haben, können wir auch andere Dinge hineinziehen. Wir können zum Beispiel eine weitere E-Mail-Adresse, EMAIL oder eine Telefonnummer hinzufügen. Natürlich können wir auch Text hinzufügen, um diese zu erklären. Sie können einfach alles hinzufügen.

Nachdem wir es hinzugefügt haben, sehen wir uns eine Vorschau an. Wir müssen es speichern und dann aktualisieren wir es.

WPForms-Formular-Frontend-Demo

Layouteinstellungen des WPForms-Formularmoduls;

Nun, dieses Formular zeigt dieses Format an. Sie können den Inhalt hierher ziehen und ablegen, was praktischer ist als bei Kontaktformular 7. Dann können wir jede Option ändern und festlegen. Wenn wir beispielsweise auf Bearbeiten klicken, gelangen wir in die Bearbeitungsoberfläche. In der Bearbeitungsoberfläche gibt es mehrere Optionen. Die erste ist die Kopfzeile. Sie können sie auswählen. Geben Sie hier den Namen und den Benutzernamen ein. Beispielsweise steht unser Benutzername hier und sein Anzeigeformat ist unten. , da ausländische Namen im Allgemeinen aus zwei Teilen bestehen. Sie können ihn natürlich auch nach Bedarf auf einen Teil festlegen. Hier legen wir ihn einfach fest. Unten steht auch eine Beschreibung. Sie können ihm beispielsweise sagen, was er hier eingeben soll. Unten wird erklärt.

WpForms Formularmodul-Layouteinstellungen

Das letzte ist ein Pflichtfeld. Ist dieses Feld Pflichtfeld? Wenn Sie ein Pflichtfeld auswählen und es leer ist, wird es nicht übermittelt. Es gibt auch einige erweiterte Optionen. Die erweiterten Optionen dienen zum Festlegen der Größe und einiger Inhalte, einschließlich des Hinzufügens einiger CSS-Stile. Unten gibt es eine weitere Logik. Was bedeutet diese Logik? Wenn wir es öffnen, soll dieses Formularmodul angezeigt werden? Wenn wir es beispielsweise normal anzeigen, geben wir ihm eine Anzeigebedingung. Beispielsweise wird es erst mit dem Formularmodul verknüpft, wenn Sie die Nummer eingegeben haben. Erst wenn Sie es ausgefüllt haben und es leer ist, wird es angezeigt.

Wenn wir es also speichern, ist das Endergebnis, dass wir den Benutzernamen nicht sehen können, da er erst nach dem Eingeben der Zahlen angezeigt wird. Wir können es speichern und aktualisieren und werden sehen, dass es nicht da ist. Wo wir den Namen eingeben, wird er angezeigt, wenn wir hier nur einige Zahlen eingeben, also ist es eine logische Option.

Dies hängt natürlich von Ihren eigenen Anforderungen ab. Wenn Sie es nicht benötigen, schalten Sie es einfach aus. Die anderen Optionen sind dann ähnlich. In der zweiten Option ist es beispielsweise dasselbe, wenn wir EMAIL eingeben. Wir können hier einen Header festlegen und dann beschreiben, ob es sich um ein erforderliches Element handelt und ob diese E-Mail bestätigt werden muss. Das heißt, es gibt eine E-Mail-Adresse ein und dann wird hier ein Bestätigungsfeld angezeigt. Es muss ein Bestätigungscode gesendet und dann der richtige eingegeben werden, bevor das Formular übermittelt werden kann. Normalerweise werden wir es unter normalen Umständen nicht so einrichten. Sofern es sich nicht um speziellen Inhalt handelt, benötigen wir ihn im Voraus. Sein Stil hat auch eine Logik und die Einstellungslogik aller Module ist genau gleich.

WPForms-Formularelementeinstellungen

Wir sehen, dass der Name unten auch derselbe ist. Ist es ein Pflichtfeld? Wenn es ein Pflichtfeld ist, fügen Sie ein Eingabeaufforderungssymbol hinzu und fügen Sie dann den erweiterten Optionen Logik hinzu. Andere Module sind ähnlich. Fügen Sie sie einfach entsprechend Ihren eigenen Anforderungen hinzu.

Manchmal benötigen wir diese Einstellungen in einer bestimmten Situation. Beispielsweise müssen wir die E-Mail-Adresse und den Benutzernamen in einer Zeile statt in zwei Zeilen platzieren, da der Name kurz ist. Diesmal können wir das verwenden. Im Layoutmodul sehen wir ein Layout. Wir ziehen dieses Layout zuerst herüber. Nachdem wir es herübergezogen haben, wird es zunächst in zwei Spalten unterteilt. Wir können unseren Namen links und die E-Mail rechts platzieren. Dann können wir auch die Breite dieses Bereichs bearbeiten. Beispielsweise können wir die linke Seite breiter und die rechte Seite schmaler oder die linke Seite schmaler und die rechte Seite breiter machen. Stellen Sie es einfach so ein. Nachdem Sie es eingestellt haben, speichern Sie es und aktualisieren Sie es dann. Es wird als Zeile angezeigt, aber darunter befindet sich die Mobiltelefonnummer. Sie können also natürlich die Breite anpassen. Stellen Sie es einfach in seinem Stil ein.

Lassen Sie uns beispielsweise dieses bearbeiten und es dann als Zeile anzeigen. In diesem Fall benötigen wir keine Front-End-Kenntnisse und können ein sehr schönes Formular entwerfen.

Es gibt auch eine Einstellung, und die Einstellung sind ihre Regeln. Zunächst einmal sind der Name Ihres Formulars und die Beschreibung des Formulars nur hier, wenn Sie sie sehen können. Darunter befindet sich eine Senden-Schaltfläche. Wir sehen jetzt, dass die Senden-Schaltfläche „Senden“ heißt, sodass Sie sie auf anderen Inhalt einstellen können. Okay, nach dem Senden wird es einen Wartevorgang geben. Darunter gibt es einige erweiterte Optionen, z. B. das Hinzufügen einiger CSS-Stile. Dann gibt es unten noch eine: Ajax-Senden bedeutet, dass die Seite nicht aktualisiert wird, wenn wir dieses Formular senden. Alles Ajax bedeutet dies. Senden Sie auf dieser Seite, ohne die Linkadresse zu ändern.

Unten finden Sie noch eine weitere Einstellung, die Teil der Einstellungen ist, über die wir zuvor gesprochen haben. Wir fügen eine Anti-Bot-Funktion hinzu. Normalerweise würden wir Cloudflare verwenden, das kostenlos ist. Nachdem wir es eingerichtet haben, müssen wir natürlich einige der Anforderungen hier erfüllen. Dann beantragen wir ein Konto. Nachdem die Beantragung abgeschlossen ist, geben Sie die Kontonummer ein und das Ergebnis wird wie folgt aussehen.

34

Wenn die Leute es ausfüllen, wird automatisch festgestellt, ob es sich um einen Roboter handelt. Wenn es ein Roboter ist, ist die Übermittlung nicht erfolgreich. Gut. Es gibt auch einige Erinnerungen in unseren Einstellungen. Nach erfolgreicher Übermittlung werden einige Anweisungen angezeigt, darunter Anweisungen zum Senden von E-Mails und welche Sie zum Senden von E-Mails verwenden. Natürlich ist dieses Formular nur ein Stil. Zum Senden müssen wir diese Funktion normalisieren. Wir müssen auch SMTP verwenden, da wir Ihnen zuvor gesagt haben, dass das E-Mail-Übermittlungssystem von WordPress PHP häufig fehlschlägt oder in den Papierkorb wandert. Normalerweise müssen wir also unsere eigene E-Mail-Adresse zum Senden eingeben. Wir müssen es überprüfen, z. B. ein Plug-In für die SMTP-Konfiguration.

Der letzte ist der Absenden-Button. Nachdem die Übermittlung abgeschlossen ist, können wir es ihm erklären. Vielen Dank für Ihre Übermittlung und Ihre Kontaktaufnahme. Wir werden uns so schnell wie möglich bei Ihnen melden. Dies ist eine solche Erklärung.

35

So fügen Sie das von WP Forms erstellte Formular in die eigenständige Seite ein.

Der andere Inhalt sind einige erweiterte Funktionen, die außerhalb des Formulars normal sind und die wir nicht benötigen. Nachdem wir dieses Formular eingerichtet haben, sehen wir, dass es nach dem Einrichten einen Kurzcode hat. Dann können wir auf den Kurzcode klicken. Dieser Kurzcode hilft uns automatisch beim Erstellen einer Seite und fügt sie dann hier in die Seite ein. Dies ist eine Möglichkeit.

Natürlich gibt es auch eine Möglichkeit, es auszuschalten. Nachdem wir es ausgeschaltet haben, sehen wir, dass es hier einen Kurzcode gibt. Dann können wir diesen Kurzcode einfügen, wo immer wir wollen. Zum Beispiel kopieren wir jetzt den Kurzcode und erstellen dann eine neue Seite. Wir können einen beliebigen Namen für diese Seite eingeben und unten einen Kurzcode hinzufügen. Wir können den Kurzcode in Gutenberg verwenden, natürlich können wir auch andere verwenden. Dann fügen wir diesen Kurzcode hier ein, nachdem wir ihn eingefügt und erfolgreich veröffentlicht haben. Dann öffnen wir die neu erstellte Seite und dieses Formular wird angezeigt.

36

Natürlich kannst du, nachdem dieses Formular angezeigt wird, auch zu den gerade vorgenommenen Einstellungen zurückkehren und diese ändern. Auch das ist möglich. Hier geht es um die Verwendung von wpforms, einem sehr bekannten Formular-Plugin.