除了作为联系网站管理员的地方之外,网站上的表格还可以用于很多目的。在之前的文章中,我介绍了如何在 php中创建功能齐全的联系表单,以及如何构建您自己的验证码并将其集成到您的联系表单中。
在本教程中,我们的重点将是在 PHP 中创建用于其他目的的表单,例如收集有关求职者的信息、预订酒店房间或从客户那里获取有关婚姻事件的信息。
为您的表单选择正确的字段
在联系表教程中,我们了解到不同的组织和网站很可能希望从与他们联系的人那里获取特定信息,以便以最佳方式为他们提供帮助。例如,学校网站上的联系表格可能会要求家长提供有关他们在该学校就读的孩子的信息。同样,购物网站上的联系表可能会收集有关人们最后购买的产品的信息,以便更好地为他们服务。
如果不同网站和组织之间的联系表格差异很大,那么可以合理地假设应该服务于完全不同目的的表格具有非常不同的领域。例如,您很可能会询问预订酒店房间的人是否有其他***或儿童陪同。问求职者同样的事情是没有意义的。
当您按照本教程进行操作时,请记住这一点很重要。创建表单、收集所有信息并通过电子邮件将其发送到某处的基本概念将保持不变,但代码几乎肯定需要更改才能适用于您的情况。您可能希望向表单添加不同的输入字段并为这些字段分配不同的名称。这将影响后端的 PHP 代码。如果您对表单进行了更改,请确保您也更新了 PHP 代码。
创建一个html表单
在本教程中,我们将创建一个表单来预订酒店房间作为示例。为简单起见,我们不会使用任何额外的javascript或 PHP 库。
考虑到这一点,让我们编写表单的标记。我们需要询问预订者的姓名、电子邮件地址和电话号码。之后,我们会要求他们提供有关陪伴他们的儿童和***人数、入住和退房日期以及他们喜欢的房间类型的详细信息。最后,我们会问他们在他们到达之前是否还有其他我们知道的事情。
<form action="reservation.php" method="post"> <div class="elem-group"> <label for="name">你的名字</label> <input type="text" id="name" name="visitor_name" placeholder="John Doe" pattern=[A-Z\sa-z]{3,20} required> </div> <div class="elem-group"> <label for="email">您的电子邮件</label> <input type="email" id="email" name="visitor_email" placeholder="john.doe@email.com" required> </div> <div class="elem-group"> <label for="phone">你的手机</label> <input type="tel" id="phone" name="visitor_phone" placeholder="498-348-3872" pattern=(\d{3})-?\s?(\d{3})-?\s?(\d{4}) required> </div> <hr> <div class="elem-group inlined"> <label for="adult">***</label> <input type="number" id="adult" name="total_adults" placeholder="2" min="1" required> </div> <div class="elem-group inlined"> <label for="child">儿童</label> <input type="number" id="child" name="total_children" placeholder="2" min="0" required> </div> <div class="elem-group inlined"> <label for="checkin-date">入住日期</label> <input type="date" id="checkin-date" name="checkin" required> </div> <div class="elem-group inlined"> <label for="checkout-date">退房日期</label> <input type="date" id="checkout-date" name="checkout" required> </div> <div class="elem-group"> <label for="room-selection">选择房间偏好</label> <select id="room-selection" name="room_preference" required> <option value="">从列表中选择一个房间</option> <option value="connecting">正在连接</option> <option value="adjoining">相邻</option> <option value="adjacent">相邻</option> </select> </div> <hr> <div class="elem-group"> <label for="message">还有什么?</label> <textarea id="message" name="visitor_message" placeholder="Tell us anything else that might be important." required> </textarea> </div> <button type="submit">预订房间</button> </form>
我们使用了两种基本模式来检查提供的姓名和电话号码是否有效。电话号码遵循不同的格式,具体取决于区域设置。这意味着您必须相应地更新模式属性的值。
我们还将***和儿童的最小值分别设置为 1 和 0。这样,我们可以防止人们错误地添加负值。
您可以在此表单中添加更多元素,用于酒店提供的其他服务,如接送、客房服务等。
现在,访问者可以将入住和退房日期设置为过去的值。我们可以通过简单地设置 min入住日期和退房日期的属性值来避免这种情况。在我们的例子中,我们会将可能的最短入住日期设置为当天。min退房日期属性的值 将是入住日期。
下面的JavaScript代码将为我们处理所有逻辑。月份是从零开始的,因此我们将返回值加 1 以获得实际月份。返回的日期值可以是 1 到 31 之间的任何整数,具体取决于当前时间。
当日期和月份值是个位数时,它们会用一个额外的 0 填充,以便最终字符串保持有效格式。
var currentDateTime = new Date(); var year = currentDateTime.getFullYear(); var month = (currentDateTime.getMonth() + 1); var date = currentDateTime.getDate(); if(date < 10) { date = '0' + date; } if(month < 10) { month = '0' + month; } var dateTomorrow = year + "-" + month + "-" + date; var checkinElem = document.queryselector("#checkin-date"); var checkoutElem = document.querySelector("#checkout-date"); checkinElem.setAttribute("min", dateTomorrow); checkinElem.onchange = function () { checkoutElem.setAttribute("min", this.value); }
以下 CodePen 演示向我们展示了添加上述标记和 javaScript 功能后表单的行为方式。
&amp;amp;amp;lt;br&amp;amp;amp;gt;
使用 PHP 通过电子邮件发送表单数据
最后一步是从我们的表单中收集所有数据,并通过电子邮件将其发送给相关人员。这实际上很容易做到。$_POST首先,我们使用变量收集所有信息。一旦我们获得所需的信息,我们就会对其进行清理以删除任何恶意内容。最后,我们创建 HTML 电子邮件的正文,然后使用PHP 中的 mail() 函数将其发送。
以下代码将进入一个名为reservation.php的文件。action如果您在上一节中更改了表单的属性值,则文件名将有所不同 。
<?php if($_POST) { $visitor_name = ""; $visitor_email = ""; $visitor_phone = ""; $total_adults = ""; $total_children = ""; $checkin_date = ""; $checkout_date = ""; $room_type = ""; $visitor_message = ""; if(isset($_POST['visitor_name'])) { $visitor_name = filter_var($_POST['visitor_name'], FILTER_SANITIZE_STRING); } if(isset($_POST['visitor_email'])) { $visitor_email = str_replace(array("\r", "\n", "%0a", "%0d"), '', $_POST['visitor_email']); $visitor_email = filter_var($visitor_email, FILTER_VALIDATE_EMAIL); } if(isset($_POST['visitor_phone'])) { $visitor_phone = filter_var($_POST['visitor_phone'], FILTER_SANITIZE_NUMBER_INT); } if(isset($_POST['total_adults'])) { $total_adults = filter_var($_POST['total_adults'], FILTER_SANITIZE_NUMBER_INT); } if(isset($_POST['total_children'])) { $total_children = filter_var($_POST['total_children'], FILTER_SANITIZE_NUMBER_INT); } if(isset($_POST['checkin'])) { $checkin_date = filter_var($_POST['checkin'], FILTER_SANITIZE_NUMBER_INT); } if(isset($_POST['checkout'])) { $checkout_date = filter_var($_POST['checkout'], FILTER_SANITIZE_NUMBER_INT); } if(isset($_POST['room_preference'])) { $room_type = filter_var($_POST['room_preference'], FILTER_SANITIZE_STRING); } if(isset($_POST['visitor_message'])) { $visitor_message = htmlspecialchars($_POST['visitor_message']); } $recipient = "booking@demo.com"; $headers = 'MIME-Version: 1.0' . "\r\n" .'Content-type: text/html; charset=utf-8' . "\r\n" .'From: ' . $visitor_email . "\r\n"; $email_content = "<html><body>"; $email_content .= "<table style='font-family: Arial;'> <tbody><tr><td style='background: #eee; padding: 10px;'>Visitor Name</td> <td style='background: #fda; padding: 10px;'>$visitor_name</td></tr>"; $email_content .= "<tr><td style='background: #eee; padding: 10px;'>Visitor Email</td> <td style='background: #fda; padding: 10px;'>$visitor_email</td></tr>"; $email_content .= "<tr><td style='background: #eee; padding: 10px;'>Visitor Phone</td> <td style='background: #fda; padding: 10px;'>$visitor_phone</td></tr>"; $email_content .= "<tr><td style='background: #eee; padding: 10px;'>Total Adults</td> <td style='background: #fda; padding: 10px;'>$total_adults</td></tr>"; $email_content .= "<tr><td style='background: #eee; padding: 10px;'>Total Children</td> <td style='background: #fda; padding: 10px;'>$total_children</td></tr>"; $email_content .= "<tr><td style='background: #eee; padding: 10px;'>Check-in Date</td> <td style='background: #fda; padding: 10px;'>$checkin_date</td></tr>"; $email_content .= "<tr><td style='background: #eee; padding: 10px;'>Check-out Date</td> <td style='background: #fda; padding: 10px;'>$checkout_date</td></tr>"; $email_content .= "<tr><td style='background: #eee; padding: 10px;'>Room Type</td> <td style='background: #fda; padding: 10px;'>$room_type</td></tr></tbody></table>"; $email_content .= "<p style='font-family: Arial; font-size: 1.25rem;'> <strong>Special Request from $visitor_name —</strong> <i> $visitor_message</i>.</p>"; $email_content .= '</body></html>'; echo $email_content; if(mail($recipient, "Hotel Room Reservation confirmation", $email_content, $headers)) { echo '<p>Thank you for booking a hotel room with us. We hope you have a pleasant stay.</p>'; } else { echo '<p>We are sorry but the booking confirmation email did not go through.</p>'; } } else { echo '<p>Something went wrong</p>'; } ?>
我们首先清理访问者的姓名和电子邮件地址。FILTER_SANITIZE_NUMBER_INT之后,我们会对使用旗帜的入住日期、退房日期、***人数和儿童人数进行消毒。此标志从输入中删除除数字和+ 或-符号之外的所有字符。它非常适合清理我们的日期,因为我们希望它们采用YYYY-MM-DD格式——只有数字和减号。您应该阅读 PHP 文档以了解所有清理和验证标志。
一旦我们清理了所有输入,我们就开始准备我们的标题。通过包含Content-type: text/html在电子邮件标题中,我们将能够在我们的电子邮件中使用 HTML 标签。对于本教程,我们保持简单,并在表格中显示所有用户数据。预订酒店房间的人留下的任何特殊信息都显示在表格下方。
最后的想法
在本教程中,我们介绍了创建 PHP 电子邮件脚本的基础知识,该脚本可以从人们填写的表单中发送数据。创建表单时,正确布置元素并确保您只询问实际需要的信息是很重要的。使用布局不当的元素创建不必要的长表单会阻止用户填写表单。您还应该确保正确命名每个元素。正确清理用户输入也很重要。