Enable AJAX Handling in WordPress Forms for Smooth Submissions

How to enable ajax in wordpress formWordpress ajax form submission tutorialEnable ajax for form submissions in wordpressWordpress ajax form handling guideAjax form submission wordpress pluginWordpress ajax form setupHow to use ajax in wordpress formsWordpress form ajax integrationAjax form submission wordpress exampleWordpress ajax form submission step by step

Explanation

To enable AJAX in your WordPress form, you'll need to do a few things to make it work smoothly without reloading the page.

Scripts and Security:

First, make sure jQuery and your custom JavaScript file are loaded. This is done using wp_enqueue_script.
You'll also pass some important data to your script, like the AJAX URL and a security nonce, using wp_localize_script.

Handling Form Submission:

When the form is submitted, the JavaScript captures the data and sends it to the server using AJAX.
On the server side, you check the security nonce to ensure the request is legitimate.
Sanitize the form data to keep things safe and clean.
Process the data, like sending an email, and then respond back to the JavaScript with success or error messages.

Displaying the Form:

Use a shortcode to easily add the form to any page or post.
The form includes fields for name, email, and message, and a submit button.

JavaScript Magic:

In your JavaScript file, listen for the form's submit event.
Prevent the default form submission to handle it via AJAX.
Send the form data to the server and update the page with the response, showing a success or error message without refreshing.

This setup allows your form to submit data asynchronously, providing a smoother user experience by avoiding page reloads.

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

Instructions

File Location: Add the PHP code to your theme's functions.php file or a custom plugin file. Place the JavaScript code in a file named wp-dudecom-ajax.js within a js directory in your theme.

Prerequisites:

Ensure you have access to your WordPress theme files or a custom plugin.
Basic understanding of WordPress shortcodes and JavaScript.

Implementation Steps:

Enqueue Scripts: Add the PHP code to enqueue jQuery and your custom JavaScript file. This ensures the necessary scripts are loaded on your site.
Localize Script: Use wp_localize_script to pass the AJAX URL and a security nonce to your JavaScript file.
Handle AJAX Submission: Implement the PHP function to handle form submissions. This includes checking the security nonce, sanitizing form data, and processing the data (e.g., sending an email).
Add Shortcode: Use the provided shortcode function to display the form on any page or post. Insert the shortcode [wp_dudecom_ajax_form] where you want the form to appear.
Create JavaScript File: Save the JavaScript code in a file named wp-dudecom-ajax.js in the js directory of your theme. This script handles the form submission via AJAX and updates the page with the server's response.
Test the Form: Visit the page where you've added the shortcode and test the form submission to ensure it works correctly without reloading the page.

For assistance with implementation or more advanced functionality, consider using the services of wp-dude.com.