在这种情况下，您可以使用第三方服务（可能会有点贵），也可以购买高级框架，表单生成器或在一定时间内提供免费支持的插件。 在本教程中，我们将研究CodeCanyon上最流行和功能最丰富的表单框架之一，以创建您自己JavaScript表单。
智能表单概述
今天我们将用来创建自己的表单的工具是Smart Forms 。 在撰写本文时，此表单框架的销售量达到了3,819，根据159条评论的平均评分为4.5。 大多数在其网站上使用过该框架的买家，例如其代码质量，功能，设计，灵活性和积极的客户支持。
该框架的一些功能包括：
- 响应式框架，带有40多个入门模板
- 多步骤形式和模态形式
- 日期选择器 ， 时间选择器 ， 月份选择器和颜色选择器小部件
- 拖放文件上传
- 基于AJAX和PHP，并支持Google reCAPTCHA
- 而这样的例子不胜枚举！
如果您想创建很多具有专业外观的表单，则使用Smart Forms框架将是一个不错的选择。 请在框架主页上检查所有功能和评论。
表格范例
为了显示您可以使用Smart Forms创建的内容，下面是几个具有不同主题和布局的示例。 您可以选择将社交媒体登录按钮放置在顶部或并排放置。 有很多配色方案和三个不同的主题。
这是一个登录表格。
这是具有不同颜色和顶部社交登录按钮的同一登录表单：
同样，以下两种形式与下订单有关。 如您所见，可以根据需要创建完全不同的布局。
在下一个表单中，您将看到智能表单如何创建有吸引力的样式，例如大型产品选件卡。
下载文件包含数百个此类模板文件，因此您几乎总是能够找到适合您的需求和样式的模板。 不仅如此，如果您要为表单创建全新的布局，下载中的文档也很容易理解。
文件结构和其他基础
购买智能表单后，您将获得有关创建自己的表单并将其添加到zip下载中的过程的详细文档。 这是您必须记住的一些关键点：
- 表单的大多数样式都依赖于一个主CSS文件。 在加载插件CSS之前，请确保已加载所有CSS重置文件。
- 表单支持Font Awesome图标和JavaScript功能，例如AJAX提交和表单验证。 但是，如果不需要，可以禁用这些功能。
- 该框架为IE8加载了另一个备用样式表。
提取的档案中有三个文件夹，分别称为暗，平和浅。 这是不同形式的三个主要主题。 每个主题包含三个不同的文件夹。 这些是：
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>Contact us</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 pushed">Submit</button>
</div>
</form>
</div>
</div> wrap-3类用于控制所创建表单的宽度。 您可以将其设置为wrap-0到wrap-4 。 除非您更改任何CSS规则，否则wrap-3类将创建最窄的形式，而wrap-4将覆盖body元素的整个宽度。 您可以使用其他类（例如wrap-5 ， wrap-6等）创建自己CSS规则，以调整表单宽度。
您必须为要应用的主题应用header-{colorname}类。 colorname将与您加载的其他CSS文件相同。 身上的theme-blue类也是如此。
您可以通过添加类名（例如pushed ， button-pointed ， button-left等）将样式应用于按钮元素。您可以在文档的“ 表单按钮”部分中找到有关样式按钮的更多信息。
现在，是时候将输入元素添加到表单中了。 所有这些标记将与form-body类一起放入div元素中。
<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的wrapper div很有帮助。 单个表单元素的宽度由colm6类控制。 这些类的总和必须达到12，才能填满整个表单宽度。 这意味着您可以将两个表单元素的宽度设置为colm8和colm4或colm6和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());
}
}
});将上述代码添加到网页后，无效字段将如下图所示：
表单验证已在文档中进行了非常详细的介绍，因此，以自己的形式实现表单验证时不会卡住。
最后的想法
在本教程中，我们使用CodeCanyon提供的Smart Forms JavaScript表单框架创建了一个非常吸引人的联系表单。 使用此框架的最好的事情之一就是已经为您编写了所有JavaScript功能。 此外，表单的整洁设计看起来非常专业。 您可以从大量选项中进行选择，然后选择最适合您的表单布局。
2666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
