Why did all feedback forms stop working after stretching the site on wp?

Question

AJAX

I redesigned the site on wp and, to my wild regret, realized that all the forms stopped working.
There is a mail.php file (already added it as a wp page), it is sent by ajax file, the code below
, when trying to send, writes that the mail.php page was not found, if you register it in the browser line, an empty letter will be sent, which says that it is functioning, does not work just shipping!
How to properly set up ajax.ja in wp ? tell me, change url: "mail.php", I thought there was a gap in the path, but it also turned out to be wrong!

$(document).ready(function() {

  $("#form").submit(function() {
    $.ajax({
      type: "POST",
      url: "mail.php",
      data: $(this).serialize()
    }).done(function() {
      // $('.php-over').css({ display: "flex" });
      // $('#form').css({ display: "none" });
      // $('.pplus').css({ display: "none" });
      $('.modaloverlay').css({display: "block"});
      //  $("#form").trigger("reset");
    });
    return false;
  });

e

Answer 1

url: "mail.php",
And from what page is called (URL)? Most likely the issue is in the relative path.

Answer 2

Working with ajax in vp is a little different.
1. you need to specify url:
url: '/wp-admin/admin-ajax.php',
2. you need to specify action in data:

data:{
    action: 'my_function',
    form_data: $("#form").serialize()
 }

this is the name of the function that will be the handler.
3. In the functions.php file of the theme, you need to register the handler function (which was specified in js)

add_action('wp_ajax_my_function', 'my_function');
add_action('wp_ajax_nopriv_my_function', 'my_function');
function my_function() {
// здесь обработка данных отправка писем
}

For example, something similar did js look like this:

function sendDataEmail(email, problem, id_game){

        $.ajax({
            type:'POST',
            url:'/wp-admin/admin-ajax.php',
            data: {
                action: 'ajax_send_problem',
                email: email,
                problem: problem,
                id_game: id_game
            },
            success: function (response) {
                console.log(response);
            },
            error: function () {
                alert('AJAX ERROR');
            }
        });
    }

And php like this:

add_action('wp_ajax_send_problem', 'ajax_send_problem');
add_action('wp_ajax_nopriv_ajax_send_problem', 'ajax_send_problem');
function ajax_send_problem() {

    $result = null;

    if(isset($_POST['email']) and isset($_POST['problem']) and $_POST['id_game']){

        $email = trim(strip_tags($_POST['email']));
        $problem = trim(strip_tags($_POST['problem']));
        $id_game = trim(strip_tags($_POST['id_game']));

        $title_slot = get_the_title($id_game);
        $link_slot = get_the_permalink($id_game);

        /*------create email massage----*/
        $to = get_option('admin_email');
        $subject = "Problem game in slot: ".$title_slot;

        if($email){
            $email = '[email protected]';
        }

        $massage = "<p><b>Slot error:</b> $problem</p>";
        $massage .= "<p><b>Slot:</b> <a href='".$link_slot."'>$title_slot</a></p>";
        $massage .= "<p><b>Date:</b> ".date('d.m.Y')."</p>";

        $headers = "Content-Type: text/html; charset=utf-8; \n\r From: User SlotsSpot <".$email.">" . "\r\n";

        $result = wp_mail($to, $subject, $massage, $headers);

        if($result){
            echo 'send';
        }else{
            echo 'not send';
        }
        exit();

    }else{
        return $result =  'error';
    }
}

Further, by yourself, according to this example, you can redo your code.

Answer 3

Write the full path to mail.php