如何使此聯系​​表具有交互性並反映信息？

Question

我將如何使此HTML聯系人表單具有交互性？

<!-- Contact Us Form -->
<div class="contact_form_container">
  <form id="reply_form" action="send.php" method="POST">
    <div>
      <input id="contact_form_name" class="input_field contact_form_name" type="text" name="name" placeholder="Name" required="required" data-error="Name is required.">
      <input id="contact_form_email" class="input_field contact_form_email" type="email" name="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
      <input id="contact_form_subject" class="input_field contact_form_subject" type="text" name="subject" placeholder="Subject" required="required" data-error="Subject is required.">
      <textarea id="contact_form_message" class="text_field contact_form_message" name="message" placeholder="Message" rows="4" required data-error="Please, write us a message."></textarea>
    </div>
    <div>
      <button id="contact_form_submit" type="submit" class="contact_submit_btn trans_300" value="Submit">
                                        send<img src="images/arrow_right.svg" alt="">
                                    </button>
    </div>

  </form>

</div>

我希望將用戶輸入的信息通過PHP腳本發送給我，但我不確定該PHP腳本的外觀。

成功提交后，我希望在頁面上回顯用戶名（即“ 感謝您的提交，喬，我們將盡快與您聯系！ ”）。

Answer 1

實際上，對於初學者來說，這並不容易。 一種方法是使用AJAX（JavaScript客戶端向服務器發出的請求）。

不久前，我已經編寫了一個AJAX函數，該函數通過將所需參數發送到服務器來處理AJAX調用的執行。 該請求由將返回數據的PHP文件接收。 然后，JavaScript可以在回調函數中使用此數據。

下面的函數使用GET運行AJAX調用，允許我們將參數（ object ）發送到文件（ string ），並在請求結束后啟動回調（ function ）。

function ajax(file, params, callback) {

  var url = file + '?';

  // loop through object and assemble the url
  var notFirst = false;
  for (var key in params) {
    if (params.hasOwnProperty(key)) {
      url += (notFirst ? '&' : '') + key + "=" + params[key];
    }
    notFirst = true;
  }

  // create a AJAX call with url as parameter
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      callback(xmlhttp.responseText);
    }
  };
  xmlhttp.open('GET', url, true);
  xmlhttp.send();
}

這是我們在您的情況下使用它的方式：

function sendData() {

  parameters = {
    name: document.querySelector('#contact_form_name').value,
    email: document.querySelector('#contact_form_email').value,
    subject: document.querySelector('#contact_form_subject').value,
    message: document.querySelector('#contact_form_message').value
  };

  ajax('send.php', parameters, function(response) {
    // add here the code to be executed when data comes back to client side      
    // e.g. console.log(response) will show the AJAX response in the console
  });

}

然后，在文件send.php ，可以放入以下代碼來處理AJAX調用發送的url參數。

if (isset($_REQUEST['name'], $_REQUEST['email'], $_REQUEST['subject'], $_REQUEST['message'])) {
    // they are set, you can use them by accessing $_REQUEST
    // return the desired output with `echo` not `return`!
    echo $_REQUEST['name'] . ', you have sent a message.';
}

通過上述過程，您無需在HTML中使用form 。 您只需input標簽，當然還有一個button即可啟動功能sendData() 。 在button的標記中使用屬性onclick可以指定單擊按鈕時要執行的操作。

 <!-- Contact Us Form --> <div class="contact_form_container"> <input id="contact_form_name" class="input_field contact_form_name" type="text" name="name" placeholder="Name" required="required" data-error="Name is required."> <input id="contact_form_email" class="input_field contact_form_email" type="email" name="email" placeholder="E-mail" required="required" data-error="Valid email is required."> <input id="contact_form_subject" class="input_field contact_form_subject" type="text" name="subject" placeholder="Subject" required="required" data-error="Subject is required."> <textarea id="contact_form_message" class="text_field contact_form_message" name="message" placeholder="Message" rows="4" required data-error="Please, write us a message."></textarea> </div> <div> <button onclick="sendData()" id="contact_form_submit" type="submit" class="contact_submit_btn trans_300" value="Submit"> send<img src="images/arrow_right.svg" alt=""> </button> </div> 

---

返回一個對象而不是一個字符串：

您甚至可以使用PHP，以便它在回調中返回實際的Javascript對象，而不只是字符串。 如果您想將各種信息返回給客戶端，這將非常有幫助。

您必須使用內置的json_encode()函數來獲取PHP數組的JSON表示形式。 例如：

$array = array({

  'name' => $_REQUEST['name'],
  'subject' => $_REQUEST['subject']

});

echo json_encode($array);

然后在JavaScript內部的回調函數中使用：

let obj = JSON.parse(response);

您實際上已將響應轉換為Javascript對象（不確定它是否是JSON對象...，但它是JavaScript對象，這很重要）。 這意味着您可以訪問obj的屬性：例如， obj.name將具有用戶名， obj.subject是消息的主題，等等。

注意：在此示例中，我剛剛返回了最初發送到服務器的信息，但是您可以返回任何想要的信息。 您可能在PHP文件中有一個進程，可將數據保存到數據庫並返回其他信息。 使用AJAX的可能性是無數的！

Answer 2

如果您是初學者，並且不想編寫任何PHP代碼，則可以使用https://formspree.io/之類的服務，也可以使用我在此處創建的服務 。 這些非常易於使用，不需要任何代碼。

使用我的表單處理程序，您可以使用GOTO名稱指定提交表單后頁面應重定向到的位置。

<input class="hidden" type="text" name="GOTO" value="URL">

如果您閱讀了文檔，則可以使用Formspree之類的服務自定義許多內容。 因此，您可以創建一個自定義頁面，上面寫着“感謝您的提交”。

如果要實際包括他們提交的表單中的信息，則必須像上面所說的那樣做，並創建自己的表單處理程序。

Answer 3

嘗試這樣的操作以顯示用戶名

if(

    !isset( $_POST['name'] ) || empty( $_POST['name'] ) ||
    !isset( $_POST['email'] ) || empty( $_POST['email'] ) ||
    !isset( $_POST['subject'] ) || empty( $_POST['subject'] ) ||
    !isset( $_POST['message'] ) || empty( $_POST['message'] ) ||

)

    exit( 'Please fill all fields' )

    // or redirect to previous page

    // header('Location: ' . $_SERVER['HTTP_REFERER'] . '#error=Please%20fill%all%fields' );



else{

    // Your message saving logic here, save it to a database / file or send it to mail

    echo "Thank you for your submission {$_POST['name'}, we will get back to you as soon as possible!";

}

Answer 4

使用jQuery ajax。

您的表格：

     <form id="reply_form" action="#" method="POST">
          <div>
               <input id="contact_form_name" class="input_field contact_form_name" type="text" name="name" placeholder="Name" required="required" data-error="Name is required.">
               <input id="contact_form_email" class="input_field contact_form_email" type="email" name="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
               <input id="contact_form_subject" class="input_field contact_form_subject" type="text" name="subject" placeholder="Subject" required="required" data-error="Subject is required.">
               <textarea id="contact_form_message" class="text_field contact_form_message" name="message"  placeholder="Message" rows="4" required data-error="Please, write us a message."></textarea>
          </div>
          <div>
               <button id="contact_form_submit" type="button" class="contact_submit_btn trans_300" value="Submit">
                      send<img src="images/arrow_right.svg" alt="">
               </button>
          </div>
      </form>

您的JS：

$('#contact_form_submit').click(function(){
    $.post('send.php', $('#reply_form').serialize(), function(data, status){
        if(status == "success"){
            var response_message = data.message;
            alert(response_message);
        }
    }, "json");
});

您的PHP處理程序（send.php）

<?php
   // Response array, it will be returned to client. You cant extend it with additional data.
   $response = ['message' => 'Error'];

   $name = $_POST['name'] ?: ""; 
   $email = $_POST['email'] ?: "";
   $subject= $_POST['subject'] ?: ""; 
   $message= $_POST['message'] ?: ""; 


   if($name) {
        if(filter_var($email, FILTER_VALIDATE_EMAIL)){
             if($subject){
                  if($message){
                      // do something with form data

                      // if success
                      $response['message'] = "Thank you for your submission". $name .", we will get back to you as soon as possible!";
                  }else{
                       $response['message'] = "Message is too short.";
                  }
             }else{
                  $response['message'] = "Enter subject.";
             }
        }else{
             $response['message'] = "Enter valid email.";
        }
   }else{
        $response['message'] = "Enter your name.";
   }

   echo json_encode($response); 
   exit();

?>

重要：表單操作=“＃”，按鈕類型=“按鈕”。 不要忘記驗證表單數據。