php - Bootstrap Contact Form issue! messages are not being sent to attached email -
i having trouble figuring out contact form. doesn't send messages email attached it. of guys know might doing wrong? provided code below feel free view actual set on www.kelliehannon.com clicking contact button.
here html:
<!-- contact form --> <form id="contact-form" name="contact-form" method="post" data-name="contact form"> <div class="row"> <div class="col-xs-12 col-sm-6 col-lg-6"> <!-- full name --> <div class="col-xs-12 col-sm-12 col-lg-12"> <div class="form-group"> <input type="text" id="name" class="form form-control" placeholder="name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'name'" name="name" data-name="name" required> </div> </div> <!-- e-mail --> <div class="col-xs-12 col-sm-12 col-lg-12"> <div class="form-group"> <input type="email" id="email" class="form form-control" placeholder="email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'email'" name="email-address" data-name="email address" required> </div> </div> <!-- subject --> <div class="col-xs-12 col-sm-12 col-lg-12"> <div class="form-group"> <input type="text" id="subject" class="form form-control" placeholder="inquiry" onfocus="this.placeholder = ''" onblur="this.placeholder = 'inquiry'" name="subject" data-name="subject" > </div> </div> </div> <div class="col-xs-12 col-sm-6 col-lg-6"> <!-- message --> <div class="col-xs-12 col-sm-12 col-lg-12 no-padding"> <div class="form-group"> <textarea id="text-area" class="form textarea form-control" placeholder="message" onfocus="this.placeholder = ''" onblur="this.placeholder = 'message'" name="message" data-name="text area" required></textarea> </div> </div> <!-- button submit --> <button type="submit" id="valid-form" class="btn btn-color">send</button> </div> </div> </form> <!-- /. contact form --> <div id="answer"></div>
here php: php/contact-me.php
<?php if($_post) { $to_email ="khannon@kelliehannon.com"; // write email here // use php detect ajax request if(!isset($_server['http_x_requested_with']) , strtolower($_server['http_x_requested_with']) != 'xmlhttprequest') { // exit script json data $output = json_encode( array( 'type'=> 'error', 'text' => 'request must come ajax' )); die($output); } // checking if $_post vars provided, exit if there 1 missing if(!isset($_post["username"]) || !isset($_post["useremail"]) || !isset($_post["usersubject"]) || !isset($_post["usermessage"])) { $output = json_encode(array('type'=>'error', 'text' => 'input fields empty!')); die($output); } // php validation fields required if(empty($_post["username"])) { $output = json_encode(array('type'=>'error', 'text' => 'we sorry name short or not specified.')); die($output); } if(!filter_var($_post["useremail"], filter_validate_email)) { $output = json_encode(array('type'=>'error', 'text' => 'please enter valid email address.')); die($output); } // avoid spammy bots, can change value of minimum characters required. here it's <20 if(strlen($_post["usermessage"])<20) { $output = json_encode(array('type'=>'error', 'text' => 'atleast 20 charaters required.')); die($output); } // proceed php email $headers = 'content-type:text/html; charset=utf-8' . "\r\n" . $headers = 'from: website' . "\r\n" . 'reply-to: '.$_post["useremail"].'' . "\r\n" . 'x-mailer: php/' . phpversion(); // body of email received in mailbox $emailcontent = 'hey! have received new message visitor <strong>'.$_post["username"].'</strong><br/><br/>'. "\r\n" . 'his message: <br/> <em>'.$_post["usermessage"].'</em><br/><br/>'. "\r\n" . '<strong>feel free contact '.$_post["username"].' via email @ : '.$_post["useremail"].'</strong>' . "\r\n" ; $mailsending = @mail($to_email, $_post["usersubject"], $emailcontent, $headers); if(!$mailsending) { //if mail couldn't sent output error. check php email configuration (if ever happens) $output = json_encode(array('type'=>'error', 'text' => 'oops! looks went wrong, please check php mail configuration.')); die($output); } else { $output = json_encode(array('type'=>'message', 'text' => 'hello there,'.$_post["username"] .'! message has been sent.')); die($output); } } ?>
here javascript:
$(document).ready(function() { $("#contact-form [type='submit']").click(function(e) { e.preventdefault(); // input field values of contact form var user_name = $('input[name=name]').val(); var user_email = $('input[name=email-address]').val(); var user_subject = $('input[name=subject]').val(); var user_message = $('textarea[name=message]').val(); // datadata sent server post_data = {'username':user_name, 'useremail':user_email, 'usersubject':user_subject, 'usermessage':user_message}; // ajax post data server $.post('php/contact-me.php', post_data, function(response){ // load json data server , output message if(response.type == 'error') { output = '<div class="error-message"> <p>'+response.text+'</p></div>'; } else { output = '<div class="success-message"><p>'+response.text+'</p></div>'; // after, fields reseted $('#contact-form input').val(''); $('#contact-form textarea').val(''); } $("#answer").hide().html(output).fadein(); }, 'json'); }); // reset , hide messages on .keyup() $("#contact-form input, #contact-form textarea").keyup(function() { $("#answer").fadeout(); }); });
thank you!
Comments
Post a Comment