My form on wordpress page doesn't execute - php

Question

I have a page made on wordpress with edited by me custom theme.
I've tried to make my own form using ajax without any plugin.
The problem is that I don't have any errors etc. and form still doesn't do anything (just reloads page). I did everything like on tutorial page and still don't know what to do. I figured out that php code doesn't execute. As you can see there are input conditions that doesn't execute :/
This is what i have done so far:
html:
<section id="contact_content">
<form name="contact_me" action="" method="post">
<?php if( get_field('contact_header') ): ?>
<div id="contact_header"><?php the_field('contact_header'); ?></div>
<?php endif; ?>
<input type="text" name="form_name" placeholder="<?php the_field('contact_name'); ?>" id="contact_name"> <br />
<input type="number" name="form_phone_number" placeholder="<?php the_field('contact_phone'); ?>" id="contact_phone"> <br />
<input type="email" name="form_email" placeholder="<?php the_field('contact_mail'); ?>" id="contact_mail"> <br />
<input type="text" name="form_comment" placeholder="<?php the_field('contact_message'); ?>" id="contact_message" style="height: 190px;"><br />
<input type="hidden" name="action" value="send_form" style="display: none; visibility: hidden; opacity: 0;">
<button type="submit" id="contact_button">wyślij</button>
</form>
</section>
function.php
function javascript_variables(){ ?>
<script type="text/javascript">
let ajax_url = '<?php echo admin_url( "admin-ajax.php" ); ?>';
let ajax_nonce = '<?php echo wp_create_nonce( "secure_nonce_name" ); ?>';
//form AJAX validation
$( 'form[name="contact_me"]' ).on( 'submit', function() {
let form_data = $( this ).serializeArray();
form_data.push( { "name" : "security", "value" : ajax_nonce } );
$.ajax({
url : ajax_url,
type : 'post',
data : form_data,
success : function( response ) {
console.log( response );
},
fail : function( err ) {
console.log( "Błąd: " + err );
}
});
return false;
});
</script><?php
}
add_action ( 'wp_head', 'javascript_variables' );
add_action('wp_ajax_send_form', 'send_form');
add_action('wp_ajax_nopriv_send_form', 'send_form');
function send_form(){
check_ajax_referer( 'secure-nonce-name', 'security' );
if ( empty( $_POST["form_name"] ) ) {
echo "Wprowadź imię i nazwisko.";
wp_die();
}
if ( ! filter_var( $_POST["form_email"], FILTER_VALIDATE_EMAIL ) ) {
echo "Wprowadź poprawny adres e-mail.";
wp_die();
}
if ( empty( $_POST["form_comment"] ) ) {
echo "Wprowadź wiadomość.";
wp_die();
}
if ( empty($_POST["form_phone_number"] ) ) {
echo 'Wprowadź numer telefonu';
wp_die();
}
$to = 'dawidt9882#gmail.com';
$subject = 'Now message from a client!';
$body = 'From: ' . $_POST['form_name'] . '\n';
$body .= 'Number: ' . $_POST['form_phone_number'] . '\n';
$body .= 'Email: ' . $_POST['form_email'] . '\n';
$body .= 'Message: ' . $_POST['form_comment'] . '\n';
$headers = array('Content-Type: text/html; charset=UTF-8');
wp_mail( $to, $subject, $body, $headers );
echo 'Wiadomość została wysłana! ;p';
wp_die();
}
Any ideas? :c

Answer 1

Try this:
$( 'form[name="contact_me"]' ).on( 'submit', function(ev) {
ev.preventDefault();
let form_data = $( this ).serializeArray();
form_data.push( { "name" : "security", "value" : ajax_nonce, "action" : "send_form" } );
$.ajax({
url : ajax_url,
type : 'post',
data : form_data,
success : function( response ) {
console.log( response );
},
fail : function( err ) {
console.log( "Błąd: " + err );
}
});
return false;
});

Answer 2

So now js looks like this:
let ajax_url = '<?php echo admin_url( "admin-ajax.php" ); ?>';
let ajax_nonce = '<?php echo wp_create_nonce( "secure_nonce_name" ); ?>';
//form AJAX validation
$( '#contact_button' ).on( 'click', function(ev) {
ev.preventDefault();
let form_data = $( this ).serializeArray();
form_data.push( { "name" : "security", "value" : ajax_nonce, "action" : "send_form" } );
$.ajax({
url : ajax_url,
type : 'post',
data : form_data,
success : function( response ) {
console.log( response );
},
fail : function( err ) {
console.log( "Błąd: " + err );
}
});
return false;
});
</script><?php
And it still does nothing. :/ If i made a mistake please dissuade me of any notion.