Memberbereich-Special – Trick #2: Formular zur Benutzerregistrierung für die Word­Press-Website erstellen

// Shortcode-Registrierung
function benutzerregistrierungsformular_shortcode() {
    ob_start();
    $zahl1 = rand(1, 10);
    $zahl2 = rand(1, 10);
    $captcha_summe = $zahl1 + $zahl2;
    ?>
    <form id="registrierungsformular" class="registrierungsformular">
        <label for="first_name">Vorname *</label>
        <input type="text" id="first_name" name="first_name" required><br />

        <label for="last_name">Nachname *</label>
        <input type="text" id="last_name" name="last_name" required><br />

        <label for="username">Benutzername *</label>
        <input type="text" id="username" name="username" required><br />

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

        <label for="password">Passwort *</label>
        <input type="password" id="password" name="password" required><br />

        <label for="password_confirm">Passwort bestätigen *</label>
        <input type="password" id="password_confirm" name="password_confirm" required><br />

        <label for="captcha">Captcha: Wieviel ergibt <?php echo $zahl1; ?> + <?php echo $zahl2; ?>?*</label>
        <input type="number" id="captcha" name="captcha" required><br />

        <input type="hidden" name="captcha_summe" value="<?php echo $captcha_summe; ?>">

        <button type="submit">registrieren</button>
    </form>
    <div id="registrierungsmeldung"></div>
    <script>
        document.getElementById('registrierungsformular').addEventListener('submit', async function(e) {
            e.preventDefault();
            const form = e.target;
            const formData = new FormData(form);

            const response = await fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
                method: 'POST',
                body: new URLSearchParams({
                    action: 'registrieren_benutzer',
                    ...Object.fromEntries(formData)
                })
            });

            const result = await response.json();
            const meldung = document.getElementById('registrierungsmeldung');

            if (result.success) {
                meldung.textContent = 'Registrierung erfolgreich!';
                meldung.style.color = 'green';
                form.reset();
            } else {
                meldung.textContent = result.data || 'Ein Fehler ist aufgetreten.';
                meldung.style.color = 'red';
            }
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('benutzerregistrierung', 'benutzerregistrierungsformular_shortcode');

// AJAX-Handler für die Registrierung
function registrieren_benutzer() {
    $username = sanitize_text_field($_POST['username']);
    $email = sanitize_email($_POST['email']);
    $first_name = sanitize_text_field($_POST['first_name']);
    $last_name = sanitize_text_field($_POST['last_name']);
    $password = $_POST['password'];
    $password_confirm = $_POST['password_confirm'];
    $captcha = intval($_POST['captcha']);
    $captcha_summe = intval($_POST['captcha_summe']);

    if ($captcha !== $captcha_summe) {
        wp_send_json_error('Das Captcha ist falsch. Bitte versuchen Sie es erneut.');
    }

    if ($password !== $password_confirm) {
        wp_send_json_error('Die Passwörter stimmen nicht überein. Bitte überprüfen Sie Ihre Eingabe.');
    }

    if (username_exists($username)) {
        wp_send_json_error('Benutzername ist bereits vergeben.');
    }

    if (email_exists($email)) {
        wp_send_json_error('E-Mail-Adresse ist bereits registriert.');
    }

    if (strlen($password) < 8 || !preg_match('/[A-Z]/', $password) || !preg_match('/[0-9]/', $password) || !preg_match('/[!@#$%^&*(),.?":{}|<>]/', $password)) {
        wp_send_json_error('Das Passwort muss mindestens 8 Zeichen lang sein, mindestens eine Zahl, einen Grossbuchstaben und ein Sonderzeichen enthalten.');
    }

    $user_id = wp_insert_user([
        'user_login' => $username,
        'user_email' => $email,
        'first_name' => $first_name,
        'last_name' => $last_name,
        'user_pass' => $password,
        'role' => 'subscriber'
    ]);

    if (is_wp_error($user_id)) {
        wp_send_json_error($user_id->get_error_message());
    }

    wp_send_json_success();
}
add_action('wp_ajax_nopriv_registrieren_benutzer', 'registrieren_benutzer');
add_action('wp_ajax_registrieren_benutzer', 'registrieren_benutzer');

.registrierungsformular {
    max-width: 400px;
    margin: 20px auto;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9; /* Optional: Heller Hintergrund für bessere Lesbarkeit */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Schatten für optische Tiefe */
}

.registrierungsformular label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 14px; /* Konsistente Schriftgröße */
}

.registrierungsformular input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px; /* Konsistente Schriftgröße */
    box-sizing: border-box; /* Verhindert Layout-Probleme */
}

.registrierungsformular button {
    background-color: #0073aa;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    width: 100%; /* Optional: Volle Breite für zentriertes Design */
    font-size: 16px; /* Größere Schrift für besseren Fokus */
    font-weight: bold;
    text-transform: uppercase; /* Optional: Alle Buchstaben groß für mehr Kontrast */
}

.registrierungsformular button:hover {
    background-color: #005177;
}

.registrierungsformular .captcha-label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 14px; /* Konsistente Schriftgröße */
}

.registrierungsformular .captcha-input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px; /* Konsistente Schriftgröße */
    box-sizing: border-box;
}