Włącz obsługę AJAX w formularzach WordPress dla płynnych przesyłek

Jak włączyć AJAX w formularzu WordPressSamouczek dotyczący przesyłania formularzy AJAX w WordPressWłącz AJAX dla przesyłania formularzy w WordPressPrzewodnik po obsłudze formularzy AJAX w WordPressWtyczka do przesyłania formularzy AJAX w WordPressKonfiguracja formularzy AJAX w WordPressJak używać AJAX w formularzach WordPressIntegracja formularzy AJAX w WordPressPrzykład przesyłania formularzy AJAX w WordPressKrok po kroku przesyłanie formularzy AJAX w WordPress

Objaśnienie

Aby włączyć AJAX w formularzu WordPress, musisz wykonać kilka kroków, aby działał płynnie bez przeładowania strony.

Skrypty i bezpieczeństwo:

Najpierw upewnij się, że jQuery i twój niestandardowy plik JavaScript są załadowane. Można to zrobić za pomocą wp_enqueue_script.
Musisz również przekazać kilka ważnych danych do swojego skryptu, takich jak adres URL AJAX i nonce zabezpieczający, używając wp_localize_script.

Obsługa przesyłania formularza:

Gdy formularz zostanie przesłany, JavaScript przechwytuje dane i wysyła je do serwera za pomocą AJAX.
Po stronie serwera sprawdzasz nonce zabezpieczający, aby upewnić się, że żądanie jest legalne.
Sanityzuj dane formularza, aby zachować bezpieczeństwo i czystość.
Przetwórz dane, na przykład wysyłając e-mail, a następnie odpowiedz do JavaScript z komunikatami o sukcesie lub błędzie.

Wyświetlanie formularza:

Użyj shortcode, aby łatwo dodać formularz do dowolnej strony lub wpisu.
Formularz zawiera pola na imię, e-mail i wiadomość oraz przycisk wysyłania.

Magia JavaScript:

W swoim pliku JavaScript nasłuchuj zdarzenia przesyłania formularza.
Zapobiegaj domyślnemu przesyłaniu formularza, aby obsłużyć je za pomocą AJAX.
Wyślij dane formularza do serwera i zaktualizuj stronę odpowiedzią, wyświetlając komunikat o sukcesie lub błędzie bez odświeżania.

Ta konfiguracja pozwala na asynchroniczne przesyłanie danych z formularza, co zapewnia płynniejsze doświadczenie użytkownika, unikając przeładowania strony.

Kod
<?php
// Enqueue necessary scripts for AJAX
function wp_dudecom_enqueue_ajax_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('wp-dudecom-ajax-script', get_template_directory_uri() . '/js/wp-dudecom-ajax.js', array('jquery'), null, true);

    // Localize script to pass AJAX URL and nonce
    wp_localize_script('wp-dudecom-ajax-script', 'wp_dudecom_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wp_dudecom_ajax_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_ajax_scripts');

// Handle AJAX form submission
function wp_dudecom_handle_ajax_form_submission() {
    // Check nonce for security
    check_ajax_referer('wp_dudecom_ajax_nonce', 'security');

    // Sanitize and validate form data
    $name = sanitize_text_field($_POST['name']);
    $email = sanitize_email($_POST['email']);
    $message = sanitize_textarea_field($_POST['message']);

    // Process form data (e.g., send email)
    $to = get_option('admin_email');
    $subject = 'New Form Submission';
    $body = "Name: $name\nEmail: $email\nMessage: $message";
    $headers = array('Content-Type: text/plain; charset=UTF-8');

    if (wp_mail($to, $subject, $body, $headers)) {
        wp_send_json_success('Form submitted successfully.');
    } else {
        wp_send_json_error('Failed to send email.');
    }

    wp_die();
}
add_action('wp_ajax_wp_dudecom_form_submit', 'wp_dudecom_handle_ajax_form_submission');
add_action('wp_ajax_nopriv_wp_dudecom_form_submit', 'wp_dudecom_handle_ajax_form_submission');

// Shortcode to display the form
function wp_dudecom_ajax_form_shortcode() {
    ob_start();
    ?>
    <form id="wp-dudecom-ajax-form" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        
        <label for="message">Message:</label>
        <textarea id="message" name="message" required></textarea>
        
        <input type="submit" value="Submit">
    </form>
    <div id="wp-dudecom-form-response"></div>
    <?php
    return ob_get_clean();
}
add_shortcode('wp_dudecom_ajax_form', 'wp_dudecom_ajax_form_shortcode');
?>

// JavaScript file (wp-dudecom-ajax.js)
jQuery(document).ready(function($) {
    $('#wp-dudecom-ajax-form').on('submit', function(e) {
        e.preventDefault();

        var formData = {
            action: 'wp_dudecom_form_submit',
            security: wp_dudecom_ajax_object.nonce,
            name: $('#name').val(),
            email: $('#email').val(),
            message: $('#message').val()
        };

        $.post(wp_dudecom_ajax_object.ajax_url, formData, function(response) {
            if (response.success) {
                $('#wp-dudecom-form-response').html('<p>' + response.data + '</p>');
            } else {
                $('#wp-dudecom-form-response').html('<p>' + response.data + '</p>');
            }
        });
    });
});

Instrukcja

Lokalizacja pliku: Dodaj kod PHP do pliku functions.php swojego motywu lub do pliku własnej wtyczki. Umieść kod JavaScript w pliku o nazwie wp-dudecom-ajax.js w katalogu js w swoim motywie.

Wymagania wstępne:

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

Kroki wdrożenia:

Załaduj skrypty: Dodaj kod PHP, aby załadować jQuery i swój własny plik JavaScript. To zapewnia, że niezbędne skrypty są ładowane na Twojej stronie.
Zlokalizuj skrypt: Użyj wp_localize_script, aby przekazać adres URL AJAX i token zabezpieczeń do swojego pliku JavaScript.
Obsłuż przesyłanie AJAX: Zaimplementuj funkcję PHP do obsługi przesyłania formularzy. Obejmuje to sprawdzenie tokena zabezpieczeń, oczyszczenie danych formularza oraz przetworzenie danych (np. wysłanie e-maila).
Dodaj shortcode: Użyj dostarczonej funkcji shortcode, aby wyświetlić formularz na dowolnej stronie lub wpisie. Wstaw shortcode [wp_dudecom_ajax_form] w miejscu, w którym chcesz, aby formularz się pojawił.
Utwórz plik JavaScript: Zapisz kod JavaScript w pliku o nazwie wp-dudecom-ajax.js w katalogu js swojego motywu. Ten skrypt obsługuje przesyłanie formularza za pomocą AJAX i aktualizuje stronę odpowiedzią z serwera.
Przetestuj formularz: Odwiedź stronę, na której dodałeś shortcode, i przetestuj przesyłanie formularza, aby upewnić się, że działa poprawnie bez przeładowania strony.

W przypadku potrzeby pomocy przy wdrożeniu lub bardziej zaawansowanej funkcjonalności, rozważ skorzystanie z usług wp-dude.com.