So erstellen Sie ein benutzerdefiniertes Formular in einer WordPress-Website oder einem Blog

Wenn Sie gerade Ihren ersten Blog eingerichtet haben, wissen Sie inzwischen, dass er mit einem Standard-Kontaktformular geliefert wird – die meisten Premium-Themes werden mit einem geliefert. Der Punkt ist, dass Kontaktformulare unerlässlich sind, wenn Ihr Publikum aus dem einen oder anderen Grund Kontakt mit Ihnen aufnehmen möchte.

Darüber hinaus sollte Ihr Benutzerengagement mit Kontaktformularen in die Höhe schnellen, weshalb es wichtig ist, dass Sie eines in Ihrem Blog verwenden. Aber andererseits können Sie auch Formular-Plugins wie das Kontaktformular 7, schnelles sicheres Kontaktformular und andere verwenden, um Ihre Benutzer dazu zu bringen, Sie zu kontaktieren.

Darüber hinaus sollten diese Kontaktformulare es Ihnen ermöglichen, direkt mit Ihrem Publikum in Kontakt zu treten und Ihr Marketing zu optimieren.

Videoanleitung

Das Problem ist jedoch, dass die meisten Standard-Kontaktformulare und sogar die Plugins das gleiche stereotype Format haben, weshalb Sie sich vielleicht für etwas Spezialisierteres entscheiden möchten, ähnlich wie die Einrichtung Ihres eigenen Kontaktformulars in WordPress.

Wenn Sie sich mit PHP auskennen, sollten Sie dies problemlos tun können, weshalb es wichtig ist, dass Sie den Rest des Artikels lesen, damit Sie Ihr eigenes benutzerdefiniertes Formular für Ihre Benutzer einrichten können. mit dir zu verbinden.

1. Formulargestaltung:

Sie können dafür entweder eine separate Seitenvorlage erstellen oder HTML-Code in Ihre WordPress-Seite schreiben, und da letzteres unendlich einfacher ist, ist es sinnvoller, sich für dasselbe zu entscheiden.

Sie können ein benutzerdefiniertes Formular in WordPress erstellen, indem Sie die unten aufgeführten Schritte ausführen. Denken Sie wie immer daran, Ihre Informationen zu sichern, bevor Sie beginnen.

• Gehen Sie zu Seiten -> Neue Option hinzufügen, die unter Ihrem WordPress-Dashboard angegeben ist.
• Geben Sie den Titel der gewünschten Seite an, z. B. „Kundeninformationen“ oder „Kundendetails“.
• Navigieren Sie nun zum Tab „HTML“, um HTML-Code zu schreiben.
• Erstellen Sie ein benutzerdefiniertes Formular in WordPress, das Sie möchten.
• Fügen Sie eine „POST“-Methode hinzu, geben Sie ihr einen Namen „customer_details“
• Fügen Sie eine Funktion „form_validation“ in der onsubmit-Eigenschaft hinzu, um später einige JavaScript-Validierungen hinzuzufügen und die Aktion zu geben.
• Aktion ist die PHP-Datei, die ausgeführt wird, wenn das Formular gesendet wird.
• An dieser Stelle möchten Sie vielleicht einige Felder wie Name, E-Mail, Geschlecht, Alter usw. in das Formular einfügen und das Formular schließen.

Der endgültige Code sollte so aussehen

Ihr Name: <br />
Ihre E-Mail: <br />
Geschlecht: männlich weiblich<br />
Ihr Alter: <br />

2. Validierung:

Nachdem Sie das Formular entworfen haben, ist es an der Zeit, es zu validieren. Vertrauen Sie Benutzerdaten niemals so, wie sie sind, und validieren Sie sie immer, bevor Sie sie in Ihre Datenbank eingeben.

Folgen Sie einfach dem unten aufgeführten Code für eine schnelle Validierung, und das sollte den Zweck erfüllen. Notieren Sie sich diesen Validierungscode und schließen Sie ihn am Ende.

Funktion form_validation() {
/* Überprüfen Sie den Kundennamen auf eine leere Übermittlung*/
var Kundenname = document.forms["Kundendetails"]["Kundenname"].Wert;
if (Kundenname == „“ || Kundenname == null) {
alert(“Namensfeld muss ausgefüllt werden.”);
falsch zurückgeben;
}/* Überprüfen Sie die Kunden-E-Mail auf ungültiges Format */
var Kunden-E-Mail = document.forms["Kundendetails"]["Kunden-E-Mail"].Wert;
var at_position = customer_email.indexOf(“@”);
var Punktposition = Kunden-E-Mail.lastIndexOf(“.”);
if (at_position<1 || dot_position=customer_email.length) {
alert("Die angegebene E-Mail-Adresse ist ungültig.");
falsch zurückgeben;
}
}

Dadurch werden der Name und die E-Mail-Adresse des Kunden überprüft und validiert. Fügen Sie diesen Code nach hinzu. Der vollständige Code in WordPress sieht also so aus:

Ihr Name: <br />
Ihre E-Mail: <br />
Geschlecht: männlich weiblich<br />
Ihr Alter: <br />


Funktion form_validation() {
/* Überprüfen Sie den Kundennamen auf eine leere Übermittlung*/
var Kundenname = document.forms["Kundendetails"]["Kundenname"].Wert;
if (Kundenname == „“ || Kundenname == null) {
alert(“Namensfeld muss ausgefüllt werden.”);
falsch zurückgeben;
}
/* Überprüfen Sie die Kunden-E-Mail auf ungültiges Format */
var Kunden-E-Mail = document.forms["Kundendetails"]["Kunden-E-Mail"].Wert;
var at_position = customer_email.indexOf(“@”);
var Punktposition = Kunden-E-Mail.lastIndexOf(“.”);
if (at_position&lt;1 || dot_position=customer_email.length) {
alert("Die angegebene E-Mail-Adresse ist ungültig.");
falsch zurückgeben;
}
}

Jetzt müssen Sie nur noch die Seite veröffentlichen, und das sollte effektiv ausreichen.

3. Serverseitige Skripte:

Erinnern Sie sich an den Teil, in dem wir „Kundendetails.php“ erwähnt hatten? Nun, es ist an der Zeit, dass wir uns auch um diesen Teil kümmern.
Öffnen Sie Notepad oder Ihren bevorzugten Texteditor und schreiben Sie den unten erklärten Code auf und speichern Sie die Datei als customer-details.php auf Ihrem Desktop.

Deklarieren Sie zunächst einige Variablen namens $customer_name, $customer_email, $customer_sex, $customer_age und weisen Sie die Werte den entsprechenden Feldern zu, die vom HTML-Formular übermittelt werden.

Beispiel: $customer_name = $_POST[„customer_name“] fängt den Wert aus dem HTML-Formular mit der POST-Methode ab und weist ihn der Variablen $customer_name zu.

Jetzt müssen Sie dasselbe auch mit anderen Werten tun. Jetzt müssen Sie die PHP-Datei mit mysqli_connect mit der Datenbank verbinden. Wenn Sie sich nicht an die Datenbankkonfiguration erinnern, finden Sie diese Einstellungen in Ihrer WordPress-Installation.

Laden Sie die wp-config.php von Ihrer WordPress-Installation mit Ihrem bevorzugten FTP-Client wie FileZilla auf Ihren Desktop herunter. Öffnen Sie die wp-config.php mit Ihrem bevorzugten Texteditor wie Notepad und Sie finden die erforderlichen Datenbankeinstellungen.

Fügen Sie nach der Datenbankverbindung die aus dem Formular gesammelten Daten mit mysqli_query in die WordPress-Datenbank ein.

Es gibt einen optionalen Schritt in diesem PHP-Code.

Wenn Sie dem Benutzer nach dem Absenden des Formulars eine Nachricht anzeigen oder den Benutzer auf eine andere Seite umleiten möchten, können Sie dem Code eine Kopfzeile („Location: “) hinzufügen. Dafür müssen Sie später eine Erfolgsseite erstellen.

So sieht dann die komplette customer-details.php aus

// Daten empfangen
$Kundenname = $_POST[“Kundenname”];
$Kunden-E-Mail = $_POST[“Kunden-E-Mail”];
$Kunde_Geschlecht = $_POST["Kunde_Geschlecht"];
$customer_age = $_POST[“customer_age“];// Datenbankverbindung
$conn = mysqli_connect("Datenbank-Host", "Datenbank-Benutzername", "Datenbank-Passwort", "Datenbank-Name");
if(!$conn) {
die('Problem bei der Datenbankverbindung: ' . mysql_error());
}
// Einfügen von Daten in die Datenbank
$query = „INSERT INTO 'Database Name'.'Table Name' ( 'customer_name', 'customer_email', 'customer_sex', 'customer_age' ) VALUES ( $customer_name, $customer_email, $customer_sex, $customer_age )“;
mysqli_query($conn, $query);

// Umleitung zur Erfolgsseite
header("Speicherort: ");

Laden Sie diese Datei customer-details.php mit Ihrem bevorzugten FTP-Client in den Themenordner hoch.

4. Erfolg:

Die Erfolgsseite ist diejenige, die ein Benutzer nach dem Absenden des Formulars mit seinen Details anzeigen kann; Sie können diese Seite so einrichten, dass eine benutzerdefinierte Nachricht wie „Ihre Daten wurden erfolgreich übermittelt“ oder ähnliches angezeigt wird.

Der Punkt ist, dass Sie den unten geposteten Code verwenden können, um Ihre eigene Erfolgsseite mit benutzerdefinierter Nachricht einzurichten.

Erstellen Sie eine WordPress-Seite, geben Sie ihr einen Titel wie „Erfolgsseite“, stellen Sie sicher, dass der Seiten-Slug mit „Erfolgsseite“ oder was auch immer Sie in der Kopfzeile („Ort“) angegeben haben, übereinstimmt. Schreiben Sie jetzt eine Nachricht, wie „Danke für Ihre Zusammenarbeit“ oder etwas in der Art, und Sie sollten bereit sein.

Sie können Ihre Website jederzeit neu laden, um zu überprüfen, ob das Kontaktformular ordnungsgemäß funktioniert, und in fast allen Fällen sollte es problemlos funktionieren. Wenn Sie jedoch auf einige Probleme stoßen, können Sie dies jederzeit online überprüfen oder einen Experten mit der Einrichtung Ihres benutzerdefinierten Formulars beauftragen.

Es ist wichtig, dass Ihr Kontaktformular nicht zu aggressiv oder aufdringlich erscheint, damit es dazu beitragen kann, diese Konversionsraten zu steigern.

Darüber hinaus können Sie diese benutzerdefinierten Formulare auch verwenden, um Daten und Informationen über Ihre Kunden zu sammeln, die Sie weiter verwenden können, um Ihre Marketingkampagnen zu optimieren.

Dies ist einer der Hauptgründe, warum Formulare, insbesondere Kontaktformulare, für alle Blogs unerlässlich sind, und was noch wichtiger ist, Sie können die hier aufgeführte Codierung nicht nur verwenden, um ein benutzerdefiniertes Formular in WordPress zu erstellen, sondern in Wirklichkeit jede Art von Kontaktformular damit erstellen verschiedene Parameter.

Wie bereits erwähnt, ist es immer eine gute Idee, eine vollständige Sicherung durchzuführen, bevor Sie an Ihren Kerndateien herumbasteln.

Sobald Sie das Formular eingerichtet und ausgeführt haben, sollten Sie überprüfen können, ob das betreffende Formular die Daten so validiert, wie es dafür programmiert ist, bevor Sie sie in Ihre Datenbank eingeben.

Im Großen und Ganzen sind Kontaktformulare für Blogs und Websites gleichermaßen sehr wichtig, da sie Kunden helfen, Sie zu erreichen, und langfristig zu besseren Konversionsraten führen können. Stellen Sie also sicher, dass Sie die oben aufgeführten Schritte ausprobieren, und Ihr benutzerdefiniertes Kontaktformular sollte problemlos funktionieren.