帶有 PHP 和 jQuery 的快速反饋表
發佈網絡產品時，沒有什麼比從用戶那裡獲得早期反饋更有益的了。不幸的是，許多網站使發送您的反饋變得不必要地困難或完全缺乏此功能
今天，我們正在為這個問題做一個簡單的解決方案。此表單由 jQuery、PHP 和 PHPMailer 類提供支持，將用戶的建議直接發送到您的郵箱。
HTML
讓我們從 HTML 標記開始。樣式表包含在文檔的頂部，JavaScript 源文件位於底部。這提高了頁面的感知性能，因為腳本最後加載，從而允許顯示網站的設計。
feedback.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quick Feedback Form w/ PHP and jQuery | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="feedback">
<!-- Five color spans, floated to the left of each other -->
<span class="color color-1"></span>
<span class="color color-2"></span>
<span class="color color-3"></span>
<span class="color color-4"></span>
<span class="color color-5"></span>
<div class="section">
<!-- The arrow span is floated to the right -->
<h6><span class="arrow up"></span>Feedback</h6>
<p class="message">Please include your contact information if you'd like to receive a reply.</p>
<textarea></textarea>
<a class="submit" href="">Submit</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html> 在正文中，您可以看到 #feedback 分區。它以固定位置固定在窗口的右下角，您將在下一節中看到。
它裡面有五個顏色跨度。這些是 20% 寬並浮動到左側。這樣，它們會填充 #feedback div 的確切寬度。
最後是 .section 容器，包含標題、文本區域和按鈕。
CSS
繼續討論表單的樣式，我們首先要說兩句關於樣式表的結構。從下面的 CSS 定義中可以看出，每條規則都以 #feedback 開頭 .通過這種方式，我們實現了命名空間的 CSS 等價物，這使得將代碼添加到現有站點更容易而不會發生衝突。
styles.css - 第 1 部分
#feedback{
background-color:#9db09f;
width:310px;
height:330px;
position:fixed;
bottom:0;
right:120px;
margin-bottom:-270px;
z-index:10000;
}
#feedback .section{
background:url('img/bg.png') repeat-x top left;
border:1px solid #808f81;
border-bottom:none;
padding:10px 25px 25px;
}
#feedback .color{
float:left;
height:4px;
width:20%;
overflow:hidden;
}
#feedback .color-1{ background-color:#d3b112;}
#feedback .color-2{ background-color:#12b6d3;}
#feedback .color-3{ background-color:#8fd317;}
#feedback .color-4{ background-color:#ca57df;}
#feedback .color-5{ background-color:#8ecbe7;}
#feedback h6{
background:url("img/feedback.png") no-repeat;
height:38px;
margin:5px 0 12px;
text-indent:-99999px;
cursor:pointer;
}
#feedback textarea{
background-color:#fff;
border:none;
color:#666666;
font:13px 'Lucida Sans',Arial,sans-serif;
height:100px;
padding:10px;
width:236px;
-moz-box-shadow:4px 4px 0 #8a9b8c;
-webkit-box-shadow:4px 4px 0 #8a9b8c;
box-shadow:4px 4px 0 #8a9b8c;
} 要設置樣式的第一個元素是 #feedback 分區。它應用固定定位，並錨定到瀏覽器窗口。在這之後是 .section 的定義 div 和五個顏色跨度。這些跨度僅在其背景顏色上有所不同，它們是為每個類單獨分配的。
底部是定義文本區域外觀的 CSS 規則。
styles.css - 第 2 部分
#feedback a.submit{
background:url("img/submit.png") no-repeat;
border:none;
display:block;
height:34px;
margin:20px auto 0;
text-decoration:none;
text-indent:-99999px;
width:91px;
}
#feedback a.submit:hover{
background-position:left bottom;
}
#feedback a.submit.working{
background-position:top right !important;
cursor:default;
}
#feedback .message{
font-family:Corbel,Arial,sans-serif;
color:#5a665b;
text-shadow:1px 1px 0 #b3c2b5;
margin-bottom:20px;
}
#feedback .arrow{
background:url('img/arrows.png') no-repeat;
float:right;
width:23px;
height:18px;
position:relative;
top:10px;
}
#feedback .arrow.down{ background-position:left top;}
#feedback h6:hover .down{ background-position:left bottom;}
#feedback .arrow.up{ background-position:right top;}
#feedback h6:hover .up{ background-position:right bottom;}
#feedback .response{
font-size:21px;
margin-top:70px;
text-align:center;
text-shadow:2px 2px 0 #889889;
color:#FCFCFC;
} 在樣式表的第二部分，您可以看到提交按鈕的定義。請注意，共有三個按鈕狀態，它們包含在相同的背景圖片中 - submit.png - 僅在必要時顯示。這些是按鈕的默認狀態、懸停狀態和“Working " 版本。當按鈕處於“工作”狀態時 " 模式下，懸停效果被禁用。
jQuery
反饋表有兩種狀態——最小化和最大化。加載時，默認情況下它會最小化到屏幕的右下角。當用戶單擊標題時，由 jQuery 最大化它。這是通過綁定一個事件監聽器並運行一個簡單的動畫來完成的，如下面的代碼所示。
script.js - 第 1 部分
$(document).ready(function(){
// The relative URL of the submit.php script.
// You will probably have to change it.
var submitURL = 'submit.php';
// Caching the feedback object:
var feedback = $('#feedback');
$('#feedback h6').click(function(){
// We are storing the values of the animated
// properties in a separate object:
var anim = {
mb : 0, // Margin Bottom
pt : 25 // Padding Top
};
var el = $(this).find('.arrow');
if(el.hasClass('down')){
anim = {
mb : -270,
pt : 10
};
}
// The first animation moves the form up or down, and the second one
// moves the "Feedback" heading, so it fits in the minimized version
feedback.stop().animate({marginBottom: anim.mb});
feedback.find('.section').stop().animate({paddingTop:anim.pt},function(){
el.toggleClass('down up');
});
});
為了保持代碼乾淨，我將 if 語句移到頂部並創建了 anim 對象，它保存提供給 animate 方法的值。取決於 'down ' 類存在於箭頭上，我們最大化或最小化表單。
script.js的第二部分 處理與 submit.php 的 AJAX 交互 .
script.js - 第 2 部分
$('#feedback a.submit').live('click',function(){
var button = $(this);
var textarea = feedback.find('textarea');
// We use the working class not only for styling the submit button,
// but also as kind of a "lock" to prevent multiple submissions.
if(button.hasClass('working') || textarea.val().length < 5){
return false;
}
// Locking the form and changing the button style:
button.addClass('working');
$.ajax({
url : submitURL,
type : 'post',
data : { message : textarea.val()},
complete : function(xhr){
var text = xhr.responseText;
// This will help users troubleshoot their form:
if(xhr.status == 404){
text = 'Your path to submit.php is incorrect.';
}
// Hiding the button and the textarea, after which
// we are showing the received response from submit.php
button.fadeOut();
textarea.fadeOut(function(){
var span = $('<span>',{
className : 'response',
html : text
})
.hide()
.appendTo(feedback.find('.section'))
.show();
}).val('');
}
});
return false;
});
}); 我們正在使用 jQuery 的低級 AJAX 方法 - $.ajax() , 與 submit.php 交互 .這個方法比 $.get() 給了我們更多的連接控制 和 $.post() 包裝器。
使用此方法的一個好處是在“完成”回調函數中可見。在那裡我們匹配 404 not found 錯誤的響應狀態 ，並向用戶輸出一條友好的錯誤消息，提醒他們檢查他們的 submitURL 路徑。
現在讓我們繼續本教程的最後一部分 - PHP 步驟。
PHP
PHP 處理數據，通過 AJAX 傳遞，對其進行清理，然後將電子郵件發送到您的電子郵件地址。
提交.php
// Enter your email address below
$emailAddress = '[email protected]';
// Using session to prevent flooding:
session_name('quickFeedback');
session_start();
// If the last form submit was less than 10 seconds ago,
// or the user has already sent 10 messages in the last hour
if( $_SESSION['lastSubmit'] && ( time() - $_SESSION['lastSubmit'] < 10 || $_SESSION['submitsLastHour'][date('d-m-Y-H')] > 10 )){
die('Please wait for a few minutes before sending again.');
}
$_SESSION['lastSubmit'] = time();
$_SESSION['submitsLastHour'][date('d-m-Y-H')]++;
require "phpmailer/class.phpmailer.php";
if(ini_get('magic_quotes_gpc')){
// If magic quotes are enabled, strip them
$_POST['message'] = stripslashes($_POST['message']);
}
if(mb_strlen($_POST['message'],'utf-8') < 5){
die('Your feedback body is too short.');
}
$msg = nl2br(strip_tags($_POST['message']));
// Using the PHPMailer class
$mail = new PHPMailer();
$mail->IsMail();
// Adding the receiving email address
$mail->AddAddress($emailAddress);
$mail->Subject = 'New Quick Feedback Form Submission';
$mail->MsgHTML($msg);
$mail->AddReplyTo('[email protected]'.$_SERVER['HTTP_HOST'], 'Quick Feedback Form');
$mail->SetFrom('[email protected]'.$_SERVER['HTTP_HOST'], 'Quick Feedback Form');
$mail->Send();
echo 'Thank you!'; 首先，我們使用 PHP 的會話管理來跟踪用戶在過去一小時內提交了多少次表單，以及最後一次提交的時間戳。如果上次提交的表單與當前提交的時間差小於 10 秒，或者用戶在過去一小時內發送了超過 10 條消息，則會顯示錯誤消息。
電子郵件使用 PHPMailer 類發送。它僅適用於 PHP5，因此要使用該表單，您需要運行該版本的 PHP。
許多 PHPMailer 的方法用於配置外發電子郵件。使用 IsMail() 我們告訴班級它應該使用內部的 mail() PHP 函數。 AddAddress() 廣告接收電子郵件地址（您可以添加多個接收者並對該方法進行額外調用）。添加主題和正文後，我們指定回复地址並發送消息。
有了這個，我們的快速反饋表就完成了！
最後的話
您可以使用此表格從訪問者那裡收集快速反饋。由於進入門檻如此之低 - 只需填寫一個 texbox，您就可以讓用戶更輕鬆地分享他們的意見和提出想法。該腳本也是結構化的，因此很容易自定義並且對您的頁面的影響最小。
