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

Jak wyświetlić komunikat o sukcesie po przesłaniu formularza w WordPressie; WordPress - wyświetlanie komunikatu o sukcesie po przesłaniu formularza; Wyświetl komunikat o sukcesie po przesłaniu formularza w WordPressie; Wyświetlanie komunikatu o sukcesie po przesłaniu formularza w WordPressie; Wyświetl niestandardowy komunikat o sukcesie w formularzach WordPress; Jak dodać komunikat o sukcesie po przesłaniu formularza w WordPressie; Komunikat o sukcesie po przesłaniu formularza w WordPressie się nie wyświetla; Komunikat o sukcesie po przesłaniu formularza - wtyczka WordPress; WordPress - wyświetl komunikat potwierdzający po przesłaniu formularza; Jak 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:

  1. 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.
  2. Znajdź i otwórz plik functions.php aktywnego motywu.
  3. 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.
  4. Zapisz zmiany w pliku functions.php.
  5. 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ł.
  6. 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.