无论您拥有或管理哪种类型的网站,您都可能需要联系表格。联系表格可以帮助您的访问者请求报价、询问信息或分享他们在使用您的网站时遇到的任何提示或问题。
在本教程中,我们的重点是从头到尾用 php 创建一个功能齐全的联系表单。我们将从需要添加的所有字段的标记和联系表单的基本样式开始。之后,我们将继续使用 PHP 代码来实现其功能。
但是,如果您想了解如何创建联系表单,请继续阅读!它可能比你想象的要容易。
我们的html联系表的标记
创建我们自己的联系表单的第一步是对标记进行编码。一旦我们在表单中获得了我们想要的所有元素的列表,我们就会开始这样做。我们需要一个输入字段来填写与我们联系的人的姓名,我们还需要一个字段来填写他们的电子邮件地址,以便我们在需要时回复他们。我们还需要一个输入字段,用于人们与您联系的原因以及textarea 用户可以在其中键入消息的位置。
如果您管理的网站非常受欢迎,您将通过联系表格收到大量电子邮件。为了确保合适的人能够阅读这些电子邮件并快速回复,您需要更多字段。例如,您可以添加一个字段来确定访问者想要联系的部门,例如营销、支持或计费。此信息稍后可用于适当地路由电子邮件。最终,这可能会帮助您更快地回复并更有效地对电子邮件进行分类。
您添加到联系表单的字段数量取决于您运行的网站类型,但请确保不要过度使用。强迫访问者填写太多详细信息可能会阻止他们完全与您联系。
让我们编写 HTML 代码,将我刚才提到的所有字段添加到我们的联系表单中。
<form action="contact.php" method="post"> <div class="elem-group"> <label for="name">Your 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">Your E-mail</label> <input type="email" id="email" name="visitor_email" placeholder="john.doe@email.com" required> </div> <div class="elem-group"> <label for="department-selection">Choose Concerned Department</label> <select id="department-selection" name="concerned_department" required> <option value="">Select a Department</option> <option value="billing">Billing</option> <option value="marketing">Marketing</option> <option value="technical support">Technical Support</option> </select> </div> <div class="elem-group"> <label for="title">Reason For Contacting Us</label> <input type="text" id="title" name="email_title" required placeholder="Unable to Reset my Password" pattern=[A-Za-z0-9\s]{8,60}> </div> <div class="elem-group"> <label for="message">Write your message</label> <textarea id="message" name="visitor_message" placeholder="Say whatever you want." required></textarea> </div> <button type="submit">Send Message</button> </form>
在继续之前,我想快速总结一下上述标记中一些重要属性的含义。表单中的action 属性决定了表单数据需要发送到哪里。如果您没有 action 属性,则数据将发送回相同的 URL。这里我们使用 了contact.php,所以表单数据将被发送到那个脚本。
表单中不同输入元素的 name 属性用于访问服务器端的元素值。例如,在上面的表单中,您可以 $_POST['visitor_name'] 在 contact.php中获取与您联系的访问者的姓名。
我们使用该 placeholder 属性为用户提供表单中每个字段的预期输入的基本概念。该 required 属性确保在用户点击表单上的提交按钮之前没有任何重要字段留空。
该 pattern 属性用于对可以进入某些字段的值类型强制执行一些规则。在我们的例子中,我们只允许用户在他们提交的名称中使用字母和空格字符。我们还将可接受的字符总数限制在 3 到 20 之间。您使用的模式将取决于您希望用户输入的类型。
下面的 CodePen 演示向我们展示了带有上述标记和一点css的简单联系表单 PHP 的样子。
使用 PHP 使我们的 HTML 联系表单功能化
现在,我们的 PHP 联系表单没有做任何有用的事情。访问者可以填写并点击发送消息按钮,但我们不会收到任何信息,因为没有服务器端代码来处理表单提供的信息。在本节中,我们将使用 PHP 使我们的自定义联系表单功能化。
请参阅 Pen <a href=" https://codepen.io/tutsplus/pen/wRqzOY"> ;基本联系表</a> 作者 Envato Tuts+ (<a href="https://codepen.io/tutsplus">@tutsplus</a>) 在 <a href="https://codepen.io">CodePen</a> ;.
首先创建一个 contact.php 文件并将以下代码放入其中。
<?php if($_POST) { $visitor_name = ""; $visitor_email = ""; $email_title = ""; $concerned_department = ""; $visitor_message = ""; $email_body = "<div>"; if(isset($_POST['visitor_name'])) { $visitor_name = filter_var($_POST['visitor_name'], FILTER_SANITIZE_STRING); $email_body .= "<div> <label><b>Visitor Name:</b></label> <span>".$visitor_name."</span> </div>"; } 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); $email_body .= "<div> <label><b>Visitor Email:</b></label> <span>".$visitor_email."</span> </div>"; } if(isset($_POST['email_title'])) { $email_title = filter_var($_POST['email_title'], FILTER_SANITIZE_STRING); $email_body .= "<div> <label><b>Reason For Contacting Us:</b></label> <span>".$email_title."</span> </div>"; } if(isset($_POST['concerned_department'])) { $concerned_department = filter_var($_POST['concerned_department'], FILTER_SANITIZE_STRING); $email_body .= "<div> <label><b>Concerned Department:</b></label> <span>".$concerned_department."</span> </div>"; } if(isset($_POST['visitor_message'])) { $visitor_message = htmlspecialchars($_POST['visitor_message']); $email_body .= "<div> <label><b>Visitor Message:</b></label> <div>".$visitor_message."</div> </div>"; } if($concerned_department == "billing") { $recipient = "billing@domain.com"; } else if($concerned_department == "marketing") { $recipient = "marketing@domain.com"; } else if($concerned_department == "technical support") { $recipient = "tech.support@domain.com"; } else { $recipient = "contact@domain.com"; } $email_body .= "</div>"; $headers = 'MIME-Version: 1.0' . "\r\n" .'Content-type: text/html; charset=utf-8' . "\r\n" .'From: ' . $visitor_email . "\r\n"; if(mail($recipient, $email_title, $email_body, $headers)) { echo "<p>Thank you for contacting us, $visitor_name. You will get a reply within 24 hours.</p>"; } else { echo '<p>We are sorry but the email did not go through.</p>'; } } else { echo '<p>Something went wrong</p>'; } ?>
我们已经对用户输入进行了一些客户端验证。但是,执行服务器端验证也总是更安全。我们使用该 filter_var() 功能来清理用户提供的名称。以类似的方式,我们还清理了 $email_title and 的值$concerned_department。您可以 使用该 filter_var()功能来验证或清理 所有类型的用户输入。我们还 使用该 htmlspecialchars() 函数对 发送给我们的访客消息中的所有特殊 HTML 字符进行编码。
的值 $recipient 基于变量的值 $concerned_department。这样,我们确保只有真正应该调查此事的人才能收到电子邮件。
此外,我们使用 $email_body 变量来格式化电子邮件正文,这将是电子邮件的主要内容。当我们以 HTML 格式发送电子邮件时,我们使用 HTML 来格式化电子邮件正文内容。
最后,我们 使用该 mail() 功能发送一封电子邮件,其中包含访问者希望我们知道的信息。成功发送电子邮件后,我们会让访问者知道我们已收到他们的电子邮件,并且很快就会与他们联系。
当您处理用户数据或输入时,安全性是最重要的。您是否应该验证或清理用户输入取决于输入是什么以及您希望如何使用它。
验证只是检查用户输入是否遵循特定的规则集。例如,验证可以检查一个人的名字是否不包含任何数字。
清理用于删除任何构成安全风险的违规字符。例如,试图通过表单与您联系的恶意用户可能会在表单中添加一个 script 标签, textarea 让您下载有害脚本。当您的网站拥有所有人都可以访问的公共论坛时,这一点尤其令人担忧。
但是,在删除用户输入中不需要的字符时,您必须非常小心。例如,您可能决定 filter_var($user_input, FILTER_SANITIZE_STRING); 在某些输入上使用来 剥离所有标签并编码特殊字符。但是,此标志也会删除合法用户输入的无害字符。这是一个例子:
<?php $string = 'One of your posts about inequalities mentioned that when x < y and y < z then x < z.'; // Output: One of your posts about inequalities mentioned that when x echo filter_var($string, FILTER_SANITIZE_STRING); // Output: One of your posts about inequalities mentioned that when x < y and y < z then x < z. echo htmlspecialchars($string); ?>
如果您的网站有很多与数学相关的主题,那么用户在联系表格或论坛帖子中写 < 或 > 将是相对常见的。在这种情况下,将 FILTER_SANITIZE_STRING 标志与 filter_var() 函数一起使用将从消息中删除必要的信息。
我要说明的一点是,即使您应该始终验证或清理用户数据,请确保您没有在此过程中剥离关键信息。
简单联系表单 PHP 脚本
上面的教程值得一读,因为学习如何创建一个简单的 PHP 联系表单是一项有用的技能。但是,如果您时间紧迫或只想探索您的选择,请查看这些自定义联系表单 PHP 模板。
1. Quform:响应式 ajax 联系表
Quform 是一个简单且响应迅速的 PHP 电子邮件联系表单示例。该模板易于使用,适用于多种设备屏幕尺寸。它时尚且无需重新加载即可工作。这是一个节省用户时间的步骤,使他们更容易填写您的表单。查看商品页面上的其他Quform 功能。
2. PHP 表单生成器
您是否希望在 PHP 中创建 Web 联系表单?那么它并没有比使用 PHP Form Builder 更容易。下载包括一个拖放表单生成器,使创建表单的过程比以往更容易。它非常适合 PHP 初学者和经验丰富的程序员和 Web 开发人员。您可以通过一次下载制作的表格列表很长,使其成为满足您所有需求的一站式商店。
3. Easy Forms:高级表单生成器和管理器
当然,Easy Forms 可以与其他简单的联系表单 PHP 模板相媲美。它还具有具有现代 UI 的拖放式表单构建器。这对初学者和时间紧迫的专家都很友好。您可以在 PHP 中创建表单并将其发布到任何地方,包括wordpress、drupal或静态 HTML 网页。
最后的想法
在 PHP 中创建一个基本的联系表单非常简单。您首先编写为用户姓名、电子邮件地址、电话号码等信息创建输入元素所需的 HTML。下一步是编写 CSS 以确保联系表单与网站的其余部分完美融合。最后一步涉及编写 PHP 代码,该代码将从联系表单中获取信息并将其安全地邮寄给您。
- 1. Quform:响应式 ajax 联系表
- 2. PHP 表单生成器
- 3. Easy Forms:高级表单生成器和管理器