wordpress插件_在5分钟内建立您自己的WordPress联络表单插件

最新推荐文章于 2023-05-17 08:49:50 发布

culi3182

最新推荐文章于 2023-05-17 08:49:50 发布

阅读量3k

点赞数

文章标签： python java php 大数据数据分析

原文链接：https://www.sitepoint.com/build-your-own-wordpress-contact-form-plugin-in-5-minutes/

版权

wordpress插件

Most websites are typically designed to comply with standard web practices by including a dedicated page where a contact form is located. This provides visitors with an easy way to reach out to the site owner.

大多数网站通常都设计为符合标准的网络惯例，方法是在其中包含联系表的专用页面。这为访问者提供了一种与网站所有者联系的简便方法。

In simple terms, a contact form has a set of questions and fields which are filled in by a visitor. The information is usually automatically sent via email to the site administrator or another nominated email account. It is worth noting that this email address isn’t displayed to visitors, so using a contact form typically reduces email spam from bots that harvest naked email addresses on the Internet. Contact forms play a very important role on a website, where they are used for collecting feedback, enquiries and other data from users.

简而言之，联系表具有一组由访客填写的问题和字段。该信息通常会自动通过电子邮件发送给站点管理员或另一个指定的电子邮件帐户。值得注意的是，该电子邮件地址不会显示给访问者，因此使用联系表单通常可以减少来自在互联网上收集裸电子邮件地址的漫游器的电子邮件垃圾邮件。联系表格在网站上扮演着非常重要的角色，用于收集用户的反馈，查询和其他数据。

If your website is powered by WordPress, there are numerous plugins that seamlessly integrate a contact form on your website.

如果您的网站由WordPress提供支持，则有许多插件可以无缝集成您网站上的联系表单 。

In this article, I will provide a list of some free WordPress contact form plugins. I will also discuss why you should consider rolling your own contact form. Then, I will provide you with a short tutorial showing you how to build your own WordPress contact form plugin.

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

WordPress联系人表格插件 (WordPress Contact Form Plugins)

Before we get started, we’re going to go over a few of the popular free contact form plugins available in the WordPress Plugin Directory. These are great to use, but even better to learn from when you’re getting started building your own plugins.

在开始之前，我们将介绍WordPress插件目录中提供的一些流行的免费联系表单插件。这些功能很好用，但是从开始构建自己的插件时开始学习，甚至更好。

Below are some of the most highly rated free contact form plugins for WordPress:

以下是WordPress评分最高的免费联系表格插件：

Contact Form 7 – This is the second most popular plugin with over 18 million downloads, it could almost be considered as the de facto contact form plugin for a WordPress website. Contact Form 7 can manage multiple contact forms and you can customize the form and the email contents with simple markup. The form features include Ajax-powered submission, CAPTCHA, Akismet spam filtering and lots more.

联系表格7 –这是第二大最受欢迎的插件，下载量超过1800万，几乎可以认为是WordPress网站的事实上的联系表格插件。联系人表格7可以管理多个联系人表格，您可以使用简单的标记自定义表格和电子邮件内容。表单功能包括Ajax支持的提交，CAPTCHA，Akismet垃圾邮件过滤等等。
Contact Form to Email – This plugin not only creates contact forms and sends the data to a specified email address it also saves the contact form data into a database, providing printable reports and the option to export the selected data to CSV/Excel file.

联系人表格到电子邮件 –该插件不仅创建联系人表格并将数据发送到指定的电子邮件地址，还将联系人表格数据保存到数据库中，提供可打印的报告以及将所选数据导出到CSV / Excel文件的选项。
FormGet Contact Form – An easy online drag and drop contact form builder tool. All you need to do is click on the fields that you want in your form, and within few seconds your contact form is ready.

FormGet Contact Form –一个简单的在线拖放联系表单生成器工具。您所需要做的就是单击表单中所需的字段，几秒钟内您的联系表单就准备好了。
Bestwebsoft Contact Form – Allows you to implement a feedback form to a web page or a post effortlessly. It is extremely easy, and you won’t require any additional settings, even though there are some available to play with.

Bestwebsoft联系表单 –允许您轻松地将反馈表单实施到网页或帖子中。这非常简单，即使有一些可用设置，您也不需要任何其他设置。

为什么要滚动自己的联系表单插件？ (Why Roll Your Own Contact Form Plugin?)

成为更好的开发者 (Becoming a Better Developer)

Developing your own WordPress plugin helps you better understand how WordPress works ‘under the hood’ which can help you to become a more experienced web developer. While there are tens of thousands of plugins in the WordPress Plugin Directory to use, being able to modify and extend other plugins is a very useful skill.

开发自己的WordPress插件可以帮助您更好地了解WordPress的“幕后工作原理”，从而可以帮助您成为更有经验的Web开发人员。尽管WordPress插件目录中有成千上万的插件可供使用，但是能够修改和扩展其他插件是一项非常有用的技能。

建立更好的形式 (Building a Better Form)

Many WordPress contact form plugins are bloated. They include many features that you may never use. Heavy usage of JavaScript and CSS files are also common in some of the standard contact form plugins. This increases the number of HTTP requests which adversely affects WordPress performance.

许多WordPress联系人表单插件are肿。它们包括许多您可能永远不会使用的功能。在某些标准联系表单插件中，也经常使用JavaScript和CSS文件。这增加了HTTP请求的数量，这会对WordPress性能产生不利影响。

According to Yahoo’s performance rules:

根据Yahoo的性能规则：

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

最终用户响应时间的80％用于前端。大部分时间都与下载页面中的所有组件有关：图像，样式表，脚本，Flash等。减少组件的数量又减少了呈现页面所需的HTTP请求的数量。这是加快页面速度的关键。

If you are like me, and you desire a simple contact form plugin that just works, read on. I’ll guide you through the simple process of develop your own plugin so you can kiss goodbye bloated plugins. In this example no extra CSS and JavaScript files are required, the validation done using HTML5.

如果您像我一样，并且想要一个可以正常使用的简单联系表单插件，请继续阅读。我将指导您完成开发自己的插件的简单过程，以便您可以告别膨胀的插件。在此示例中，不需要额外CSS和JavaScript文件，验证使用HTML5完成。

联系表格插件开发 (Contact Form Plugin Development)

In five minutes, you will learn how to develop a simple WordPress contact form, that’s a promise!

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

Ready? Set? Go!

准备？组？走！

All WordPress pluigns are PHP files, located in the /wp-content/plugins/ directory. In our example, the file will be called sp-form-example.php. I assume you’re comfortable with connecting to your server using FTP/SFTP/SCP or SSH.

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

If you want to follow along, simply create a file called sp-form-example.php (the final complete example will be available at the end of the article):

如果要继续学习，只需创建一个名为sp-form-example.php的文件(最终的完整示例将在本文结尾处提供)：

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

Next, we add the function html_form_code() that contains the contact form HTML:

接下来，我们添加函数html_form_code() ，其中包含联系表单HTML：

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

Basic validation was added to the form via the pattern input attribute.

通过pattern输入属性将基本验证添加到了表单。

The RegEX in the contact form does the following field validation:

联系人表单中的RegEX进行以下字段验证：

[a-zA-Z0-9 ]: only letters, spaces and numbers allowed in the name field; special symbols are deemed invalid.

[a-zA-Z0-9] ：名称字段中仅允许使用字母，空格和数字；特殊符号被视为无效。
[a-zA-Z ]: only letters and spaces are allowed in the subject field.

[a-zA-Z] ：主题字段中只能使用字母和空格。
The email form control validates the email field hence there is no need for a pattern attribute.

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

For more information on how this works, read my article on Client-Side Form Validation with HTML5 to understand how the pattern attribute assists with form validation.

有关如何工作的更多信息，请阅读我的HTML5客户端表单验证文章，以了解pattern属性如何协助表单验证。

赶快！ (Hurry Up!)

Okay, how many minutes do we have left? Four minutes! We still have time to get this over with.

好吧，我们还剩多少分钟？四分钟！我们还有时间解决这个问题。

The function deliver_mail() sanitizes the form data and sends the mail to the WordPress administrator’s email address.

函数deliver_mail()表单数据并将邮件发送到WordPress管理员的电子邮件地址。

function deliver_mail() {

    // if the submit button is clicked, send the email
    if ( isset( $_POST['cf-submitted'] ) ) {

        // sanitize form values
        $name    = sanitize_text_field( $_POST["cf-name"] );
        $email   = sanitize_email( $_POST["cf-email"] );
        $subject = sanitize_text_field( $_POST["cf-subject"] );
        $message = esc_textarea( $_POST["cf-message"] );

        // get the blog administrator's email address
        $to = get_option( 'admin_email' );

        $headers = "From: $name <$email>" . "\r\n";

        // If email has been process for sending, display a success message
        if ( wp_mail( $to, $subject, $message, $headers ) ) {
            echo '<div>';
            echo '<p>Thanks for contacting me, expect a response soon.</p>';
            echo '</div>';
        } else {
            echo 'An unexpected error occurred';
        }
    }
}

The sanitation of the form data is done by the following WordPress internal functions:

表单数据的卫生处理由以下WordPress内部函数完成：

sanitize_text_field(): Sanitize the data from user input.

sanitize_text_field() ：清除用户输入中的数据。
sanitize_email(): Strips out all characters that are not allowable in an email.

sanitize_email() ：删除电子邮件中不允许的所有字符。
esc_textarea(): Escape the message text area values.

esc_textarea() ：转义消息文本区域值。

The code get_option( 'admin_email' ) programmatically retrieves the WordPress administrator’s email address from the database where the email will be delivered to.

代码get_option( 'admin_email' )编程方式从将电子邮件发送到的数据库中检索WordPress管理员的电子邮件地址。

Don’t want the contact form to send the mail to admin? Simply set the variable $to to the desired email address.

不想联系表格将邮件发送给管理员？只需将变量$to设置为所需的电子邮件地址即可。

If the email has successfully been processed without any errors by the function wp_mail() , the text Thanks for contacting me, expect a response soon will be shown, otherwise An unexpected error occurred is displayed.

如果通过函数wp_mail()成功地处理了电子邮件，没有任何错误，则文本“ 感谢您与我联系，希望很快就会显示响应，否则会出现意外错误” 。

剩下1分钟和30秒 (1 Minute and 30 Seconds Left)

The function cf_shortcode() is the callback function that is called when the contact form shortcode [sitepoint_contact_form] is active.

函数cf_shortcode()是在联系表单简短代码[sitepoint_contact_form]处于活动状态时调用的回调函数。

function cf_shortcode() {
    ob_start();
    deliver_mail();
    html_form_code();

    return ob_get_clean();
}

The above functions calls the html_form_code() and deliver_mail() functions to display the contact form HTML form and validate the form data respectively.

上面的函数调用html_form_code()和deliver_mail()函数来显示联系人表单HTML表单并分别验证表单数据。

Finally, the shortcode [sitepoint_contact_form] is registered to WordPress. So simply add:

最后，简码[sitepoint_contact_form]已注册到WordPress。所以只需添加：

add_shortcode( 'sitepoint_contact_form', 'cf_shortcode' );

3，2，1…时间到了！ (3, 2, 1… Time’s Up!)

Congratulations, we have successfully developed our own WordPress contact form plugin and I have fulfilled my earlier promise.

恭喜，我们已经成功开发了自己的WordPress联系人表单插件，并且我已经实现了我先前的承诺。

Now, to use this plugin on your website, simply activate it in under the ‘Plugins’ section of your WordPress dashboard, then create a post or page and then simply add the shortcode where you want the form to appear [sitepoint_contact_form].

现在，要在您的网站上使用此插件，只需在WordPress仪表板的“插件”部分下将其激活，然后创建一个帖子或页面，然后在您希望表单出现的地方添加简码即可[sitepoint_contact_form] 。

If you then preview the page and you should see the contact form displayed as shown below.

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

结论 (Conclusion)

To further understand how the plugin was built and how to implement it on your WordPress site, copy the code below, paste in a file and upload it to your /wp-content/plugins/ directory.

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

Here’s the entire plugin example:

这是整个插件示例：

<?php
/*
Plugin Name: Example Contact Form Plugin
Plugin URI: http://example.com
Description: Simple non-bloated WordPress Contact Form
Version: 1.0
Author: Agbonghama Collins
Author URI: http://w3guy.com
*/

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

function deliver_mail() {

	// if the submit button is clicked, send the email
	if ( isset( $_POST['cf-submitted'] ) ) {

		// sanitize form values
		$name    = sanitize_text_field( $_POST["cf-name"] );
		$email   = sanitize_email( $_POST["cf-email"] );
		$subject = sanitize_text_field( $_POST["cf-subject"] );
		$message = esc_textarea( $_POST["cf-message"] );

		// get the blog administrator's email address
		$to = get_option( 'admin_email' );

		$headers = "From: $name <$email>" . "\r\n";

		// If email has been process for sending, display a success message
		if ( wp_mail( $to, $subject, $message, $headers ) ) {
			echo '<div>';
			echo '<p>Thanks for contacting me, expect a response soon.</p>';
			echo '</div>';
		} else {
			echo 'An unexpected error occurred';
		}
	}
}

function cf_shortcode() {
	ob_start();
	deliver_mail();
	html_form_code();

	return ob_get_clean();
}

add_shortcode( 'sitepoint_contact_form', 'cf_shortcode' );

?>

This is just a simple example. If you’re interested in learning more about plugin development, here is some further recommended reading:

这只是一个简单的例子。如果您有兴趣了解有关插件开发的更多信息，请进一步阅读以下建议：