Wyświetlanie komunikatu o sukcesie po przesłaniu formularza w WordPressie

Jak wyświetlić komunikat o sukcesie po przesłaniu formularza w WordPressieWordPress - wyświetlanie komunikatu o sukcesie po przesłaniu formularzaWyświetl komunikat o sukcesie po przesłaniu formularza w WordPressieWyświetlanie komunikatu o sukcesie po przesłaniu formularza w WordPressieWyświetl niestandardowy komunikat o sukcesie w formularzach WordPressJak dodać komunikat o sukcesie po przesłaniu formularza w WordPressieKomunikat o sukcesie po przesłaniu formularza w WordPressie się nie wyświetlaKomunikat o sukcesie po przesłaniu formularza - wtyczka WordPressWordPress - wyświetl komunikat potwierdzający po przesłaniu formularzaJak wyświetlić komunikat o sukcesie w formularzu WordPress

Objaśnienie

Oto prosty sposób na wyświetlenie komunikatu o sukcesie po przesłaniu formularza na Twojej stronie WordPress.

Jak to działa:

Gdy ktoś przesyła formularz, kod sprawdza, czy formularz został rzeczywiście przesłany, szukając kliknięcia w konkretny przycisk.
Używa nonce (tokenu bezpieczeństwa), aby upewnić się, że przesłanie jest bezpieczne i autentyczne.
Po przetworzeniu formularza ustawiany jest transient (tymczasowy komunikat), aby wskazać na sukces.
Strona następnie przekierowuje, aby zapobiec ponownemu przesłaniu formularza, jeśli użytkownik odświeży stronę.

Wyświetlanie komunikatu:

W stopce Twojej strony kod sprawdza, czy komunikat o sukcesie jest ustawiony.
Jeśli tak, wyświetlany jest komunikat z podziękowaniem dla użytkownika.
Po wyświetleniu komunikatu transient jest usuwany, aby nie pojawiał się ponownie bez potrzeby.

Używanie formularza:

Formularz zawiera pole nonce dla bezpieczeństwa oraz proste pole tekstowe na imię użytkownika.
Jest krótki kod, którego możesz użyć, aby umieścić ten formularz w dowolnym miejscu na swojej stronie: [wp_dudecom_form].

Ta konfiguracja zapewnia, że użytkownicy widzą komunikat potwierdzający po przesłaniu formularza, co poprawia ich doświadczenia na Twojej stronie.

Kod
<?php
// Hook into the form submission process
add_action('init', 'wp_dudecom_handle_form_submission');

function wp_dudecom_handle_form_submission() {
    // Check if the form is submitted
    if (isset($_POST['wp_dudecom_form_submit'])) {
        
        // Verify the nonce for security
        if (!isset($_POST['wp_dudecom_form_nonce']) || !wp_verify_nonce($_POST['wp_dudecom_form_nonce'], 'wp_dudecom_form_action')) {
            return;
        }

        // Process form data here
        // Example: $name = sanitize_text_field($_POST['name']);

        // Set a transient to display the success message
        set_transient('wp_dudecom_form_success', true, 30);
        
        // Redirect to avoid resubmission
        wp_redirect(add_query_arg('form_submitted', 'true', wp_get_referer()));
        exit;
    }
}

// Display the success message
add_action('wp_footer', 'wp_dudecom_display_success_message');

function wp_dudecom_display_success_message() {
    if (get_transient('wp_dudecom_form_success')) {
        echo '<div class="wp-dudecom-success-message">Thank you! Your form has been successfully submitted.</div>';
        
        // Delete the transient after displaying the message
        delete_transient('wp_dudecom_form_success');
    }
}

// Example form with nonce field
function wp_dudecom_example_form() {
    ?>
    <form method="post" action="">
        <?php wp_nonce_field('wp_dudecom_form_action', 'wp_dudecom_form_nonce'); ?>
        <input type="text" name="name" required>
        <input type="submit" name="wp_dudecom_form_submit" value="Submit">
    </form>
    <?php
}

// Shortcode to display the form
add_shortcode('wp_dudecom_form', 'wp_dudecom_example_form');
?>

Instrukcja

Lokalizacja pliku: Dodaj poniższy kod do pliku functions.php swojego motywu lub do pliku własnej wtyczki.

Wymagania wstępne:

Upewnij się, że masz dostęp do edytowania plików motywu WordPress lub do tworzenia własnej wtyczki.
Podstawowa znajomość shortcode'ów WordPress i ich użycia.

Kroki implementacji:

Otwórz panel administracyjny WordPress i przejdź do Wygląd > Edytor motywu lub użyj klienta FTP, aby uzyskać dostęp do plików motywu.
Znajdź i otwórz plik functions.php aktywnego motywu.
Skopiuj i wklej podany kod do pliku functions.php. Upewnij się, że wklejasz go na końcu pliku, ale przed zamykającym tagiem PHP, jeśli taki istnieje.
Zapisz zmiany w pliku functions.php.
Aby wyświetlić formularz na stronie lub w poście, użyj shortcode'u [wp_dudecom_form] w edytorze WordPress, w miejscu, gdzie chcesz, aby formularz się pojawił.
Przetestuj wysyłanie formularza, wypełniając go i przesyłając. Powinieneś zobaczyć komunikat o sukcesie po przesłaniu.

Jeśli napotkasz jakiekolwiek problemy lub potrzebujesz dalszej pomocy w tej implementacji lub bardziej zaawansowanej funkcjonalności, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy.