使用AJAX提交from并邮寄提交

So I have a contact form on my website. I was able to get the submission sent with perl and it works. But I don't want the page to refresh, instead, I want it to display a success message. To make it clearer, the form would look like this after it's submitted:

What I want it to look like after the submit button is clicked

Of course, I don't want the page to refresh. I have tried several php tutorials and I read dozens of stackoverflow questions but I couldn't get it to work, maybe that's because am completely new to php and ajax. Help is greatly appreciated

That's the html of my form:

<form id="form" name='feedback' method='POST' action='/cgi-bin/TFmail.pl' accept-charset='UTF-8'>
    <input type='hidden' name='_config' value='feedback' />
     <div id="texts">
        <input type="text" id="name" name="name" required placeholder="Full Name"/><br>
        <input type="email" id="email" name="email" placeholder="E-mail" required/><br>
        <input type="tel" id="phone" name="phone" placeholder="Phone Number" required/><br>
        <textarea id="message" name="comments" placeholder="Type Message Here" required></textarea><br>
    </div>
        <div id="buttons">
        <input id="but" type="submit" value="Submit"/>
        <input id="clear" type="reset" value="Clear"/>
    </div>
</form>

this is a basic form submission using ajax:

$("#form").submit(function(e) {

    var url = "path-to-your-script.php"; // the script where you handle the form input.

    $.ajax({
       type: "POST",
       url: url,
       data: $("#idForm").serialize(), // serializes the form's elements.
       success: function(data)
       {
           alert(data); // show response from the php script.
       }
     });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});

taken from Submitting HTML form using Jquery AJAX