在我们之前的文章中，我们列出了一些免费的插件和工具，您可以使用它们来创建自己的表单。使用免费工具创建表单的一个主要缺点是最终产品可能不像您期望的那样专业和精致。同样，对于没有大量编码经验的人来说，使用免费库编写自己的表单可能是不可能的。
智能表单概述
我们今天将用来创建自己的表单的工具是 Smart Forms（不再可用）。在撰写本文时，此表单框架已获得 3,819 次销售，基于 159 条评论的平均评分为 4.5。大多数在其网站中使用过该框架的买家都喜欢它的代码质量、功能、设计、灵活性和积极的客户支持。
这个框架的一些特点是：
具有 40 多个入门模板的响应式框架
多步形式和模态形式
日期选择器、时间选择器、月份选择器和颜色选择器小部件等
拖放文件上传
而这样的例子不胜枚举！
如果您想创建大量具有专业外观的表单，使用 Smart Forms 框架将是一个不错的选择。请查看框架主页上的所有功能和评论。
示例表格
为了展示您可以使用智能表单创建的内容，这里有几个具有不同主题和布局的示例。您可以选择将社交媒体登录按钮放在顶部或并排放置。有很多配色方案和三种不同的主题可供选择。
这是一个登录表单。
这是相同的登录表单，但颜色不同，顶部的社交登录按钮：
同样，这里有两种与下单相关的表格。如您所见，可以根据您的需要创建完全不同的布局。
在下一个表单中，您可以看到 Smart Forms 如何创建有吸引力的样式，例如大型产品选项卡。
下载文件包含数百个此类模板文件，因此您几乎总能找到适合您需求和样式的模板。不仅如此，如果您想为表单创建全新的布局，下载中的文档也很容易理解。
文件结构和其他基础知识
购买 Smart Forms 后，您将获得有关创建自己的表单并将其添加到您自己的网站的 zip 下载过程的详细文档。以下是您必须记住的一些关键点：
大多数样式都依赖于单个主css文件。确保在加载插件的 CSS 之前加载任何 CSS 重置文件。
表单支持 font Awesome 图标和 javascript 功能，如 AJAX 提交和表单验证。但是，如果您不需要这些功能，您可以禁用它们。
该框架为 IE8 加载了一个额外的后备样式表。
提取的存档中有三个文件夹，分别称为 dark、flat 和 light。这是不同形式的三个主要主题。每个主题包含三个不同的文件夹。这些都是：
AJAX PHP： 此文件夹包含有效的 AJAX PHP 表单，如联系表单、订单表单等。
JavaScript 增强功能：此文件夹包含用于表单验证的所有示例，以及日期选择器和其他小部件。
模板示例：此文件夹包含基于 html 和 CSS 的表单模板，可帮助您更快地构建表单。当您创建自己的表单时，这些模板也可以作为基本指南。
创建自己的表单时，第一步是使用以下行加载必要的 CSS 文件：
<link rel="stylesheet" type="text/css" href="css/smart-forms.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
您必须使用 smart-wrap和smart-forms类将表单包装在两个 div 元素中。
使用智能表单创建联系表单
该文档提供了有关创建不同类型表单的详细且易于遵循的指南，解释了如何添加文本输入元素、复选框、单选按钮和文件输入，并应用您选择的主题。
在本教程中，我们将创建一个带有蓝色主题和名称、电子邮件、主题和消息字段的联系表单。我们需要加载一个额外的 CSS 文件才能应用蓝色主题。
<link rel="stylesheet" type="text/css" href="css/smart-forms.css"> <link rel="stylesheet" type="text/css" href="css/smart-themes/blue.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
这是我们创建具有基本骨架结构的表单的初始标记：
<div class="smart-wrap"> <div class="smart-forms smart-container wrap-3"> <div class="form-header header-blue"> <h4><i class="fa fa-comments"></i>联系我们</h4> </div> <form method="post" action="/" id="contact-form"> <div class="form-body theme-blue"> </div> <div class="form-footer"> <button type="submit" class="button btn-blue push">提交</button> </div> </form> </div></div>
该类wrap-3用于控制您正在创建的表单的宽度。您可以将其设置在从wrap-0到 的任何位置wrap-4。除非您更改任何 CSS 规则，否则wrap-3 该类将创建最窄的表单，wrap-4并将覆盖 body 元素的整个宽度。wrap-5您可以使用其他类（如、等）创建自己的 CSS 规则wrap-6来调整表单宽度。
您必须为要应用header-{colorname}的主题申请一个课程。这colorname将与您加载的附加 CSS 文件相同。theme-bluebody 上的类也是如此。
pushed您可以通过添加类名（如、button-pointed、等）将样式应用于按钮元素。您可以在文档的“表单按钮”部分中button-left找到有关样式按钮的更多信息。
现在，是时候将输入元素添加到我们的表单中了。所有这些标记都将与类一起进入div元素 内部form-body。
<div class="frm-row"> <div class="section colm colm6"> <label class="field prepend-icon"> <input type="text" name="names" id="names" class="gui-input" placeholder="Enter name..."> <span class="field-icon"><i class="fa fa-user"></i></span> </label> </div> <div class="section colm colm6"> <label class="field prepend-icon"> <input type="email" name="email" id="email" class="gui-input" placeholder="Enter Email..."> <span class="field-icon"><i class="fa fa-envelope"></i></span> </label> </div> </div> <div class="spacer-t20 spacer-b30"> <div class="tagline"><span>Please Choose The Concerned Department And Provide All Relevant Details</span></div> </div> <div class="section"> <div class="option-group field"> <label class="option option-blue"> <input type="radio" name="department" checked> <span class="radio"></span> Billing </label> <label class="option option-blue"> <input type="radio" name="department"> <span class="radio"></span> Technical Support </label> <label class="option option-blue"> <input type="radio" name="department"> <span class="radio"></span> Other </label> </div> </div> <div class="section"> <label class="field prepend-icon"> <input type="text" name="subject" id="subject" class="gui-input" placeholder="Enter subject..."> <span class="field-icon"><i class="fa fa-lightbulb-o"></i></span> </label> </div> <div class="section"> <label class="field prepend-icon"> <textarea class="gui-textarea" id="comment" name="comment" placeholder="Enter message..."></textarea> <span class="field-icon"><i class="fa fa-comments"></i></span> <span class="input-hint"> <strong>Hint:</strong> Please enter between 80 - 300 characters.</span> </label> </div> <div class="section"> <label class="switch switch-round switch-blue"> <input type="radio" name="newsletter" id="newsletter" checked> <span class="switch-label" data-on="YES" data-off="NO"></span> <span> Subscribe to our newsletter?</span> </label> </div>
frm-row 当您想在同一行添加多个表单元素时，带有类的包装器 div 很有帮助。单个表单元素的宽度由 colm6类控制。类的总和必须加起来 12 才能填充整个表单宽度。这意味着您可以将两个表单元素的宽度设置为colm8andcolm4或colm6and colm6。在第一种情况下，左侧元素的宽度将是右侧元素的两倍。在后一种情况下，两个输入元素将具有相同的宽度。
使用上面的标记，最终的表单将如下图所示：
表单验证和其他增强功能
该框架提供了相当多的 javaScript 文件，用于向表单添加附加功能。例如，有用于输入屏蔽和添加文件拖放功能的单独文件。文档中非常清楚地解释了每个文件的使用，因此您只需包含您实际需要其功能的那些文件。
在我们的例子中，我们只想验证表单输入，所以我们将加载主jquery脚本和另外两个验证文件。一种是核心 jQuery 验证插件，另一种是提供额外的验证方法。
您只需将以下脚本标签添加到您的网页，即可使用基于 JavaScript 的验证。
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> <script type="text/javascript" src="js/additional-methods.js"></script>
启用验证的最后一步是在上述脚本之后包含以下代码：
$(function() {
$('#contact-form').validate();
});上面的 #contact-form 选择器是id我们表单的属性值。如果您更改了该属性，您自己的表单会有所不同。这行代码只是告诉网页验证通过表单提供的信息。
目前，错误将在没有任何字体颜色或输入突出显示的情况下显示。您可以使用以下代码片段使错误更加突出：
$('#contact-form').validate({
errorClass: "state-error",
validClass: "state-success",
errorElement: "em",
highlight: function(element, errorClass, validClass) {
$(element).closest('.field').addClass(errorClass).removeClass(validClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.field').removeClass(errorClass).addClass(validClass);
},
errorPlacement: function(error, element) {
if (element.is(":radio") || element.is(":checkbox")) {
element.closest('.option-group').after(error);
} else {
error.insertAfter(element.parent());
}
}
});将上述代码添加到网页后，无效字段将如下图所示：
文档中详细介绍了表单验证，因此在您自己的表单中实现它时不会卡住。
最后的想法
在本教程中，我们使用Smart Forms JavaScript 表单框架创建了一个非常有吸引力的联系表单。使用这个框架最好的事情之一是所有的 JavaScript 功能都已经为你编写好了。此外，这些表格的简洁设计看起来非常专业。您可以从大量选项中进行选择，并选择最适合您的表单布局。
框架随附的文档很好地解释了所有内容，因此您遇到困难的可能性很小。万一您遇到困难，开发人员提供六个月的免费支持，因此您的所有问题都将得到快速解决！您可以查看演示，看看您是否喜欢表单的样式。从长远来看，使用此框架创建表单将为您节省大量时间和金钱，因此您绝对应该尝试一下。
- 示例表格
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
