2017-02-28 63 views
2

我無法讓我的聯繫表單在GitHub頁面上工作,因爲它們提供靜態網站,或者我聽說過。我一直在嘗試使用Formspree,因爲它在其他有相同問題的StackOverflow問題中被引用,我也讀過這個post。這是我目前的HTML/JS從自舉代理模板代碼:從Bootstrap模板獲取聯繫表格使用GitHub頁面

$(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(' '); 
 
      } 
 
      $.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"); 
 
       }, 
 
      }); 
 
     }, 
 
     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(''); 
 
});
<div class="row"> 
 
       <div class="col-lg-12"> 
 
        <form name="sentMessage" action="http://formspree.io/[email protected]" method="post" id="contactForm" novalidate> 
 
         <div class="row"> 
 
          <div class="col-md-6"> 
 
           <div class="form-group"> 
 
            <input type="text" name="name" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name."> 
 
            <p class="help-block text-danger"></p> 
 
           </div> 
 
           <div class="form-group"> 
 
            <input type="email" name="_replyto" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address."> 
 
            <p class="help-block text-danger"></p> 
 
           </div> 
 
           <div class="form-group"> 
 
            <input type="tel" name="phone" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number."> 
 
            <p class="help-block text-danger"></p> 
 
           </div> 
 
          </div> 
 
          <div class="col-md-6"> 
 
           <div class="form-group"> 
 
            <textarea class="form-control" name="message" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea> 
 
            <p class="help-block text-danger"></p> 
 
           </div> 
 
          </div> 
 
          <div class="clearfix"></div> 
 
          <div class="col-lg-12 text-center"> 
 
           <div id="success"></div> 
 
           <button type="submit" class="btn btn-xl" value="Send">Send Message</button> 
 
          </div> 
 
         </div> 
 
        </form> 
 
       </div> 
 
      </div>

而且這是PHP文件:

<?php 
// Check for empty fields 

if(empty($_POST['name'])  || 
    empty($_POST['email'])  || 
    empty($_POST['phone'])  || 
    empty($_POST['message']) || 
    !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL)) 
    { 
    echo "No arguments Provided!"; 
    return false; 
    } 

$name = strip_tags(htmlspecialchars($_POST['name'])); 
$email_address = strip_tags(htmlspecialchars($_POST['email'])); 
$phone = strip_tags(htmlspecialchars($_POST['phone'])); 
$message = strip_tags(htmlspecialchars($_POST['message'])); 

// Create the email and send the message 
$to = 'http://formspree.io/[email protected]'; // Add your email address inbetween the '' replacing [email protected] - This is where the form will send a message to. 
$email_subject = "Website Contact Form: $name"; 
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message"; 
$headers = "From: http://formspree.io/[email protected]\n"; // This is the email address the generated message will be from. We recommend using something like [email protected] 
$headers .= "Reply-To: $email_address"; 
mail($to,$email_subject,$email_body,$headers); 
return true; 
?> 

現在,當我嘗試發送電子郵件在我的頁面上,我的錯誤信息彈出,說郵件服務器沒有響應。我在這裏先向您的幫助表示感謝!

回答

1

我看到這是一箇舊帖子,但昨天遇到了同樣的問題。看着你的代碼,似乎JS和PHP仍然在控制之中,並且不允許Formspree來完成它的工作。

我能得到的一種形式從這個職位上Codepen https://codepen.io/mblode/details/yNaxYZ/

我用這些信息來修改一些幫助工作(修改只對HTML,我能刪除JS和PHP )我的表單頁面,但保留原始樣式在這裏是我的例子:

<div class="container"> 
    <h2 class="text-center">Let's work together</h2> 
    <hr> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-lg-8 mx-auto"> 
      <form action="https://formspree.io/[email protected]" role="form" method="POST" autocomplete="on"> 
       <div class="control-group"> 
       <div class="form-group floating-label-form-group controls"> 
        <input type="text" class="form-control" name="name" placeholder="Name" required> 
       </div> 
       </div> 

       <div class="control-group"> 
       <div class="form-group floating-label-form-group controls"> 
        <input type="email" class="form-control form-input" placeholder="Email" required> 
       </div> 
       </div> 

       <div class="control-group"> 
       <div class="form-group floating-label-form-group controls"> 
        <textarea class="form-control" id="message" name="message" rows="5" width="100%" placeholder="Tell me about your project" required></textarea> 
       </div> 
       </div> 
       <br> 
       <div> 
        <!-- Extra field to avoid spam by fooling scrapers. If a value is provided, the submission will be silently ignored. --> 
        <input type="text" name="_gotcha" style="display:none" /> 
       </div> 
       <div> 
       <input type="submit" class="btn btn-primary" value="Send"> 
       <input type="hidden" name="_subject" value="New submission!" /> 
       </div> 
       <br> 
      </form> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div>  
</section> 

您可能可以修改它供您使用。關鍵部件是:

<form action="https://formspree.io/[email protected]" role="form" method="POST" autocomplete="on">