Losing my mind with Ajax

Hi All

I have been trying for days to get Ajax to work in WordPress, i have tried different peoples methods and each one of them has done nothing.

This is what i have done so far:

I have a form and JQuery code, the JQuery fires as i have done an alert to check it works, however it then doesn’t seem to do anything with Ajax.

<form action="" method="post" name="contact-me">
    <div class="form-field">    
        <label>Name: </label>
        <input name="name" type="text" placeholder="Type your name" required="">
    </div>
    <div class="form-field">    
        <label>Email: </label>
        <input name="email" type="email" placeholder="Type a valid email" required="">
    </div>
    <div class="form-field">    
        <label>Name: </label>
        <textarea name="comment" placeholder="Type your comment" required=""></textarea>
    </div>
    <input type="hidden" name="action" value="send_form" style="display: none; visibility: hidden; opacity: 0;">
    <button type="submit">Send message!</button>
</form>

<script>
jQuery( 'form[name="contact-me"]' ).on( 'submit', function() {
    var form_data = jQuery( this ).serializeArray();

     
    // Here we add our nonce (The one we created on our functions.php. WordPress needs this code to verify if the request comes from a valid source.
    form_data.push( { "name" : "security", "value" : ajax_nonce } );
 
    // Here is the ajax petition.
    jQuery.ajax({
        url : ajax_url, // Here goes our WordPress AJAX endpoint.
        type : 'post',
        data : form_data,
        success : function( response ) {
            // You can craft something here to handle the message return
            alert( response );
        },
        fail : function( err ) {
            // You can craft something here to handle an error if something goes wrong when doing the AJAX request.
            alert( "There was an error: " + err );
        }
    });
     
    // This return prevents the submit event to refresh the page.
    return false;
});

</script>

I have tried putting the JavaScript code in an external JavaScript file and also hardcoded it in, the JS seems to work but not the Ajax.

Heres the function that should be called when the Ajax is loaded.

// Here we register our "send_form" function to handle our AJAX request, do you remember the "superhypermega" hidden field? Yes, this is what it refers, the "send_form" action.
add_action('wp_ajax_send_form', 'send_form'); // This is for authenticated users
add_action('wp_ajax_nopriv_send_form', 'send_form'); // This is for unauthenticated users.
 
/**
 * In this function we will handle the form inputs and send our email.
 *
 * @return void
 */
 
function send_form(){
 
    // This is a secure process to validate if this request comes from a valid source.
    check_ajax_referer( 'secure-nonce-name', 'security' );
 
    /**
     * First we make some validations, 
     * I think you are able to put better validations and sanitizations. =)
     */
     
    if ( empty( $_POST["name"] ) ) {
        echo "Insert your name please";
        wp_die();
    }
 
    if ( ! filter_var( $_POST["email"], FILTER_VALIDATE_EMAIL ) ) {
        echo 'Insert your email please';
        wp_die();
    }
 
    if ( empty( $_POST["comment"] ) ) {
        echo "Insert your comment please";
        wp_die();
    }
 
    // This is the email where you want to send the comments.
    $to = '[email protected]';
 
    // Your message subject.
    $subject = 'Now message from a client!';
    
    $body  = 'From: ' . $_POST['name'] . '\n';
    $body .= 'Email: ' . $_POST['name'] . '\n';
    $body .= 'Message: ' . $_POST['comment'] . '\n';
 
    // This are the message headers.
    // You can learn more about them here: https://developer.www.ads-software.com/reference/functions/wp_mail/
    $headers = array('Content-Type: text/html; charset=UTF-8');
     
    wp_mail( $to, $subject, $body, $headers );
 
    echo 'Done!';
    wp_die();
}

if i take off the return false and submit it says that page cannot be found, i am thinking this is because it has not set the action link.

I am losing my mind as i have tried so many different methods, some of them when i have submitted the button it has given me the correct information but as soon as i disable the button i get nothing.

Please can you help, they sometimes say a fresh pair of eyes can help.

thanks

The page I need help with: [log in to see the link]