Erstellen eines benutzerdefinierten Kontaktformulars in WordPress ohne Plugin

In diesem Beitrag zeige ich, wie man ein einfaches und sicheres Kontaktformular in WordPress ohne die Verwendung eines Plugins erstellt. Wir verwenden ein HTML-Formular, PHP für die Formularverarbeitung und einige grundlegende CSS-Stile für die Darstellung des Formulars.

1. HTML-Kontaktformular

Zuerst erstellen wir das HTML-Formular, das die Benutzereingaben sammelt und an die WordPress-Admin-Seite sendet. Hier ist der Code:

<form action="/wp-admin/admin-post.php" method="POST">
    <!-- Vorname und Nachname -->
    <fieldset>
        <legend>Kontaktformular</legend>

        <label for="first_name">Vorname*:</label>
        <input type="text" id="first_name" name="first_name" required>
        
        <label for="last_name">Nachname*:</label>
        <input type="text" id="last_name" name="last_name" required>
    </fieldset>

    <!-- E-Mail-Adresse -->
    <fieldset>
        <label for="email">E-Mail*:</label>
        <input type="email" id="email" name="email" required>
    </fieldset>

    <!-- Nachricht -->
    <fieldset>
        <label for="message">Nachricht*:</label>
        <textarea id="message" name="message" rows="4" required></textarea>
    </fieldset>

    <!-- Nonce-Feld (für die Sicherheit) -->
        [contact_form_nonce]

    <!-- Unsichtbares Eingabefeld zur Identifikation der Aktion -->
    <input type="hidden" name="action" value="send_contact_form">

    <!-- Absenden-Button -->
    <button type="submit">Senden</button>
</form>

2. PHP-Code zur Formularverarbeitung (functions.php)

Der nächste Schritt ist die Formularverarbeitung. Dies geschieht durch eine Funktion in der functions.php, die sicherstellt, dass das Formular sicher verarbeitet wird.

// Funktion zum Erstellen des Nonce-Felds für die Formularsicherheit
function add_contact_form_nonce() {
    // Erzeugt ein Nonce-Feld im Formular, um es vor CSRF-Angriffen zu schützen
    return wp_nonce_field( 'send_contact_form_action', 'contact_form_nonce', true, false );
}

// Shortcode erstellen, um das Nonce-Feld an einer bestimmten Stelle im Formular einzufügen
add_shortcode( 'contact_form_nonce', 'add_contact_form_nonce' );

// Hooks für die Formularverarbeitung
add_action( 'admin_post_nopriv_send_contact_form', 'process_contact_form' );
add_action( 'admin_post_send_contact_form', 'process_contact_form' );

// Funktion zur Formularverarbeitung
function process_contact_form() {
    // Überprüft die Sicherheit durch Validierung des Nonce
    if ( isset( $_POST['contact_form_nonce'] ) && wp_verify_nonce( $_POST['contact_form_nonce'], 'send_contact_form_action' ) ) {
        // Sanitize-Eingabedaten, um Sicherheitsrisiken zu minimieren
        $first_name = sanitize_text_field( $_POST['first_name'] );
        $last_name = sanitize_text_field( $_POST['last_name'] );
        $email = sanitize_email( $_POST['email'] );
        $message = sanitize_textarea_field( $_POST['message'] );

        // E-Mail an den Admin senden
        $to = 'example@gmail.com'; // Die E-Mail-Adresse des Admins
        $subject = 'Neue Kontaktanfrage von ' . $first_name . ' ' . $last_name;
        $body = "Vorname: $first_name\nNachname: $last_name\nE-Mail: $email\nNachricht:\n$message";
        $headers = array('Content-Type: text/plain; charset=UTF-8');
        wp_mail( $to, $subject, $body, $headers );

        // Bestätigungs-E-Mail an den Absender senden
        $confirmation_subject = 'Bestätigung: Ihre Nachricht wurde erfolgreich gesendet';
        $confirmation_body = "Hallo $first_name,\n\nVielen Dank für Ihre Nachricht. Wir werden uns bald bei Ihnen melden.\n\nIhre Nachricht war:\n$message";
        wp_mail( $email, $confirmation_subject, $confirmation_body, $headers );

        // Weiterleitung zur Danke-Seite
        wp_safe_redirect( home_url( '/index.php/danke/' ) );
        exit();
    } else {
        // Fehlerbehandlung bei ungültigem Nonce
        wp_safe_redirect( home_url( '/index.php/kontakt/?status=error' ) );
        exit();
    }
}

3. CSS zur Anpassung des Formular-Designs

Hier ist der benutzerdefinierte CSS-Code, um das Formular ansprechender zu gestalten:

/* Stil für das gesamte Formular */
form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

/* Stil für die Fieldsets */
fieldset {
    border: none;
    margin-bottom: 20px;
    padding: 0;
}

/* Stil für die Labels */
label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* Stil für die Eingabefelder */
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Stil für den Absenden-Button */
button {
    background-color: #0073aa;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

/* Stil für den Button im Hover-Zustand */
button:hover {
    background-color: #005177;
}

Fazit

Mit diesen Schritten hast du ein einfaches und sicheres Kontaktformular in WordPress erstellt, das E-Mails an den Administrator sendet und dem Absender eine Bestätigungs-E-Mail zuschickt. Dies alles wird ohne die Verwendung von Plugins erreicht, und das Design des Formulars kann über benutzerdefiniertes CSS angepasst werden.