Contact form Javascript/Ajax/PHP isn't working

Question

I'm trying to create a contact form and I've spent a whole day trying to figure out why it isn't working. I have

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

at the top of my page.

This is the form:

<div id="CTwrapper">
  <form action="" method="">
    <legend>Send me a message</legend>
    <input type="text" placeholder=" &#xf007;  Name" id="Contactname" onfocus="this.placeholder = ''" onblur="this.placeholder = ' &#xf007;  Name'" name="name">
    <label class="error" for="name" id="name_error">This field is required.</label>
    <input type="email" id="email" placeholder=" &#xf0e0;  Email" onfocus="this.placeholder = ''" onblur="this.placeholder = ' &#xf0e0;  Email'" name="email">
    <label class="error" for="email" id="email_error">This field is required.</label>
    <textarea id="message" rows="6" cols="50" placeholder=" &#xf040;  Message" onfocus="this.placeholder = ''" onblur="this.placeholder = ' &#xf040;  Message'" name="message"></textarea>
    <label class="error" for="message" id="message_error">This field is required.</label><br />
    <button class="send" type="submit" value="Send">Send</button><button type="reset" value="Clear">Clear</button>
  </form>
</div>

and this is the Javascript/Ajax:

$(function() {
  $('.error').hide();
  $(".send").click(function() {

    $('.error').hide()
    var name = $("input#Contactname").val();
    if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }
    var email = $("input#email").val();
    if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
    var message = $("input#message").val();
    if (message == "") {
      $("label#message_error").show();
      $("input#message").focus();
      return false;
    }

    var dataString = 'name='+ Contactname + '&email=' + email + '&message=' + message;

    $.ajax({
      type: "POST",
      url: "mail.php",
      data: dataString,
      success: function() {
        $('#CTwrapper').html("<div id='message'></div>");
        $('#message').html("<h2><style="color:#FFF;">Contact Form Submitted!</style></h2>")
                           .append("<p>We will be in touch soon.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
    });
    return false;                                     
  });
});

and this is the PHP:

<?php 
$name = $_POST['Contactname']; 
$email = $_POST['email']; 
$message = $_POST['message']; 
$formcontent="From: $name \n Message: $message"; 
$recipient = "amyclark1@outlook.com"; 
$subject = "Contact form - www.amymorrisclark.com"; 
$mailheader = "From: $email \r\n"; 
mail($recipient, $subject, $formcontent, $mailheader) or die("Uh oh!");     
?>

which is in a separate file called mail.php

What I really want is for the form to disappear on submit and to be able to show a message in its place saying that the for was submitted without refreshing the page, and with the mail actually being received. I can't seem to get it to all work together. Really appreciate some help. Thanks!

Also, please let me know if there is a better/faster/easier way to do this.

Answer 1

I think the problem is because your button is type submit and with that the form will try to fire the action.

I would suggest that you try the .submit event of the form instead of the button class.

$( "#my_form" ).submit(function( event ) {

  event.preventDefault();

  // your script code here

});

or you can delete the button type="submit" and just keep your code like it is.