在这种情况下,您可以使用第三方服务(可能会有点贵),也可以购买高级框架,表单生成器或在一定时间内提供免费支持的插件。 在本教程中,我们将研究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功能。 此外,表单的整洁设计看起来非常专业。 您可以从大量选项中进行选择,然后选择最适合您的表单布局。