How to write a handler function for an AJAX Wordpress form?

Question

WordPress

When submitting, I get an empty form.

I can't write the handler function correctly.

I ask for help!

The form:

<form action="" method="POST" class="form form--contact js-contact-form-submit" autocomplete="off">
                                <div class="form__group">
                                    <label for="contact_name" class="form__label">Client/Agency</label>
                                    <input type="text" class="form__input" name="contact_name" placeholder="Client/Agency" required>
                                </div>
                                <div class="form__group">
                                    <label for="contact_website" class="form__label">Website</label>
                                    <input type="text" class="form__input" name="contact_website" placeholder="Website" required>
                                </div>
                                <div class="form__group">
                                    <label for="contact_email" class="form__label">Email</label>
                                    <input type="email" class="form__input" name="contact_email" placeholder="Email" required>
                                </div>
                                <div class="form__group form__group--actions">
                                    <button type="submit" class="form__button" name="contact_submit">Send.</button>
                                    <input type="hidden" id="_wpnonce" name="_wpnonce" value="b0d62ace00" /><input type="hidden" name="_wp_http_referer" value="/contact/" />                               </div>
                            </form>

Script:

$.ajax({
            type: "post",
            url: Oe,
            dataType: "json",
            data: {
                action: "handle_contact_form",
                data: t.serialize()
            },
            success: function(e) {
                200 == e.status && n.children().fadeOut(500, function() {
                    n.children().remove(),
                    n.append('<p class="response">Большое спасибо за ваш интерес!<br />Мы скоро с вами свяжемся.</p>')
                })
            }
        })
    }),

Handler:

add_action('wp_ajax_nopriv_handle_contact_form', 'my_action_callback');
add_action('wp_ajax_handle_contact_form', 'my_action_callback');
    
function my_action_callback() {
    $response = [
                        
  ];
  

  $to_mail = '[email protected]';
  $subject = 'Контакты'; 
   
  $name = $_POST['contact_name'];
  $phone = $_POST['contact_website'];
  $email = $_POST['contact_email'];
  
  $message = 'Имя: ' . $name . '<br> Сайт: ' . $phone . '<br> Почта: ' . $email ;
  
  $headers =  'MIME-Version: 1.0' . "\r\n";
  $headers .= 'From: Сообщение с сайта <[email protected]>' . "\r\n";
  $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
  wp_mail($to_mail, $subject, $message , $headers);
  

  exit(json_encode($response));
}

Answer 1

Since I did not understand the topic - the question was too broad.
In fact, here it was necessary to convert $_POST into a normal array - and give the appropriate response for success -
wp_parse_str($_POST['data'], $searcharray);

wp_send_json(array ('message'=> 'message sent','status'=> 200));

DECISION:

add_action('wp_ajax_nopriv_handle_contact_form', 'my_action_callback');
add_action('wp_ajax_handle_contact_form', 'my_action_callback');

function my_action_callback() {


wp_parse_str($_POST['data'], $searcharray);


  $to_mail = '[email protected]';
  $subject = 'Контакты'; 
   
  $name = $searcharray['contact_name'];
  $phone = $searcharray['contact_website'];
  $email = $searcharray['contact_email'];
  
  $message = 'Имя: ' . $name . '<br> Сайт: ' . $phone . '<br> Почта: ' . $email ;
  
  $headers =  'MIME-Version: 1.0' . "\r\n";
  $headers .= 'From: Сообщение с сайта <[email protected]>' . "\r\n";
  $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
  
  


try{
    
    if ( wp_mail($to_mail, $subject, $message , $headers)){

wp_send_json(array ('message'=> 'message sent','status'=> 200));
} else{
    wp_send_json_error('email error');
}

}catch (Expection $e)
{
    wp_send_json_error($e->getMessage());
    
}
 wp_die();
}

Answer 2

Are all fields arriving in the request?
Isn't it empty $message?
Why do exit(json_encode($response));you need just exit();or wp_die();?

Answer 3

Even I do not see that you have something tied to Ajax. I suspect that you do not have any Ajax.
$response is always an empty array, why is it needed at all?
Variables are not filtered at all... Bad.