bootstrap 3联系表格不起作用

时间:2015-01-27 15:18:25

标签: javascript php twitter-bootstrap-3 contact-form

我尝试在this文章的帮助下快速设置联系表单。起初它工作正常,我收到的回复发送到我的邮件,但突然它停止工作。我尝试在新的byethost域和服务器中托管代码,但问题仍然存在。

我还更改了我网站上的MX记录以使用zoho邮件,但这不应该是表单不起作用的原因吗?

以下是代码:

HTML:

<form name="sentMessage" class="well" id="contactForm"  novalidate>

    <div class="col-md-6">
        <div class="control-group">
            <div class="controls">
            <input type="text" class="form-control" 
                   placeholder="Full Name" id="name" required
                       data-validation-required-message="Please enter your name" />
            <p class="help-block"></p>
            </div>
        </div>
        <br>

        <div class="control-group">
            <div class="controls">
                <input type="email" class="form-control" placeholder="Email" 
                            id="email" required
                       data-validation-required-message="Please enter your email" />
            <p class="help-block"></p>                                        
            </div>
        </div>
        <br>

        <div class="control-group">
            <div class="controls">
                <input type="number" class="form-control" placeholder="Number" 
                            id="number" number
                       data-validation-required-message="Please enter your contact number" />
                <p class="help-block"></p>
            </div>
        </div>
        <br>
    </div>

    <div class="col-md-6">
        <div class="control-group">
            <div class="controls">
                <textarea rows="8" cols="100" class="form-message form-control" 
                       placeholder="Message" id="message" required
               data-validation-required-message="Please enter your message" minlength="5" 
                       data-validation-minlength-message="Min 5 characters" 
                        maxlength="999" style="resize:none"></textarea>
            </div>
        </div>
        <br>
    </div>

    <div class="col-md-12">
        <button type="submit" class="btn btn-primary my-btn-submit pull-left"><span class="my-btn-send">Send</span></button>

        <div id="success"> </div> <!-- For success/fail messages -->
    </div>


</form>

JS:

$(function() {

 $("input,textarea").jqBootstrapValidation(
    {
     preventSubmit: true,
     submitError: function($form, event, errors) {


     },
     submitSuccess: function($form, event) {
      event.preventDefault(); 

       var name = $("input#name").val();  
       var email = $("input#email").val();
       var number = $("input#number").val();  
       var message = $("textarea#message").val();
        var firstName = name; 

        if (firstName.indexOf(' ') >= 0) {
     firstName = name.split(' ').slice(0, -1).join(' ');
         }        
   $.ajax({
                url: "../bin/contact_me.php",
              type: "POST",
              data: {name: name, email: email, number: number, 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>Thank you for leaving a message "+firstName+". We'll get back to you soon.</strong>");
      $('#success > .alert-success')
      .append('</div>');


      $('#contactForm').trigger("reset");
        },
     error: function() {    

     $('#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 our mail server is not responding...</strong> Could you please email us directly to <a href='mailto:my@emailid.com?Subject=Message_Me from mywebsite.com'>my@emailid.com</a> ? Sorry for the inconvenience!");
          $('#success > .alert-danger').append('</div>');

    $('#contactForm').trigger("reset");
      },
           })
         },
         filter: function() {
                   return $(this).is(":visible");
         },
       });

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



$('#name').focus(function() {
     $('#success').html('');
  });

PHP:

<?php
// check if fields passed are empty
if(empty($_POST['name'])      ||
   empty($_POST['email'])     ||
   empty($_POST['number'])     ||
   empty($_POST['message']) ||
   !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
   {
  echo "No arguments Provided!";
  return false;
   }

$name = $_POST['name'];
$email_address = $_POST['email'];
$number_phone = $_POST['number'];
$message = $_POST['message'];

// create email body and send it  
$to = 'my@emailid.com'; // put your email
$email_subject = "Heads up! You've got a new message from:  $name";
$email_body = "Hello Team! You have received a new message. \n\n".
          " Here are the details:\n \nName: $name \n ".
          "Email: $email_address\n Contact Number: $number_phone \n Message:\n $message";
$headers = "From: my@emailid.com\n";
$headers .= "Reply-To: $email_address"; 
mail($to,$email_subject,$email_body,$headers);
return true;      
?>

我是Web开发的新手,我现在只能使用前端开发,并且对后端知之甚少。

提前感谢所有人的帮助。

0 个答案:

没有答案