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

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>');
            }
        });
    });
});