bootstrap contact form send a blank email

Question

I tried unsuccessfully to fix the problem, I used a bootstrap contact form (template) send a blank email.

I searched on developers forum and this website as well, I tried some manipulation but it persists.

it maybe a question of (dot) missing ; but I'm not a PHP expert, I just know some basics...

HTML

  <form id="main-contact-form" name="contact-form" method="post" action="sendemail.php"> <div class="row wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms"> <div class="col-sm-6"> <div class="form-group"> <input type="text" name="name" class="form-control" placeholder="Name" required="required"></input> </div> </div> <div class="col-sm-6"> <div class="form-group"> <input type="email" name="email" class="form-control" placeholder="Email Address" required="required"></input> </div> </div> </div> <div class="form-group"> <input type="text" name="subject" class="form-control" placeholder="Subject" required="required"></input> </div> <div class="form-group"> <textarea name="message" id="message" class="form-control" rows="4" placeholder="Enter your message" required="required"></textarea> </div> <div class="form-group"> <button type="submit" class="btn-submit">Send Now</button></input> </div> </form> 

My sendemail.php

 <?php $name = @trim(stripslashes($_POST['name'])); $from = @trim(stripslashes($_POST['email'])); $subject = @trim(stripslashes($_POST['subject'])); $message = @trim(stripslashes($_POST['message'])); $to ='index@indexmarkets.biz'; $headers = [ // or array( for older PHP versions. "MIME-Version: 1.0", "Content-type: text/plain; charset=iso-8859-1", "From: $name <$from>", "Reply-To: <$from>", "Subject: $subject", "X-Mailer: PHP/".phpversion() ]; mail($to, $subject, $message, join('\\r\\n', $headers)); die; 

JS

 // Contact form var form = $('#main-contact-form'); form.submit(function(event){ event.preventDefault(); var form_status = $('<div class="form_status"></div>'); $.ajax({ type: "POST", url: $(this).attr('action'), data: { name: $('input[name]').val(), email: $('input[email]').val(), subject: $('input[subject]').val(), message: $('input[message]').val() }, beforeSend: function(){ form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() ); form.submit(function () { $this = $(this); $.post($(this).attr('action'),$(this).serialize(), function(data) { $this.prev().text(data.message).fadeIn().delay(3000).fadeOut(); },'json'); return false; }); } }).done(function(data){ form_status.html('<p class="text-success">Thank you for contact us. As early as possible we will contact you</p>').delay(3000).fadeOut(); }); }); 

Answer 1

Your selectors for inputs are wrong.
Use

data: {
  name: $('input[name=name]').val(),
  email: $('input[name=email]').val(),
  subject: $('input[name=subject]').val(),
  message: $('textarea[name=message]').val()
}

And as mentioned in comment, you are making another POST in beforeSend callback.

Update

While there's a lot that can be done, here's an example based on your own.

 (function ($) { var messages = { 'progress': '<p><i class="fa fa-spinner fa-spin"></i> Sending email...</p>', 'success': '<p class="text-success">Thank you for contacting us. We will contact you as early as possible.</p>', 'error': '<p class="text-danger">Something went wrong.</p>' }; var $form = $('form#main-contact-form'); var formStatus = $('<div class="form_status"/>'); $form.submit(function (e) { e.preventDefault(); $.ajax({ type: 'POST', url: $form.attr('action'), data: $form.serialize(), dataType: 'json', beforeSend: function () { formStatus.html(messages.progress).fadeIn().prependTo($form); }, success: function (data) { if (data.success === true) { formStatus.html(messages.success); } else { formStatus.html(messages.error); } formStatus.fadeIn().delay(3000).fadeOut(); }, error: function () { formStatus.html(messages.error).fadeIn().delay(3000).fadeOut(); } }); }) })(jQuery); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <form id="main-contact-form" name="contact-form" method="post" action="sendemail.php" accept-charset="UTF-8"> <div class="row wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms"> <div class="col-sm-6"> <div class="form-group"> <input type="text" name="name" class="form-control" placeholder="Name" required="required"/> </div> </div> <div class="col-sm-6"> <div class="form-group"> <input type="email" name="email" class="form-control" placeholder="Email Address" required="required"/> </div> </div> </div> <div class="form-group"> <input type="text" name="subject" class="form-control" placeholder="Subject" required="required"/> </div> <div class="form-group"> <textarea name="message" id="message" class="form-control" rows="4" placeholder="Enter your message" required="required"></textarea> </div> <div class="form-group"> <button type="submit" class="btn-submit">Send Now</button> </div> </form> 

<?php
$to = 'index@indexmarkets.biz';
$name = !empty($_POST['name']) ? filter_var(trim($_POST['name']), FILTER_SANITIZE_STRING) : '';
$from = !empty($_POST['email']) ? filter_var(trim($_POST['email']), FILTER_SANITIZE_EMAIL) : $to;
$subject = !empty($_POST['subject']) ? filter_var(trim($_POST['subject']), FILTER_SANITIZE_STRING) : '';
$message = !empty($_POST['message']) ? filter_var(trim($_POST['message']), FILTER_SANITIZE_STRING) : '';

$body = "Name: {$name}\r\nEmail: {$from}\r\nMessage: {$message}";

$body = wordwrap($body, 70, "\r\n");

$headers = [
    'MIME-Version: 1.0',
    'Content-type: text/plain; charset=iso-8859-1',
    "From: $name <$from>",
    "Reply-To: <$from>",
    "Subject: $subject",
    'X-Mailer: PHP/' .phpversion()
];

$success = @mail($to, $subject, $body, implode('\r\n', $headers));

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
    die(json_encode(['success' => $success]));
}

echo $success ? 'Sent Successfully.' : 'An error occurred';