在5分钟内构建自己的WordPress联系表插件

钥匙要点

• >开发自己的WordPress联系表插件可以帮助您更好地了解WordPress的工作方式，提高网络开发技能并创建一个在没有不必要功能的情况下根据您的特定需求量身定制的表单。
>本文提供了有关如何为WordPress创建简单的，非斑点的联系表插件的分步指南，包括如何编写PHP代码，向表单添加基本验证，并将表单数据发送到网站管理员的电子邮件地址。
• 通过在WordPress仪表板的“插件”部分中启动它，可以轻松地集成到任何WordPress网站中，并将提供的短代码添加到帖子或页面。
>
• >本文还讨论了WordPress插件目录中可用的一些流行的免费联系表插件，例如联系表7，联系电子邮件的联系表，formget Contact表单和BestWebSoft Contact表格。
• >大多数网站通常设计为符合标准的Web实践，其中包括一个专用页面所在的专用页面。这为访问者提供了一种与网站所有者联系的简便方法。
>

>简单地说，联系表具有一组问题和字段，这些问题和字段由访客填写。该信息通常会通过电子邮件自动发送到网站管理员或其他提名的电子邮件帐户。值得注意的是，此电子邮件地址没有向访问者展示，因此使用联系表通常会减少从互联网上收获裸露电子邮件地址的机器人中的电子邮件垃圾邮件。联系表在网站上扮演着非常重要的角色，它们用于收集用户的反馈，查询和其他数据。

>

如果您的网站由WordPress提供动力，则有许多插件无缝地集成了您的网站上的联系表。

在本文中，我将提供一些免费的WordPress联系表插件的列表。我还将讨论为什么您应该考虑滚动自己的联系表。然后，我将为您提供一个简短的教程，向您展示如何构建自己的WordPress联系表格插件。

WordPress联系表插件

>在开始之前，我们将介绍WordPress插件目录中提供的一些流行的免费触点插件。这些非常适合使用，但是当您开始构建自己的插件时，甚至可以从中学习。

>

>下面是WordPress的一些最高评级的免费触点表插件：>

>

联系表7 - 这是第二个最受欢迎的插件，下载超过1800万个插件，几乎可以被视为WordPress网站的事实上的联系表格插件。联系表7可以管理多个联系表格，您可以使用简单的标记自定义表格和电子邮件内容。表单功能包括Ajax驱动的提交，CAPTCHA，AKISMET垃圾邮件过滤等等。

>

>

>电子邮件表格 - 此插件不仅创建联系表格并将数据发送到指定的电子邮件地址，还将联系表格数据保存到数据库中，提供可打印的报告，并将所选数据导出到csv/excel文件。

>

> Formget联系表格 - 简单的在线拖放联系人表单构建器工具。您需要做的就是单击您所需的字段，并在几秒钟内您的联系表格准备就绪。

BestWebsoft联系表格 - 允许您轻松地将反馈表实现到网页或帖子。这非常容易，即使有一些可以玩的方法。

为什么要滚动您自己的联系表插件？

>

成为更好的开发人员

>开发自己的WordPress插件可以帮助您更好地了解WordPress的“引擎盖下”的工作方式，从而可以帮助您成为一个经验丰富的Web开发人员。虽然WordPress插件目录中有成千上万的插件要使用，但能够修改和扩展其他插件是一项非常有用的技能。

构建更好的形式

许多WordPress触点表插件被肿了。它们包含许多您可能永远不会使用的功能。 JavaScript和CSS文件的大量使用在某些标准触点表插件中也很常见。这增加了对WordPress性能的不利影响的HTTP请求的数量。

>

根据雅虎的绩效规则：

最终用户响应时间的80％用于前端。大部分时间都在下载页面中的所有组件时都捆绑在一起：图像，样式表，脚本，闪存等。减少组件的数量依次减少了呈现页面所需的HTTP请求数量。这是更快页面的关键。

>

如果您像我一样，并且想要一个简单的触点表格插件，该插件刚刚起作用，请继续阅读。我将指导您开发自己的插件的简单过程，以便您可以亲吻Goodbye Bloated插件。在此示例中，不需要额外的CSS和JavaScript文件，使用HTML5进行验证。

联系表格插件开发

>在五分钟内，您将学习如何开发简单的WordPress联系表格，这是一个承诺！

>

准备了吗？放？走！

>所有WordPress pluigns都是PHP文件，位于/wp-content/plugins/Directory中。在我们的示例中，该文件将称为SP-form-example.php。我认为您喜欢使用FTP/SFTP/SCP或SSH连接到服务器。

>

如果您想关注，只需创建一个称为SP-Form-example.php的文件（最终的完整示例将在文章的末尾可用）：

>

接下来，我们添加包含联系人表格html的函数html_form_code（）

通过模式输入属性添加了基本验证。

>

触点表中的正则表达式进行以下字段验证：>

• [A-ZA-Z0-9]：名称字段中仅允许的字母，空格和数字；特殊符号被视为无效。

• [A-ZA-Z]：主题字段中只允许字母和空格。

  >

  电子邮件表单控件验证了电子邮件字段，因此不需要模式属性。

• 有关此操作方式的更多信息，请阅读我有关使用HTML5的客户端形式验证的文章，以了解模式属性如何通过表单验证进行有助于。
快点！

好吧，我们剩下几分钟？四分钟！我们仍然有时间解决这个问题。

>函数funderive_mail（）对表单数据进行了消毒，并将邮件发送到WordPress管理员的电子邮件地址。

表单数据的卫生性是由以下WordPress内部功能完成的：

<span><span><?php
</span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span>

sanitize_text_field（）：从用户输入中消毒数据。

>

：删除电子邮件中不允许的所有字符。

> esc_textarea（）：逃脱

消息

文本区域值。

>代码get_option（'admin_email'）从数据库中编程地检索WordPress管理员的电子邮件地址。 不希望联系表将邮件发送到管理员？只需将变量$设置为所需的电子邮件地址即可。

如果函数wp_mail（）成功处理了电子邮件，则文本

>感谢您与我联系，希望很快会显示，否则会出现意外错误 1分钟和30秒左

>函数cf_shortcode（）是当触点表单快速代码[sitepoint_contact_form]处于活动状态时所调用的回调函数。

> >以上函数调用html_form_code（）和evry_mail（）函数以显示触点表单HTML表单并分别验证表单数据。 >最后，将快速代码[sitepoint_contact_form]注册到WordPress。因此，简单地添加：

3、2、1…时间到了！

>

恭喜，我们已经成功地开发了自己的WordPress联系表插件，我履行了我较早的诺言。

>

<span>function html_form_code() {
</span>    <span>echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Name (required) <br />';
</span>    <span>echo '<input type="text" name="cf-name" pattern="[a-zA-Z0-9 ]+" value="' . ( isset( $_POST["cf-name"] ) ? esc_attr( $_POST["cf-name"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Email (required) <br />';
</span>    <span>echo '<input type="email" name="cf-email" value="' . ( isset( $_POST["cf-email"] ) ? esc_attr( $_POST["cf-email"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Subject (required) <br />';
</span>    <span>echo '<input type="text" name="cf-subject" pattern="[a-zA-Z ]+" value="' . ( isset( $_POST["cf-subject"] ) ? esc_attr( $_POST["cf-subject"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Message (required) <br />';
</span>    <span>echo '<textarea rows="10" cols="35" name="cf-message">' . ( isset( $_POST["cf-message"] ) ? esc_attr( $_POST["cf-message"] ) : '' ) . '</textarea>';
</span>    <span>echo '</p>';
</span>    <span>echo '<p><input type="submit" name="cf-submitted" value="Send"/></p>';
</span>    <span>echo '</form>';
</span><span>}</span>

现在，要在网站上使用此插件，只需在WordPress仪表板的“插件”部分中激活它，然后创建一个帖子或页面，然后只需添加要显示表单的短代码[sitepoint_contact_form] 。

如果您然后预览页面，则应看到显示的联系表格如下所示。

结论

>进一步了解插件的构建方式以及如何在WordPress站点上实现，请复制下面的代码，将其粘贴到文件中，然后将其上传到您的/wp-content/plugins/Directory。

这是整个插件示例：

<span><span><?php
</span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span>

这只是一个简单的示例。如果您有兴趣了解有关插件开发的更多信息，则可以进一步推荐阅读：>

>简单的WordPress管理插件（教程）

• > WordPress小部件插件（教程）
• >官方WordPress codex插件开发人员文档
• sitepoint php频道
>让我在评论中知道您的想法和问题。

>关于构建自己的WordPress联系表插件的常见问题（常见问题解答）

>创建自己的WordPress联系表插件有什么好处？

>创建自己的WordPress联系表插件可让您完全控制表单的设计，功能和数据处理。您可以自定义表格以匹配您网站的美学，添加满足您特定需求的独特字段，并以适合您业务运营的方式管理收集的数据。此外，它消除了对第三方插件的需求，有时可能会减慢您的网站或带来安全风险。

>

>我是否需要编码技能来创建WordPress Contact表单插件？ ，需要PHP，HTML和CSS的基本知识才能创建WordPress联系表插件。但是，在我们的指南中简化了该过程，即使对于初学者来说，该过程也可以访问。如果您对编码不满意，则有许多WordPress表单构建器插件可提供更具用户友好的拖放界面。

>我如何确保我的自定义WordPress联系方式的安全性？

为了确保您的自定义WordPress联系表的安全性，您应该实施诸如数据验证和消毒之类的措施，使用Nonces进行表单提交以及使用CAPTCHA或类似垃圾邮件的保护技术。定期更新和监视对于维护表格的安全性也至关重要。

我可以在我的WordPress联系表中添加自定义字段吗？添加自定义字段的能力。这可以从简单的文本输入到更复杂的字段，例如文件上传，日期选择器，甚至自定义下拉列表。该过程涉及修改表格的HTML并在PHP代码中适当处理数据。

>

>如何设置我的WordPress联系表格以匹配我的网站的设计？您可以在表单元素中添加自定义类，并在主题的CSS文件或自定义CSS插件中定义样式。这使您可以控制表单的颜色，字体，布局等。

>

>如何处理通过我的WordPress触点表单提交的数据？

>通过WordPress Contact Contact表格提交的数据可以根据您的需求，以各种方式处理。您可以将数据发送到电子邮件地址，将其存储在WordPress数据库中，甚至可以与CRM Systems或电子邮件营销平台等第三方服务集成。这需要其他PHP编码来处理表单提交。

>我可以创建一个多步wordpress触点表单吗？

是的，创建一个多步wordpress触点表单是可能的，但需要更高级编码。这涉及创建多个表单页面，并使用会话或隐藏字段在步骤之间管理数据。多步表格可以通过将长表格分解为可管理的部分来改善用户体验。

>

>如何在WordPress触点表单中添加验证码？

>在您的WordPress联系表中添加验证码涉及涉及与Google Recaptcha这样的验证码服务集成。这需要从服务中获取API键，并将必要的HTML和PHP代码添加到您的表格中。 CAPTCHA有助于保护您的表格免受垃圾邮件和自动提交的影响。

>

>我可以创建响应式WordPress联系表格吗？

是的，创建响应式WordPress联系表涉及使用响应式CSS技术来确保表格外观外观良好，在所有设备尺寸上都可以正常运行。这包括为表单元素设置适当的宽度，边距和填充物，并使用媒体查询来调整不同屏幕尺寸的样式。

我如何使用WordPress联系表格进行故障排除问题？

故障排除问题使用您的WordPress联系表涉及确定问题，检查您的代码是否错误以及在不同条件下测试表格。常见问题包括表格不发送电子邮件，表格未正确显示或未保存的表单提交。如果您无法解决问题，请考虑向WordPress社区或专业开发人员寻求帮助。

以上是在5分钟内构建自己的WordPress联系表插件的详细内容。更多信息请关注PHP中文网其他相关文章！