我如何學習如何在實時網站上實現聯繫表單？

Question

基本上，作爲一個開始的web開發者，我發現自己有點頭大。我創建了一個使用Bootstrap 3的網站，用於朋友的業務，除了創建一個允許訪問者提交關於預約興趣信息的Web表單之外，可以處理所有事情。

當我潛入，我看到PHP可能會涉及。我的虛擬主機（ASmallOrange）包含一個名爲Form Tools（工具）的工具（http://www.formtools.org/）。儘管使用Bootstrap元素創建表單的外觀沒有問題，但我如何才能使其在實時網站上工作？

Answer 1

你需要的只是發送郵件聯繫表格....

如果是這樣，考慮借力山魈服務是免費的，每月高達12,000電子郵件。

表格樣本（阿爾特滿足您的需求）

<h1>Contact</h1> 
<br /> 

<div id="ContactMessageSentAlert" class="alert alert-success"> 
    You're message has been sent. 
</div> 

<form role="form" id="ContactMessageForm"> 
    <div class="form-group"> 
     <label for="FirstName" class="sr-only legacy-label">First Name</label> 
     <input type="text" id="FirstName" name="FirstName" maxlength="255" class="form-control" placeholder="First Name" /> 
    </div> 
    <div class="form-group">  
     <label for="LastName" class="sr-only legacy-label">Last Name</label> 
     <input type="text" id="LastName" name="LastName" maxlength="255" class="form-control" placeholder="Last Name" /> 
    </div> 
    <div class="form-group"> 
     <label for="EmailAddress" class="sr-only legacy-label">Email Address</label> 
     <input type="email" id="EmailAddress" name="EmailAddress" maxlength="255" class="form-control" placeholder="Email Address" /> 
    </div> 
    <div class="form-group">  
     <label for="TwitterUsername" class="sr-only legacy-label">Twitter Username</label> 
     <input type="text" id="TwitterUsername" name="TwitterUsername" maxlength="16" class="form-control" placeholder="Twitter Username" /> 
    </div> 
    <div class="form-group"> 
     <label for="Subject" class="sr-only legacy-label">Subject</label> 
     <input type="text" id="Subject" name="Subject" maxlength="255" class="form-control" placeholder="Subject" /> 
    </div> 
    <div class="form-group"> 
     <label for="Message" class="sr-only legacy-label">Message</label> 
     <textarea id="Message" name="Message" rows="5" class="form-control" placeholder="Message"></textarea> 
    </div> 
    <button type="button" class="btn btn-default" id="ContactMessageSendButton">Send</button> 
</form> 

<script type="text/javascript" src="/scripts/mail.js" defer="defer"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#ContactMessageSentAlert').hide(); 
     $('#ContactMessageForm').show(); 

     $.validator.addMethod('twitterUsername', function(value, element) { 
      return this.optional(element) || /^(@?[a-zA-Z0-9\_]{1,15})$/.test(value); 
     }, 'Invalid'); 

     var validator = $('#ContactMessageForm').validate({ 
      errorElement: 'div', 
      rules: { 
       FirstName: {required: true}, 
       LastName: {required: true}, 
       EmailAddress: {required: true, email: true}, 
       TwitterUsername: {twitterUsername: true}, 
       Subject: {required: true}, 
       Message: {required: true} 
      }, 
      messages: { 
       FirstName: {required: 'Please enter your first name.'}, 
       LastName: {required: 'Please enter your last name.'}, 
       EmailAddress: {required: 'Please enter your email address.', email: 'Please enter a valid email address.'}, 
       TwitterUsername: {twitterUsername: 'Please enter a valid Twitter username.'}, 
       Subject: {required: 'Please enter a subject.'}, 
       Message: {required: 'Please enter a message.'} 
      }, 
      errorPlacement: function (error, element) { 
       $(error).insertBefore($(element)); 
      }, 
      highlight: function(element, errorClass) {    
       $(element).parent('div').addClass('has-error'); 
      },   
      unhighlight: function(element, errorClass, validClass) { 
       $(element).parent('div').removeClass('has-error'); 
      }, 
      onfocusout: false, 
      invalidHandler: function(event, validator){ 
       setTimeout(function(){ 
        $('input:text').blur(); 
        $('textarea').blur(); 
        // Pseudo of input:email is not recognized by jQuery yet, so have to target the email fields individually. 
        $('#EmailAddress').blur(); 
       }, 10); 
      } 
     });  
    }); 
</script> 

/scripts/mail.js文件：

function sendMail(sender, senderName, recipient, subject, message) { 
    $.ajax({ 
     type: 'POST', 
     url: 'https://mandrillapp.com/api/1.0/messages/send.json', 
     data: { 
      /* Confirm API key before use! */ 
      'key': 'YOURAPICODE', 
      'message': { 
       'from_email': 'INFO@YOURDOMAIN.COM', 
       'from_name': senderName, 
       "headers": {"Reply-To": sender}, 
       'to': [{'email': recipient, 'type': 'to'}], 
       'autotext': 'true', 
       'subject': subject, 
       'html': message 
      } 
      } 
    }) 
}; 


/* Assign an OnClick function to items in the "Send" button */ 
$('#ContactMessageSendButton').click(function(e) { 
    $(document).ready(function() { 
     var form = $('#ContactMessageForm'); 
     form.validate(); 
     if (form.valid() === true) { 
      var sender = $.trim($('#EmailAddress').val()); 
      var senderName = $.trim($('#FirstName').val()) + ' ' + $.trim($('#LastName').val()); 
      var recipient = 'INFO@YOURDOMAIN.COM'; 
      var subject = $.trim($('#Subject').val()); 
      var message = $.trim($('#Message').val()).replace(/\n/g, '<br />') + '<br />' + $.trim($('#TwitterUsername').val()); 
      sendMail(sender, senderName, recipient, subject, message); 
      $('#ContactMessageSentAlert').show(); 
      $('#ContactMessageForm').hide(); 
     } 
    }); 
}); 

Answer 2

一個易於安裝/使用/修改PHP腳本可以被發現here： 包括：驗證碼（captcha），反利用注入，語言文件和設置。