I see exactly what's going on here—your Ajax request is pulling in HTML instead of clean JSON because WordPress keeps rendering the rest of the page after your PHP processing runs. Let's fix this step by step:

1. Stop WordPress from Outputting Extra HTML #

Your PHP code echoes the JSON response, but WordPress doesn't stop there—it will still load your theme's template and spit out all the page's HTML afterward. This mixes your JSON with page content, causing the parsererror.

Add wp_die(); right after echoing the JSON to terminate the script immediately (this is WordPress's safe way to end execution):

if ( isset( $_POST['first_name'] ) ) {
    $uploaded_status;
    $first_name = $_POST['first_name'];
    $last_name = $_POST['last_name'];
    $to = 'abc@example.com';
    $subject = 'New Contact Form Submission';
    $body = "First Name: $first_name\nLast Name: $last_name"; // Added form data to the email body

    if ( wp_mail( $to, $subject, $body, '') ) {
        $uploaded_status = 1;
    } else {
        $uploaded_status = 0;
    }

    // Return JSON for both success AND failure cases
    $response = array();
    if ( $uploaded_status == 1 ) {
        $response['status'] = 1;
        $response['message'] = 'Your form submitted successfully!';
    } else {
        $response['status'] = 0;
        $response['message'] = 'Failed to send email. Please try again later.';
    }

    header("Content-Type: application/json; charset=utf-8", true);
    echo json_encode($response);
    wp_die(); // Critical: Stops WordPress from outputting page HTML
}

Note: I added handling for the failure case so you get a valid JSON response no matter what happens.

2. Remove Accidental Whitespace in Your Plugin File #

Check your plugin code for any extra spaces, newlines, or blank lines before the opening <?php tag or after the closing ?> tag. These tiny bits of text get output as part of the response and will corrupt your JSON. For safety, just omit the closing ?> tag entirely—PHP doesn't require it.

3. Clean Up Your Ajax Callback #

Right now you're alerting the entire response object (which will show [object Object]). Update it to display the human-readable message and handle UI states properly:

$("#w_form").submit( function(event) {
    event.preventDefault();
    $.ajax({
        type: "post",
        data: new FormData(this),
        dataType: 'json',
        contentType: false,
        cache: false,
        processData: false,
        beforeSend: function() {
            $('#submit').attr("disabled", "disabled");
        },
        success: function( response ) {
            alert( response.message ); // Show the actual success/failure message
            if ( response.status == 1 ) {
                $('#w_form')[0].reset(); // Reset form only on success
            }
            $('#submit').removeAttr("disabled"); // Re-enable the submit button
        },
        error: function (xhr, error) {
            console.debug(xhr);
            console.debug(error);
            $('#submit').removeAttr("disabled"); // Don't leave the button disabled on error
        },
    });
});

4. Fix a Tiny Form HTML Typo #

I spotted a missing quote in your input fields that breaks Bootstrap styling:

<!-- Before (broken): -->
<input id="first_name" type="text" name="first_name" form-control" value="" required="">

<!-- After (fixed): -->
<input id="first_name" type="text" name="first_name" class="form-control" value="" required="">

Apply the same fix to the last_name input to make sure your form looks right.

These changes should eliminate the parsererror, give you pure JSON responses, and let you control the form's UI state exactly how you want after submission.

内容的提问来源于stack exchange，提问作者Hama Bohel