Wie kann ich ein benutzerdefiniertes Formular in WordPress erstellen?

Lesezeit: 5 Minuten

Benutzer-Avatar
Joe.k

Ich habe eine WordPress-Seite und möchte ein Formular erstellen (Eingabe → Datenbank).

Ich habe zwei Tutorials gesehen:

Sie sind sich beide sehr ähnlich. Erstellung des Frontends mit HTML und JavaScript und anschließende Verarbeitung der Informationen in der Datenbank mit PHP.

Mein Problem ist, dass jedes Mal, wenn ich das Formular absende, eine 404-Seite angezeigt wird, auf der steht:

Hoppla! Diese Seite kann nicht gefunden werden.

Jetzt ist mein Problem (oder ich will wissen):

  1. Wo muss ich die einfügen process.php Datei? (Ich benutze FileZilla). Ich habe mehrere Orte in der versucht public_html/wp-content Mappe.

  2. Warum werden die Namens- und E-Mail-Felder nicht validiert? (keine Warnung bei leerem Namensfeld etc.)

Formularaufbau:

Ihren Namen: [TEXT]Deine E-Mail: [TEXT]Geschlecht: [*male *female]Ihr Alter:[TEXT], [Submit Button]

Formularseite:

<form name="myForm" method="POST" onsubmit="return form_validation()" action="../process.php">
    Your Name: <input id="customer_name" name="customer_name" type="text" />
    Your Email: <input id="customer_email" name="customer_email" type="text" />
    Sex: <input name="customer_sex" type="radio" value="male" />Male <input name="customer_sex" type="radio" value="female" />Female
    Your Age: <input id="customer_age" name="customer_age" type="text" />
    <input type="submit" value="Submit" />
</form>

<script type="text/javascript">
    function form_validation() {
        /* Check the Customer Name for blank submission */
        var customer_name = document.forms["myForm"]["customer_name"].value;
        if (customer_name == "" || customer_name == null) {
            alert("Name field must be filled.");
            return false;
        }

        /* Check the Customer Email for invalid format */
        var customer_email = document.forms["myForm"]["customer_email"].value;
        var at_position = customer_email.indexOf("@");
        var dot_position = customer_email.lastIndexOf(".");
        if (at_position < 1 || dot_position < at_position + 2 || dot_position + 2 >= customer_email.length) {
            alert("Given email address is not valid.");
            return false;
        }
    }
</script>

Datei process.php (nicht bearbeitet):

<?php
    $customer_name = $_POST["customer_name"];
    $customer_email = $_POST["customer_email"];
    $customer_sex = $_POST["customer_sex"];
    $customer_age = $_POST["customer_age"];

    $conn = mysqli_connect("Database Host", "Database Username", "Database  Password", "Database Name");
    if(!$conn) {
        die(‘Problem in database connection: ‘ . mysql_error());
    }

    $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);

    header("Location: my-site.com/success"); // Redirects to success page
?>

  • Wenn Sie einer WordPress-Site Ihre eigene Funktionalität hinzufügen, ist es am besten, ein Plugin zu erstellen.

    – Mikey

    9. Oktober 2016 um 14:01 Uhr

  • Entweder Sie rollen Ihr eigenes Plugin auf oder suchen nach kostenlosen Plugins, die genau das tun, was Sie wollen. Sicherlich gibt es viele von denen da draußen …. machen Sie einfach ein paar Suchen

    – Poiz

    9. Oktober 2016 um 15:56 Uhr


  • Sie können das pods.io-Framework verwenden, damit Sie alles erstellen können, was Sie erstellen möchten

    – Masivuye Cokile

    14. November 2016 um 14:19 Uhr


  • Diese Antwort veranschaulicht die Antwort auf diese Frage hervorragend, aber zu Ihrer Information an alle Entwickler, die ein benutzerdefiniertes WordPress-Formular erstellen, verwenden Sie keine direkten POST-Feldeinfügungen in Ihre MySQL-Abfragen. Niemals. Dies kann zu schweren führen SQL-Injection-Hacks. Verlassen Sie sich auch nicht darauf einzig und allein auf Client-Side-Validierung. Jeder kann a ausführen Denial-of-Service-Angriff direkt zum PHP-Server selbst. Die Moral der Geschichte ist Führen Sie immer eine serverseitige Validierung durch!

    – Michael Plautz

    15. April 2019 um 17:19 Uhr

  • @Michael Plautz: Welche Antwort? M. Abdulai ist hier? Oder eine andere Antwort? Oder ein Kommentar hier? Oder etwas anderes?

    – Peter Mortensen

    25. November 2019 um 14:03 Uhr


Benutzer-Avatar
M. Abdulai

Um Frage eins zu beantworten: WordPress bietet Aktions- und Filter-Hooks für Entwickler, um ihren benutzerdefinierten PHP-Code oder ihre Funktionen hinzuzufügen. Sie sollten sich das ansehen, denn die Verwendung von Plugins, die Snippets produzieren, wird in Ihrem Fall nicht helfen, weil es dazu führt, dass Ihr PHP-Code ausgeführt wird, ohne Ihr Formular zu laden, sodass Sie stattdessen Ihre Erfolgsseite sehen.

Um mehr über Aktions- und Filter-Hooks zu erfahren Besuche hier.

Alternativ zu uns Aktions-/Filter-Hooks können Sie Ihre PHP-Datei in den Themenordner hochladen. Allerdings gibt es einen Fehler. Ihre Datei kann verloren gehen, wenn WordPress aktualisiert wird.


Um Frage zwei zu beantworten: Es gibt einen einfacheren Weg, Ihr Formular zu validieren, wenn Sie JavaScript verwenden. Alles, was Sie tun müssen, ist das Wort „erforderlich“ innerhalb des Eingabe-Tags hinzuzufügen. Sie können auch den Eingabetyp „E-Mail“ zusammen mit dem erforderlichen Schlüsselwort verwenden, um Ihre E-Mail zu validieren. Siehe das Beispiel unten.

<form name="myForm" method="POST" action="../process.php">
    Your Name: <input id="customer_name" name="customer_name" type="text" required/>
    Your Email: <input id="customer_email" name="customer_email" type="email" required/>
    Sex: <input name="customer_sex" type="radio" value="male" />Male <input name="customer_sex" type="radio" value="female" />Female
    Your Age: <input id="customer_age" name="customer_age" type="text" />
    <input type="submit" value="Submit" />
</form>

Wenn Sie Ihre JavaScript-Funktion dennoch verwenden möchten, versuchen Sie es mit document.getElementById('customer_name') und document.getElementById('customer_email') Anstatt von document.forms. Stellen Sie außerdem sicher, dass Sie Ihr Skript-Tag am Ende schließen. Siehe unten für ein Beispiel.

<script type="text/javascript">
    function form_validation() {
        /* Check the Customer Name for blank submission */
        var customer_name = document.getElementById('customer_name').value;
        if (customer_name == "" || customer_name == null) {
            alert("Name field must be filled.");
            return false;
        }

        /* Check the Customer Email for invalid format */
        var customer_email = document.getElementById('customer_email').value;
        var at_position = customer_email.indexOf("@");
        var dot_position = customer_email.lastIndexOf(".");
        if (at_position < 1 ||
            dot_position < at_position + 2 ||
            dot_position + 2 >= customer_email.length) {

            alert("Given email address is not valid.");
            return false;
        }
    }
</script>

  • Der Link ist (effektiv) unterbrochen: “Plug-in-API/Aktionsreferenz. Diese Seite enthält derzeit keinen Text.”

    – Peter Mortensen

    25. November 2019 um 14:10 Uhr

1386220cookie-checkWie kann ich ein benutzerdefiniertes Formular in WordPress erstellen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy