I have this email code from a website template that I want to use for my site. The problem is that when I click on the "Send message" button, the form simply refreshes and nothing is sent. If there is any text data in the fields, it simply disappears.
I have looked at foums for a solution but to no avail. What am I doing wrong?

Form Html
<form name="sentMessage" id="contactForm" method='post' novalidate action="public_html/bin/contact_me.php">
   <div class="control-group form-group">
      <div class="controls">
         <label>Full Name</label>
         <input type="text" class="form-control" name="name" id="name" placeholder="Full Name" required data-validation-required-message="Please enter your name.">
         <p class="help-block"></p>
      </div>
   </div>
   <div class="row">
      <div class="col-md-6">
         <div class="form-group">
            <label>Email Address</label>
            <input type="email" class="form-control" name="email" id="email" placeholder="Email Address" required data-validation-required-message="Please enter your email address.">
         </div>
      </div>
      <div class="col-md-6">
         <div class="form-group">
            <label>Phone Number</label>
            <input type="tel" class="form-control" name="phone" id="phone" placeholder="Phone Number" required data-validation-required-message="Please enter your phone number.">
         </div>
      </div>
   </div>
   <div class="form-group">
      <label>Subject</label>
      <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required data-validation-required-message="Please enter your phone number.">
   </div>
   <div class="form-group">
      <label>Message</label>
      <textarea rows="10" cols="100" class="form-control" name="message" id="message" placeholder="Please Enter Your Message Here..." required data-validation-required-message="Please enter your message" maxlength="999" style="height:150px;"></textarea>
   </div>
   <div id="success"></div>
   <div>
      <button type="submit" class="btn btn-two">Send message</button>                          
      <p><br/></p>
   </div>
</form>
PHP Code
<?php
// check if fields passed are empty
if(empty($_POST['name'])        ||
   empty($_POST['phone'])       ||
   empty($_POST['email'])       ||
   empty($_POST['subject'])         ||
   empty($_POST['message'])         ||
   !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
   {
    echo "No arguments Provided!";
    return false;
   }

$name = $_POST['name'];
$phone = $_POST['phone'];
$email_address = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];

// create email body and send it    
$to = 'info@mywebsite.com'; // PUT YOUR EMAIL ADDRESS HERE
$email_subject = "$subject"; // EDIT THE EMAIL SUBJECT LINE HERE
$email_body = "You have received a new message from your website's contact form.\n\n"."Here are the details:\n\nName: $name\n\nPhone: $phone\n\nEmail: $email_address\n\nMessage:\n$message";
$headers = "From: noreply@your-domain.com\n";
$headers .= "Reply-To: $email_address"; 
mail($to,$email_subject,$email_body,$headers);
return true;            
?>
Js
$(function() {

    $("input,textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // something to have when submit produces an error ?
            // Not decided if I need it yet
        },
        submitSuccess: function($form, event) {
            event.preventDefault(); // prevent default submit behaviour
            // get values from FORM
            var name = $("input#name").val();
            var phone = $("input#phone").val();
            var email = $("input#email").val();
            var subject = $("input#subject").val();
            var message = $("textarea#message").val();
            var firstName = name; // For Success/Failure Message
            // Check for white space in name for Success/Fail message
            if (firstName.indexOf(' ') >= 0) {
                firstName = name.split(' ').slice(0, -1).join(' ');
            }
            $.ajax({
                url: "bin/contact_me.php",
                type: "POST",
                data: {
                    name: name,
                    phone: phone,
                    email: email,
                    subject: subject,
                    message: message
                },
                cache: false,
                success: function() {
                    // Success message
                    $('#success').html("<div class='alert alert-success'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-success')
                        .append("<strong>Your message has been sent. </strong>");
                    $('#success > .alert-success')
                        .append('</div>');

                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function() {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append("<strong>Sorry " + firstName + " it seems that my mail server is not responding...</strong> Could you please email me directly to <a href='mailto:me@example.com?Subject=Message_Me from myprogrammingblog.com;>me@example.com</a> ? Sorry for the inconvenience!");
                    $('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
            })
        },
        filter: function() {
            return $(this).is(":visible");
        },
    });

    $("a[data-toggle=\"tab\"]").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
    });
});


/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
    $('#success').html('');
});

How do I solve this?

The code is basically OK except for the return statements. Why do you use them? Are the PHP scripts being called using the include/require statements? And make sure your first script has the .php extension (not the .html).

Thanks for the reply broj1,

I got this code from a website template download. The edits I made were to include a subject field that was not present.
You mean that the contact.html should have a .php extension?
The PHP script, contact_me.php is not being called using the include/require statements. I have attached the entire contact.html

Yes, any script that has php code should have a php extension. And remove the return statements.

@Broj1. The only script that has php code is contact_me.php (php extension) and not the contact.html that contains code for the form.

So rename the contact.html to contact.php. Otherwise it wont work.

Changing to to contact.php does not solve the issue.

Sorry, I was wrong. The form page does not need to have a php extension since there is no php code in it. All the code is in the contact_me-php script. There must be an error somewhere else. I will have a chance to look at it tomorrow. Sorry again for misleading you (it was not on purpose).

The form in the code for contact.html you posted above lacks the action attribute. It should be:

<form name="sentMessage" id="contactForm" novalidate action="contact_me.php">

If I add the action atribute, the form correctly posts to the contact_me.php script but I get No arguments Provided! error message (even I filled in all fields). This is because your form fields lack name attributes. Just add them to every form field and make it same as the ID attributes:

<input type="text" class="form-control" id="name" name="name" placeholder="Full Name" required data-validation-required-message="Please enter your name.">
...

In your previous post these errors were not present and everything worked.

@brjo1 . Mee to using the same template. i got a similar problem.
when i was trying in live, it says message has been sent, but i am not receiving anything.

I have tried which you have suggested(i.e filled all the name attribute same as Id and used the action attribute). But seems like its not working.

Could you please guide me!.

I have posted my code in the next/below post of me........

<!-- public_html/contactForm.html -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <form name="sentMessage" id="contactForm" action="/mail/contact_me.php" novalidate>1
        <div class="control-group form-group">
            <div class="controls">
                <label>Full Name:</label>
                <input type="text" class="form-control" id="name" name="name" required data-validation-required-message="Please enter your name.">
                <p class="help-block with-errors"></p>
            </div>
        </div>
        <div class="control-group form-group">
            <div class="controls">
                <label>Phone Number:</label>
                <input type="tel" pattern="^[0-9]{1,}$" class="form-control" id="phone" name="phone" required data-validation-required-message="Please enter your phone number.">
                <p class="help-block with-errors"></p>
            </div>
        </div>
        <div class="control-group form-group">
            <div class="controls">
                <label>Email Address:</label>
                <input type="email" class="form-control" id="email" name="email" required data-validation-required-message="Please enter your email address.">
            </div>
        </div>
        <div class="control-group form-group">
            <div class="controls">
                <label>Message:</label>
                <textarea rows="7" cols="100" class="form-control" id="message" name="message" required data-validation-required-message="Please enter your message" maxlength="2000" style="resize:none"></textarea>
            </div>
        </div>
        <div id="success"></div>
        <!-- For success/fail messages -->
        <button type="submit" class="btn btn-primary" id="sendMessageButton">Send Message</button>
        <button type="button" class="btn btn-default float-right btnClose" data-dismiss="modal">Close</button>
    </form>
    <footer>
            <script src="/js/contact_me.js"></script>
    </footer>
</body>
</html>

// /public_html/js/contact_me.js

$(function() {

  $("#contactForm input,#contactForm textarea").jqBootstrapValidation({
    preventSubmit: true,
    submitError: function($form, event, errors) {
      // additional error messages or events
    },
    submitSuccess: function($form, event) {
      event.preventDefault(); // prevent default submit behaviour
      // get values from FORM
      var name = $("input#name").val();
      var email = $("input#email").val();
      var phone = $("input#phone").val();
      var message = $("textarea#message").val();
      var firstName = name; // For Success/Failure Message
      // Check for white space in name for Success/Fail message
      if (firstName.indexOf(' ') >= 0) {
        firstName = name.split(' ').slice(0, -1).join(' ');
      }
      $this = $("#sendMessageButton");
      $this.prop("disabled", true); // Disable submit button until AJAX call is complete to prevent duplicate messages
      $.ajax({
        url: "/mail/contact_me.php",
        type: "POST",
        data: {
          name: name,
          phone: phone,
          email: email,
          message: message
        },
        cache: false,
        success: function() {
          // Success message
          $('#success').html("<div class='alert alert-success'>");
          $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
            .append("</button>");
          $('#success > .alert-success')
            .append("<strong>Your message has been sent. </strong>");
          $('#success > .alert-success')
            .append('</div>');
          //clear all fields
          $('#contactForm').trigger("reset");
        },
        error: function() {
          // Fail message
          $('#success').html("<div class='alert alert-danger'>");
          $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
            .append("</button>");
          $('#success > .alert-danger').append($("<strong>").text("Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"));
          $('#success > .alert-danger').append('</div>');
          //clear all fields
          $('#contactForm').trigger("reset");
        },
        complete: function() {
          setTimeout(function() {
            $this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
          }, 1000);
        }
      });
    },
    filter: function() {
      return $(this).is(":visible");
    },
  });

  $("a[data-toggle=\"tab\"]").click(function(e) {
    e.preventDefault();
    $(this).tab("show");
  });
});

/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
  $('#success').html('');
});

While I am not a mod, and thus have no formal standing here, I would like to point you toward the Daniweb Forum Rules, specifically this one:

  • Do not hijack old forum threads by posting a new question as a reply to an old one

I suspect that this one might apply as well:

  • Do provide evidence of having done some work yourself if posting questions from school or work assignments

If you have a question, you would do better to create a new thread, rather than resurrecting one which has been dead for two years.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.