How to Add and Customize HTML Forms in WordPress: Detailed Tutorials

什么是 HTML 表单？为什么需要它们？

HTML 表单是一个允许用户输入和提交数据的区域，常用于收集用户信息，如姓名、电子邮件地址、反馈和订单信息。与 WordPress 表单插件不同，HTML 表单是通过手动编写 HTML 代码实现的，这使得其更具控制力和定制性。使用 HTML 表单，可以自由设置文本框、复选框、单选按钮等字段，同时控制表单的布局和样式。

使用 HTML 表单的优势

1. performance optimization：HTML 表单的代码轻巧，加载速度快，适合对性能要求较高的网站。
2. 完全控制：通过手写 HTML 代码，可以精确控制表单的外观和功能。
3. 灵活定制：HTML 表单可以灵活地根据需求进行定制，没有插件的功能限制。

将 HTML 表单添加到 WordPress 的两种方法

方法一：使用 HTML 表单插件

对于没有编码经验的用户，使用 HTML 表单插件是最简单的方法。如使用 HTML Forms 插件。该插件可在 WordPress 仪表板中快速创建和配置表单，适合希望快速完成设置的用户。

Steps:

1. Installation of plug-ins：在 WordPress 仪表板中导航到插件库，搜索并安装 HTML Forms Plug-ins.

2. Creating a new form：激活插件后，导航到 HTML Forms > Add New Form，输入表单名称，如“Example Form”，然后点击“创建表单".

3. 配置表单字段：在编辑页面中，可以通过选项卡添加文本、日期、复选框等字段到表单。调整字段的顺序和删除不需要的字段，确保表单布局符合预期。

4. Posting Forms：保存更改后，使用short code将表单插入到页面或文章中，发布页面后即可在前端看到表单效果。

Attention:HTML 表单不支持电子邮件营销服务集成。因此，需要手动将用户的电子邮件地址添加到你的邮件列表中。

方法二：使用 WPForms 将自定义 HTML 添加到 WordPress 表单

如果希望在表单中添加自定义 HTML 代码，WPForms 是一个理想的选择。尽管 WPForms 是拖放式表单生成器，它允许用户在表单中插入 HTML 代码片段，以实现更多个性化效果。

Steps:

1. Installation of WPForms plugin: Search for and install in the WordPress plugin repository WPForms Plug-ins.

2. Creating a new form：激活插件后，导航至 WPForms > 添加新表单，并选择“简单的联系表单”模板。

3. 插入 HTML 字段：在表单生成器中，从左侧面板drag-and-drop (computing)“HTML”字段至表单。可以在该字段中添加自定义代码片段，例如工具提示或特殊说明。

4. 自定义表单设置：设置通知和确认消息，确保在用户提交表单后，可以收到电子邮件通知，并在表单确认页面显示自定义消息。
5. Posting Forms：将 WPForms 表单embedding页面或文章中，更新页面即可上线。

上传自定义 HTML 页面到 WordPress

如果你有一个完整的 HTML 页面，例如静态模板或旧网站页面，可以通过上传 HTML page至 WordPress 来进行展示。将 HTML 文件及其关联的 CSS 和图像文件放在一个文件夹中，然后上传至 WordPress 根目录即可。