jQuery+CSS3节点接触形式注册表单js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3节点接触形式注册表单js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <title>jQuery+CSS3节点接触形式注册表单</title>
    <meta name="description" content="">
    <!-- basic stylesheet -->
    <link rel="stylesheet" href="src/stylesheets/form.css">
    <!-- theme stylesheet -->
    <link rel="stylesheet" href="src/stylesheets/themes.css">
    <!-- Plugin requires jQuery 1.7+  -->
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <!-- Localization files (include one of those) -->
    <script type="text/javascript" src="src/language/en.js"></script>
    <script type="text/javascript" src="src/language/de.js"></script>
    <script type="text/javascript" src="src/language/ru.js"></script>
    <script type="text/javascript" src="src/language/fr.js"></script>
    <script type="text/javascript" src="src/language/tr.js"></script>
    <!-- Main HTML5 Contact Form JS script file -->
    <script type="text/javascript" src="src/javascript/form.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>

    <!-- This is where the form is going to apper on the page -->
    <div class="container"></div>
    <script>
        // init form
        $('.container').RichContactForm();
    </script>
</body>
</html>

JS代码(form.min.js):

!function(a){
	var b,c,d,e,f,g,h,i,j,k,l=/MSIE/i.test(navigator.userAgent),m=window.njsForm.lang,n="placeholder"in document.createElement("input");
	b=['<div class="njsform{
	{
	theme}
}
{
	{
	background}
}
">','<div class="njsform-header">{
	{
	interface.title}
}
</div>','<div class="njsform-socialbar">',"<span>{
	{
	interface.followUs}
}
</span>","<ul>",'<li><a class="njs_facebook" href="#"></a></li>','<li><a class="njs_twitter" href="#"></a></li>','<li><a class="njs_gplus" href="#"></a></li>','<li><a class="njs_linkedin" href="#"></a></li>','<li><a class="njs_youtube" href="#"></a></li>',"</ul>","</div>",'<div class="message"></div>','<form action="RichContactForm/nodejsSendmail" method="post" name="nodejsForm" autocomplete="on">','<div class="check-default">','<label for="njsform-name">{
	{
	interface.name}
}
</label>','<input name="name" type="text" id="njsform-name" placeholder="{
	{
	interface.placeholder.name}
}
" data-rules="name|required">','<span class="validation-check"></span>','<span class="errorMessage"></span>',"</div>",'<div class="check-default">','<label for="njsform-email">{
	{
	interface.email}
}
</label>','<input name="email" type="text" id="njsform-email" placeholder="{
	{
	interface.placeholder.email}
}
" data-rules="email|required">','<span class="validation-check"></span>','<span class="errorMessage"></span>',"</div>","<div>",'<label for="njsform-website">{
	{
	interface.website}
}
</label>','<input name="website" type="text" id="njsform-website" placeholder="{
	{
	interface.placeholder.website}
}
" data-rules="website">','<span class="errorMessage"></span>',"</div>","<div>",'<label for="njsform-phone">{
	{
	interface.phone}
}
</label>','<input name="phone" type="text" id="njsform-phone" size="30" placeholder="{
	{
	interface.placeholder.phone}
}
" data-rules="phone">','<span class="errorMessage"></span>',"</div>",'<div class="check-default">','<label for="njsform-subject">{
	{
	interface.subject}
}
</label>','<select name="subject" id="njsform-subject" data-rules="required">','<option value=""></option>','<option value="feedback">{
	{
	interface.subjectOptions.feedback}
}
</option>','<option value="question">{
	{
	interface.subjectOptions.question}
}
</option>','<option value="bug">{
	{
	interface.subjectOptions.bug}
}
</option>','<option value="other">{
	{
	interface.subjectOptions.other}
}
</option>',"</select>",'<span class="validation-check"></span>','<span class="errorMessage"></span>',"</div>",'<div class="check-default messageWrap">','<label for="njsform-message">{
	{
	interface.message}
}
</label>','<textarea name="message" id="njsform-message" placeholder="{
	{
	interface.placeholder.message}
}
" data-rules="required" spellcheck="true" maxlength="5000"></textarea>','<span class="validation-check"></span>','<span class="errorMessage"></span>',"</div>",'<div class="check-default">','<span id="humanQuestionLabel"></span>','<input name="humanquestion" type="text" placeholder="{
	{
	interface.placeholder.humanquestion}
}
" data-rules="humanquestion|required">','<span class="validation-check"></span>','<span class="errorMessage"></span>',"</div>",'<div class="submitWrap">','<input class="submit" type="submit" value="{
	{
	interface.submit}
}
" />','<span class="loader"></span>',"</div>","</form>","</div>"].join("");
	var o=function(){
	if(location.search){
	var a=(location.search.substr(1)||"").split("&");
	k.theme=a[0]&&a[0].replace("theme=",""),k.background=a[1]&&a[1].replace("background=",""),k.language=a[2]&&a[2].replace("lang=","")}
}
,p=function(){
	var a,d;
	for(a in m[k.language].interface)if(m[k.language].interface.hasOwnProperty(a))if("object"==typeof m[k.language].interface[a])for(d in m[k.language].interface[a])m[k.language].interface[a].hasOwnProperty(d)&&(b=b.replace("{
	{
	interface."+a+"."+d+"}
}
",m[k.language].interface[a][d]));
	else b=b.replace("{
	{
	interface."+a+"}
}
",m[k.language].interface[a]);
	b=b.replace("{
	{
	theme}
}
",k.theme).replace("{
	{
	background}
}
",k.background),c.html(b)}
,q=function(){
	var a=Math.ceil(10*Math.random()),b=Math.ceil(10*Math.random()),c=a+b;
	d.find("#humanQuestionLabel").html(a+" + "+b+" = "),d.find('input[name="humanquestion"]').attr("data-sum",c)}
,r=function(b){
	if(!n){
	var c=a(b),d=c.val(),e=c.attr("placeholder");
	d||c.val(e)}
}
,s=function(b){
	if(!n){
	var c=a(b),d=c.val(),e=c.attr("placeholder");
	d===e&&c.val("")}
}
,t=function(){
	if(!n){
	var a=d.find("input,textarea");
	a.each(function(){
	r(this)}
)}
}
,u=function(b,c){
	a(b).addClass("error").parent().removeClass("check-default check-valid").addClass("check-invalid error").find(".errorMessage").html(c).fadeIn(500)}
,v=function(b){
	a(b).removeClass("error").parent().removeClass("check-default check-invalid error").addClass("check-valid").find(".errorMessage").html("").hide()}
,w=function(b){
	a(b).parent().find(".errorMessage").html("").hide()}
,x=function(){
	g.each(function(){
	a(this).removeClass("error").parent().removeClass("error check-invalid").addClass("check-default")}
),a(".errorMessage").hide()}
,y={
	required:function(b){
	return a(b).val()?!0:!1}
,name:function(b){
	var c=a(b).val();
	return!c||c.match(/[\d~@#$%^&*()+<>]/g)?!1:!0}
,email:function(b){
	var c=a(b).val();
	return c&&c.match(/^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{
	2,}
)$/)?!0:!1}
,website:function(b){
	var c=a(b),d=c.val();
	return d?(-1==d.indexOf("://")&&c.val("http://"+d),d.match(/^(https?:\/\/)?([\w\.]+)\.([a-z]{
	2,6}
\.?)(\/[\w\.]*)*\/?$/)?!0:!1):!0}
,phone:function(b){
	var c=a(b).val();
	return c?c.match(/^[+0-9\s]{
	3,30}
$/)?!0:!1:!0}
,humanquestion:function(b){
	var c=a(b),d=c.val(),e=parseInt(c.data("sum")||0,10);
	return d&&d.match(new RegExp("^"+e+"$"))?!0:!1}
}
,z=function(b){
	var c=a(b),d=!0,e=(c.data("rules")||[]).split("|");
	return a.each(e,function(a,c){
	"function"==typeof y[c]&&(y[c](b)||(d=!1,u(b,m[k.language].validation[c])))}
),d&&v(b),"lightbox"===k.type&&C(),d}
,A=function(){
	var a=!0;
	return g.each(function(){
	s(this),z(this)||(a=!1),r(this)}
),a}
,B=function(b){
	return b.preventDefault(),x(),A()?(f.css("display","inline-block"),h.prop("disabled",!0),a.ajax({
	type:"POST",data:JSON.stringify({
	name:d.find('input[name="name"]').val(),email:d.find('input[name="email"]').val(),website:d.find('input[name="website"]').val(),phone:d.find('input[name="phone"]').val(),subject:d.find('select[name="subject"]').val(),message:d.find('textarea[name="message"]').val()}
),url:d.attr("action"),success:function(a){
	var b=JSON.parse(a),c=b.error;
	b.name&&"AuthError"===b.name&&(c=b.data),f.hide(),h.prop("disabled",!1),c?e.slideDown().addClass("error").html(c):(e.slideDown().removeClass("error").html(b.message),d.slideUp()),"lightbox"===k.type&&C()}
,error:function(){
	f.hide(),h.prop("disabled",!1),e.slideDown().addClass("error").html("Server is unavailable!")}
}
),!1):!1}
,C=function(){
	j.css({
	marginTop:-j.height()/2}
),i.css({
	height:a(document).height()}
)}
,D=function(){
	var b=a("body");
	j||(j=d.parent().detach().appendTo(b).addClass("njs-lightbox"),a(window).resize(C)),j.css({
	opacity:0,display:"block"}
),j.css({
	marginTop:-j.height()/2}
).animate({
	opacity:1}
,k.lightboxSpeed),i=a('<div class="njs-overlay" />').appendTo(b).css({
	opacity:0,height:a(document).height()}
).animate({
	opacity:k.overlayOpacity}
,k.overlaySpeed).click(E)}
,E=function(){
	j.hide(),i.remove(),x(),q()}
;
	a.fn.RichContactForm=function(b){
	c=a(this),c.addClass("njsformContainer"),k=a.extend({
}
,a.fn.RichContactForm.defaults,b),o(),p(),d=c.find(".njsform form"),g=d.find("input,textarea,select").not('input[type="submit"]'),h=d.find(".submit"),f=d.find(".loader"),e=c.find(".message"),e.hide(),q(),t(),g.blur(function(){
	w(this),z(this),l&&r(this)}
),n||g.focus(function(){
	s(this)}
),g.filter("select").change(function(){
	w(this),z(this)}
),a(document).on("submit",".njsform form",B),"lightbox"===k.type&&a(k.trigger).click(D),"standalone"===k.type&&c.addClass("standalone").show()}
,a.fn.RichContactForm.defaults={
	type:"standalone",theme:"theme-aqua",background:"bg-white",trigger:".showRichContactForm",language:"en",lightboxSpeed:500,overlaySpeed:500,overlayOpacity:.7}
}
(window.jQuery);

CSS代码(form.css):

/* background variations */
.njsform.bg-white{background:#F1F1F1;}
.njsform.bg-white input[type="text"],.njsform.bg-white textarea,.njsform.bg-white select{border-color:#C9C9C9;}
.njsform.bg-dark{background:#3F3F3F;}
.njsform.bg-dark label{color:#BBB;}
.njsform.bg-dark small{color:#9E9E9E;}
.njsform.bg-dark input[type="text"],.njsform.bg-dark textarea,.njsform.bg-dark select{border-color:#000;}
/* standalone */
.njsformContainer.standalone form{padding:20px 19px 10px;}
.njsformContainer.standalone form,.njsformContainer.standalone .message{border-right:1px solid;border-left:1px solid;border-bottom:1px solid;}
.njsformContainer.standalone .bg-white form,.njsformContainer.standalone .bg-white .message{border-color:#DDD;}
.njsformContainer.standalone .bg-dark form,.njsformContainer.standalone .bg-dark .message{border-color:#222;}
/* lightbox */
.njsform.njs-lightbox{position:absolute;display:block;width:520px;left:50%;margin-left:-260px;top:50%;z-index:20000;-webkit-box-shadow:0 0 25px;-moz-box-shadow:0 0 25px;box-shadow:0 0 25px;}
.njs-overlay{background:#CCC;display:block;width:100%;z-index:10000;position:fixed;top:0;left:0;}
/* form */
.njsformContainer{padding:20px;display:none;}
.njsform{margin:0 auto;max-width:520px;font:14px Reem,Arial,Tahoma,Verdana,sans-serif;}
.njsform small{color:#C5C5C5;font-size:11px;}
.njsform label{color:#777;}
/* form header */
.njsform-header{padding:16px 20px;font-size:17px;text-shadow:1px 1px #696969;}
.njsform-header,.njsform-socialbar span{text-shadow:1px 1px #696969;}
/* loader */
.njsform form .loader{background:url('../images/ajax-loader.gif') no-repeat 0 0;display:none;height:16px;width:16px;margin-left:5px;}
/* human question */
.njsform #humanQuestionLabel{font-size:15px;width:124px;display:inline-block;text-align:right;padding-right:6px;vertical-align:top;margin-top:7px;}
/* form inner elements */
.njsform form{padding:20px 20px 10px;}
.njsform label{display:inline-block;float:left;padding:6px 0 0 0;width:130px;margin:0;clear:both;font-size:15px;}
.njsform form div{min-height:43px;position:relative;overflow:hidden;padding-top:5px;}
.njsform form div.error{min-height:65px;}
.njsform form div.messageWrap{min-height:105px;}
.njsform form div.error.messageWrap{min-height:125px;}
.njsform .error.messageWrap .errorMessage{top:95px;}
.njsform textarea{height:78px;}
.njsform input[type="text"],.njsform textarea,.njsform select{width:55%;padding:6px 9px;color:#A5A5A5;background:#fff;border:1px solid;border-color:#6D6C6C;border-radius:5px;margin:0;font:14px Reem,Arial,Tahoma,Verdana,sans-serif;vertical-align:middle;transition:all 0.25s ease-in-out;-webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;box-shadow:0 0 5px rgba(81,203,238,0);-webkit-box-shadow:0 0 5px rgba(81,203,238,0);-moz-box-shadow:0 0 5px rgba(81,203,238,0);}
.njsform select{width:59%;}
.njsform input[type="text"]:focus,.njsform textarea:focus,.njsform select:focus{background-color:#fff;color:#333;outline:none;position:relative;z-index:5;border:1px solid;-webkit-transform:scale(1.05);-moz-transform:scale(1.05);transition:all 0.25s ease-in-out;-webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;}
/* submit button */
.njsform .submitWrap{padding-top:10px;}
.njsform input[type="submit"]{display:inline-block;border-top:0;border-bottom:3px solid;border-left:none;border-right:none;text-shadow:1px 1px #818181;color:#FFF;padding:13px 0;width:130px;font-size:15px;text-align:center;margin:0 0 0 130px;-moz-outline:0 none;outline:0 none;}
/* validation */
.njsform .validation-check{background-image:url('../images/tick.png');display:block;height:20px;width:21px;position:absolute;top:10px;right:15px;}
.njsform .check-valid .validation-check{background-position:0 0;}
.njsform .check-default .validation-check{background-position:-22px 0;}
.njsform .check-invalid .validation-check{background-position:right 0;}
.njsform .error input[type="text"],.njsform .error textarea,.njsform .error select,.njsform .error input[type="text"]:focus,.njsform .error textarea:focus,.njsform .error select:focus{border-color:#d74f5a !important;-webkit-box-shadow:0 0 5px #d74f5a !important;-moz-box-shadow:0 0 5px #d74f5a !important;box-shadow:0 0 5px #d74f5a !important;}
.njsform .errorMessage{background:url('../images/warning.png') no-repeat 0 7px transparent;padding:7px 0 7px 20px;display:none;position:absolute;z-index:100;left:130px;top:33px;min-width:130px;font-size:12px;}
/* form message */
.njsform .message{padding:20px;color:green;}
.njsform .message.error{border-bottom:1px dashed;padding:10px 20px;}
/*social bar */
.njsform-socialbar{border-top:1px solid;}
.njsform-socialbar span{font-size:15px;float:left;color:#fff;padding:16px 0 0 20px;width:115px;}
.njsform-socialbar ul{overflow:hidden;margin:0;padding:0;}
.njsform-socialbar li{list-style:none;float:left;}
.njsform-socialbar li a{background:url('../images/social_icons.png') no-repeat 0 0;display:block;width:50px;height:50px;}
.njsform-socialbar li .njs_facebook{background-position:-350px 0;}
.njsform-socialbar li .njs_facebook:hover{background-position:-350px -50px;}
.njsform-socialbar li .njs_gplus{background-position:-50px 0;}
.njsform-socialbar li .njs_gplus:hover{background-position:-50px -50px;}
.njsform-socialbar li .njs_linkedin{background-position:-100px 0;}
.njsform-socialbar li .njs_linkedin:hover{background-position:-100px -50px;}
.njsform-socialbar li .njs_twitter{background-position:-300px 0;}
.njsform-socialbar li .njs_twitter:hover{background-position:-300px -50px;}
.njsform-socialbar li .njs_youtube{background-position:-200px 0;}
.njsform-socialbar li .njs_youtube:hover{background-position:-200px -50px;}
/* --------------- responsive styles --------------- */
/* smartphone Landscape */
@media screen and (max-width:480px){.njsform input[type="text"],.njsform textarea,.njsform select{width:50%;}
.njsform select{width:55%;}
.njsform .validation-check{margin-left:4px;}
.njsform.njs-lightbox{width:440px;left:20px;top:20px;margin:0 !important;}
}
/* mobile view */
@media screen and (max-width:450px){.njsform form{padding:20px 30px;}
.njsform label{float:none;display:block;padding:0 0 5px;}
.njsform .errorMessage{left:5px;top:58px;}
.njsform form div.messageWrap{margin-bottom:10px;}
.njsform form div.error.messageWrap .errorMessage{top:120px;}
.njsform .validation-check{top:30px;}
.njsform form div{min-height:75px;padding-left:7px;}
.njsform form div.error{min-height:90px;}
.njsform form div.messageWrap{min-height:120px;}
.njsform form div.error.messageWrap{min-height:150px;}
.njsform #humanQuestionLabel{display:block;padding:0 0 5px;text-align:left;margin:0;}
.njsform-socialbar span{padding-right:0;}
.njsform input[type="text"],.njsform textarea,.njsform select{width:75%;}
.njsform select{width:80%;}
.njsform .submitWrap{text-align:left;}
.njsform input[type="submit"]{width:85%;margin-left:0;}
}
@media screen and (max-width:400px){.njsform select{width:84%;}
.njsform .validation-check{right:0;}
.njsform-socialbar span{display:none;}
.njsform-socialbar ul{margin-left:10px;}
.njsform.njs-lightbox{width:280px;}
}

CSS代码(themes.css):

/* ------ Theme:Aqua ------ */
.njsform.theme-aqua .njsform-header{background:#19bec8;color:#FFF;}
.njsform.theme-aqua .njsform-socialbar{background:#15a0a8;border-color:#13939b;}
.njsform.theme-aqua #humanQuestionLabel{color:#19bec8;}
.njsform.theme-aqua .errorMessage,.njsform.theme-aqua .message.error{color:#2fdbe5;}
.njsform.bg-white.theme-aqua .errorMessage,.njsform.bg-white.theme-aqua .message.error{color:#13939b;}
.njsform.theme-aqua input[type="text"]:focus,.njsform.theme-aqua input[type="email"]:focus,.njsform.theme-aqua input[type="url"]:focus,.njsform.theme-aqua input[type="tel"]:focus,.njsform.theme-aqua textarea:focus,.njsform.theme-aqua select:focus{border-color:#19bec8;-webkit-box-shadow:0 0 5px #19bec8;-moz-box-shadow:0 0 5px #19bec8;box-shadow:0 0 5px #19bec8;}
.njsform.theme-aqua input[type="submit"]{background-color:#16a8b1;border-color:#128a92;}
.njsform.theme-aqua .submitWrap input[type="submit"]:hover{background-color:#13939b;border-color:#107d84;}
.njsform.theme-aqua .submitWrap input[type="submit"]:active{background-color:#107d84;border-color:#0f7076;outline:none;}
/* ------ Theme:Blue ------ */
.njsform.theme-blue .njsform-header{background:#009ac4;color:#FFF;}
.njsform.theme-blue .njsform-socialbar{background:#007ea0;border-color:#007291;}
.njsform.theme-blue #humanQuestionLabel{color:#009ac4;}
.njsform.theme-blue .errorMessage,.njsform.theme-blue .message.error{color:#00c2f7;}
.njsform.bg-white.theme-blue .errorMessage,.njsform.bg-white.theme-blue .message.error{color:#007291;}
.njsform.theme-blue input[type="text"]:focus,.njsform.theme-blue input[type="email"]:focus,.njsform.theme-blue input[type="url"]:focus,.njsform.theme-blue input[type="tel"]:focus,.njsform.theme-blue textarea:focus,.njsform.theme-blue select:focus{border-color:#009ac4;-webkit-box-shadow:0 0 5px #009ac4;-moz-box-shadow:0 0 5px #009ac4;box-shadow:0 0 5px #009ac4;}
.njsform.theme-blue input[type="submit"]{background-color:#0086ab;border-color:#006a87;}
.njsform.theme-blue .submitWrap input[type="submit"]:hover{background-color:#007291;border-color:#005e78;}
.njsform.theme-blue .submitWrap input[type="submit"]:active{background-color:#005e78;border-color:#005268;outline:none;}
/* ------ Theme:green ------ */
.njsform.theme-green .njsform-header{background:#2dcb74;color:#FFF;}
.njsform.theme-green .njsform-socialbar{background:#27ae63;border-color:#24a15c;}
.njsform.theme-green #humanQuestionLabel{color:#2dcb74;}
.njsform.theme-green .errorMessage,.njsform.theme-green .message.error{color:#52d98f;}
.njsform.bg-white.theme-green .errorMessage,.njsform.bg-white.theme-green .message.error{color:#24a15c;}
.njsform.theme-green input[type="text"]:focus,.njsform.theme-green input[type="email"]:focus,.njsform.theme-green input[type="url"]:focus,.njsform.theme-green input[type="tel"]:focus,.njsform.theme-green textarea:focus,.njsform.theme-green select:focus{border-color:#2dcb74;-webkit-box-shadow:0 0 5px #2dcb74;-moz-box-shadow:0 0 5px #2dcb74;box-shadow:0 0 5px #2dcb74;}
.njsform.theme-green input[type="submit"]{background-color:#28b668;border-color:#229957;}
.njsform.theme-green .submitWrap input[type="submit"]:hover{background-color:#24a15c;border-color:#1f8c50;}
.njsform.theme-green .submitWrap input[type="submit"]:active{background-color:#1f8c50;border-color:#1c8049;outline:none;}
/* ------ Theme:Pink ------ */
.njsform.theme-pink .njsform-header{background:#b15299;color:#FFF;}
.njsform.theme-pink .njsform-socialbar{background:#9a4585;border-color:#8f417b;}
.njsform.theme-pink #humanQuestionLabel{color:#b15299;}
.njsform.theme-pink .errorMessage,.njsform.theme-pink .message.error{color:#c175ae;}
.njsform.bg-white.theme-pink .errorMessage,.njsform.bg-white.theme-pink .message.error{color:#8f417b;}
.njsform.theme-pink input[type="text"]:focus,.njsform.theme-pink input[type="email"]:focus,.njsform.theme-pink input[type="url"]:focus,.njsform.theme-pink input[type="tel"]:focus,.njsform.theme-pink textarea:focus,.njsform.theme-pink select:focus{border-color:#b15299;-webkit-box-shadow:0 0 5px #b15299;-moz-box-shadow:0 0 5px #b15299;box-shadow:0 0 5px #b15299;}
.njsform.theme-pink input[type="submit"]{background-color:#a1498b;border-color:#883d75;}
.njsform.theme-pink .submitWrap input[type="submit"]:hover{background-color:#8f417b;border-color:#7e396c;}
.njsform.theme-pink .submitWrap input[type="submit"]:active{background-color:#7e396c;border-color:#733463;outline:none;}
/* ------ Theme:Purple ------ */
.njsform.theme-purple .njsform-header{background:#cb2dab;color:#FFF;}
.njsform.theme-purple .njsform-socialbar{background:#ae2792;border-color:#a12488;}
.njsform.theme-purple #humanQuestionLabel{color:#cb2dab;}
.njsform.theme-purple .errorMessage,.njsform.theme-purple .message.error{color:#d952bd;}
.njsform.bg-white.theme-purple .errorMessage,.njsform.bg-white.theme-purple .message.error{color:#a12488;}
.njsform.theme-purple input[type="text"]:focus,.njsform.theme-purple input[type="email"]:focus,.njsform.theme-purple input[type="url"]:focus,.njsform.theme-purple input[type="tel"]:focus,.njsform.theme-purple textarea:focus,.njsform.theme-purple select:focus{border-color:#cb2dab;-webkit-box-shadow:0 0 5px #cb2dab;-moz-box-shadow:0 0 5px #cb2dab;box-shadow:0 0 5px #cb2dab;}
.njsform.theme-purple input[type="submit"]{background-color:#b62899;border-color:#992281;}
.njsform.theme-purple .submitWrap input[type="submit"]:hover{background-color:#a12488;border-color:#8c1f76;}
.njsform.theme-purple .submitWrap input[type="submit"]:active{background-color:#8c1f76;border-color:#801c6c;outline:none;}
/* ------ Theme:red ------ */
.njsform.theme-red .njsform-header{background:#f18176;color:#FFF;}
.njsform.theme-red .njsform-socialbar{background:#ee6356;border-color:#ec5648;}
.njsform.theme-red #humanQuestionLabel{color:#f18176;}
.njsform.theme-red .errorMessage,.njsform.theme-red .message.error{color:#f6aca4;}
.njsform.bg-white.theme-red .errorMessage,.njsform.bg-white.theme-red .message.error{color:#ec5648;}
.njsform.theme-red input[type="text"]:focus,.njsform.theme-red input[type="email"]:focus,.njsform.theme-red input[type="url"]:focus,.njsform.theme-red input[type="tel"]:focus,.njsform.theme-red textarea:focus,.njsform.theme-red select:focus{border-color:#f18176;-webkit-box-shadow:0 0 5px #f18176;-moz-box-shadow:0 0 5px #f18176;box-shadow:0 0 5px #f18176;}
.njsform.theme-red input[type="submit"]{background-color:#ef6c5f;border-color:#eb4e3e;}
.njsform.theme-red .submitWrap input[type="submit"]:hover{background-color:#ec5648;border-color:#ea4131;}
.njsform.theme-red .submitWrap input[type="submit"]:active{background-color:#ea4131;border-color:#e83423;outline:none;}
/* ------ Theme:yellow ------ */
.njsform.theme-yellow .njsform-header{background:#ffb518;color:#FFF;}
.njsform.theme-yellow .njsform-socialbar{background:#f3a500;border-color:#e49b00;}
.njsform.theme-yellow #humanQuestionLabel{color:#ffb518;}
.njsform.theme-yellow .errorMessage,.njsform.theme-yellow .message.error{color:#ffc54b;}
.njsform.bg-white.theme-yellow .errorMessage,.njsform.bg-white.theme-yellow .message.error{color:#e49b00;}
.njsform.theme-yellow input[type="text"]:focus,.njsform.theme-yellow input[type="email"]:focus,.njsform.theme-yellow input[type="url"]:focus,.njsform.theme-yellow input[type="tel"]:focus,.njsform.theme-yellow textarea:focus,.njsform.theme-yellow select:focus{border-color:#ffb518;-webkit-box-shadow:0 0 5px #ffb518;-moz-box-shadow:0 0 5px #ffb518;box-shadow:0 0 5px #ffb518;}
.njsform.theme-yellow input[type="submit"]{background-color:#feac00;border-color:#da9400;}
.njsform.theme-yellow .submitWrap input[type="submit"]:hover{background-color:#e49b00;border-color:#cb8a00;}
.njsform.theme-yellow .submitWrap input[type="submit"]:active{background-color:#cb8a00;border-color:#bb7f00;outline:none;}

附件:下载该文件资源,减少时间成本(增值服务)