LOADING
Forms
Whether you are a seasoned marketer or this is your first time building a story, we have some best practices that will set you on the right path.
Formspree Forms
1. Set up the form
First, prepare the form on formspree.io.
2. Embed the form in your Fabl story
There are two ways you can add a form to your Story, either as part of the content(2.1) or modal(2.2).
2.1 As a Code block along with the other elements of the story by pasting the below snippet in the Code block.
Note: Don’t forget to paste into action=“httр://formspree.io/YourEmail” your email
<form method="POST" action="http://formspree.io/YourEmail"> <input type="text" name="fullname" placeholder="Your full name"> <input type="email" name="email" placeholder="Your email"> <textarea name="message" placeholder="Your message"></textarea> <button type="submit">Submit</button> </form>
To style your form, wrap it with the next <div> element
<div id="fabl-formspee">
// here goes the code of your form
</div>
As shown below:
<div id="fabl-formspee">
<form method="POST" action="http://formspree.io/YourEmail">
<input type="text" name="fullname" placeholder="Your full name">
<input type="email" name="email" placeholder="Your email">
<textarea name="message" placeholder="Your message"></textarea>
<button type="submit">Submit</button>
</form>
</div>
Then add the style Code block to your story with the code snippet:
<style>
#fabl-formspee > form {
max-width: 920px;
display: block;
text-align: center;
}
#fabl-formspee > form > input,
#fabl-formspee > form > textarea {
clear: both;
display: block;
width: 100%;
max-width: inherit;
margin: 20px 0px;
}
#fabl-formspee > form > button {
width: 145px;
height: 54px;
background-color: #34B876;
border:2px solid #34B876;
border-radius: 6px;
color: white;
margin: 10px 0px;
text-transform: uppercase;
font-size: 20px;
font-weight: 700;
font-family: inherit;
}
</style>
As a result your form will appear as below:
2.2 If you need a modal, you will need to follow a few steps:
First, paste the code for the modal window:
<div id="demoModalContainer">
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="modal-close pull-right" data-dismiss="modal" aria-label="Close">+</a>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
</div>
Then after
<div class=“modal-body”>
you need to paste your form like this:
<div id="demoModalContainer">
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="modal-close pull-right" data-dismiss="modal" aria-label="Close">+</a>
</div>
<div class="modal-body">
<div id="fabl-formspee">
<form method="POST" action="http://formspree.io/YourEmail">
<input type="text" name="fullname" placeholder="Your full name">
<input type="email" name="email" placeholder="Your email">
<textarea name="message" placeholder="Your message"></textarea>
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Add the style block.
<style>
#fabl-formspee > form {
max-width: 920px;
display: block;
text-align: center;
}
#fabl-formspee > form > input,
#fabl-formspee > form > textarea {
clear: both;
display: block;
width: 100%;
max-width: inherit;
}
#fabl-formspee > form > button {
width: 145px;
height: 54px;
background-color: #34B876;
border:2px solid #34B876;
border-radius: 6px;
color: white;
margin: 35px 0px 10px 0px;
text-transform: uppercase;
font-size: 20px;
font-weight: 700;
font-family: inherit;
}
#fablFormspeeModalContainer .modal-dialog {
position: relative;
top: 45%;
margin-top: -168px;
}
#signupModal .modal-body {
padding-top: 10%;
padding-left: 9%;
padding-right: 9%;
padding-bottom: 7%;
}
#signupModal .modal-header {
padding: 0px !important;
background-color: white;
}
@media (min-width: 768px) {
#signupModal .modal-dialog {
width: 800px !important;
}
}
.modal-content a.modal-close .modal-close-sign{
font-size: 40px;
color: #222;
/*transform: rotateX(45deg);*/
display: block;
position: fixed;
top: -20px;
right: 7px;
cursor: pointer !important;
/*z-index: 999 !important;*/
}
</style>
Then, add the script block.
<script type="text/javascript">
(function ($) {
var jqCookiesUrl = "https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js";
var bsUrl = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js";
var button = $(document).find(".show-me-the-form .btn.btn-primary");
button.on("click", function(){
loadScripts([bsUrl, jqCookiesUrl], function () {
console.log("Load Scripts!");
var $modal = $('#signupModal');
setTimeout(function(){
$modal.modal('show');
}, 200);
$('#signupModal .modal-close').click(function(){
$modal.modal('hide');
})
});
});
});
</script>
The result will be a button as shown below:
Pop-up Forms
Below you will find a HTML snippet, which will generate a Hubspot form. You will need to know portalId, formId and URL of the Hubspot form.
1. Block with styles.
<style>
#mc_embed_signup{
background:#fff;
clear:left;
font:14px Helvetica,Arial,sans-serif;
}
#signupModal .modal-body {
padding: 8% 9%;
}
#signupModal .modal-header {
padding: 0px !important;
background-color: white;
}
@media (min-width: 768px) {
#signupModal .modal-dialog {
width: 800px !important;
}
}
#mc_embed_signup h2 {
font-weight: bold;
padding: 0;
margin: 15px 0;
font-size: 1.4em;
}
#mc_embed_signup .indicates-required {
text-align: right;
font-size: 11px;
margin-right: 4%;
}
#mc_embed_signup .mc-field-group {
clear: left;
position: relative;
width: 96%;
padding-bottom: 3%;
min-height: 50px;
}
#mc_embed_signup .button {
clear: both;
background-color: #aaa;
border: 0 none;
border-radius: 4px;
transition: all 0.23s ease-in-out 0s;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: normal;
height: 32px;
line-height: 32px;
margin: 0 5px 10px 0;
padding: 0 22px;
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
width: auto;
}
.modal-content a.modal-close {
font-size: 45px !important;
color: #222 !important;
transform: rotate(45deg) !important;
width: 24px !important;
height: 24px !important;
display: block !important;
position: absolute !important;
top: 30px !important;
right: 30px !important;
cursor: pointer !important;
z-index: 999 !important;
}
.modal-content a.modal-close:hover {
text-decoration: none !important;
}
</style>
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
2. Blocks with scripts.
<div id="demoModalContainer">
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="modal-close pull-right" data-dismiss="modal" aria-label="Close">+</a>
</div>
<div class="modal-body">
<div id="mc_embed_signup">
<form action="http://fabl.us14.list-manage.com/subscribe/post?u=f436965ed0a1ec134c567f662&id=35627ab95c" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Get access to a Fabl demo & more!</h2>
<div class="indicates-required">
<span class="asterisk">*</span> indicates required
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group size1of2">
<label for="mce-MMERGE3">Phone Number </label>
<input type="text" name="MMERGE3" class="" value="" id="mce-MMERGE3">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE4">Company Name </label>
<input type="text" value="" name="MMERGE4" class="" id="mce-MMERGE4">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE5">Position </label>
<input type="text" value="" name="MMERGE5" class="" id="mce-MMERGE5">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE6">Message </label>
<input type="text" value="" name="MMERGE6" class="" id="mce-MMERGE6">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_f436965ed0a1ec134c567f662_35627ab95c" tabindex="-1" value="">
</div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function ($) {
var jqCookiesUrl = "https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js";
var bsUrl = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js";
var formUrl = "https://js.hsforms.net/forms/v2.js";
loadScripts([bsUrl, jqCookiesUrl, formUrl], function () {
var $container = $("#demoModalContainer");
var htmlModal = $container.html();
$container.empty();
$('#signupModal').remove(); // handle preview
$(document.body).append(htmlModal);
var $modal = $('#signupModal');
$('.fabl-demo .btn-primary').click(function(){
$modal.modal('show');
});
$('#signupModal .modal-close').click(function(){
$modal.modal('hide');
})
});
});
</script>
<script type="text/javascript">
(function($) {
window.fnames = new Array();
window.ftypes = new Array();
fnames[1]='FNAME';
ftypes[1]='text';
fnames[2]='LNAME';
ftypes[2]='text';
fnames[0]='EMAIL';
ftypes[0]='email';
fnames[3]='MMERGE3';
ftypes[3]='phone';
fnames[4]='MMERGE4';
ftypes[4]='text';
fnames[5]='MMERGE5';
ftypes[5]='text';
fnames[6]='MMERGE6';
ftypes[6]='text';
// var $mcj = jQuery.noConflict(true);
}(jQuery));
</script>
<script>
/*!
* jQuery Form Plugin
* version: 3.51.0-2014.06.20
* Requires jQuery v1.5 or later
* Copyright (c) 2014 M. Alsup
* Examples and documentation at: http://malsup.com/jquery/form/
* Project repository: https://github.com/malsup/form
* Dual licensed under the MIT and GPL licenses.
* https://github.com/malsup/form#copyright-and-license
*/
!function(e){"use strict";"function"==typeof define&&define.amd?define(["jquery"],e):e("undefined"!=typeof jQuery?jQuery:window.Zepto)}(function(e){"use strict";function t(t){var r=t.data;t.isDefaultPrevented()||(t.preventDefault(),e(t.target).ajaxSubmit(r))}function r(t){var r=t.target,a=e(r);if(!a.is("[type=submit],[type=image]")){var n=a.closest("[type=submit]");if(0===n.length)return;r=n[0]}var i=this;if(i.clk=r,"image"==r.type)if(void 0!==t.offsetX)i.clk_x=t.offsetX,i.clk_y=t.offsetY;else if("function"==typeof e.fn.offset){var o=a.offset();i.clk_x=t.pageX-o.left,i.clk_y=t.pageY-o.top}else i.clk_x=t.pageX-r.offsetLeft,i.clk_y=t.pageY-r.offsetTop;setTimeout(function(){i.clk=i.clk_x=i.clk_y=null},100)}function a(){if(e.fn.ajaxSubmit.debug){var t="[jquery.form] "+Array.prototype.join.call(arguments,"");window.console&&window.console.log?window.console.log(t):window.opera&&window.opera.postError&&window.opera.postError(t)}}var n={};n.fileapi=void 0!==e("<input type='file'/>").get(0).files,n.formdata=void 0!==window.FormData;var i=!!e.fn.prop;e.fn.attr2=function(){if(!i)return this.attr.apply(this,arguments);var e=this.prop.apply(this,arguments);return e&&e.jquery||"string"==typeof e?e:this.attr.apply(this,arguments)},e.fn.ajaxSubmit=function(t){function r(r){var a,n,i=e.param(r,t.traditional).split("&"),o=i.length,s=[];for(a=0;o>a;a++)i[a]=i[a].replace(/\+/g," "),n=i[a].split("="),s.push([decodeURIComponent(n[0]),decodeURIComponent(n[1])]);return s}function o(a){for(var n=new FormData,i=0;i<a.length;i++)n.append(a[i].name,a[i].value);if(t.extraData){var o=r(t.extraData);for(i=0;i<o.length;i++)o[i]&&n.append(o[i][0],o[i][1])}t.data=null;var s=e.extend(!0,{},e.ajaxSettings,t,{contentType:!1,processData:!1,cache:!1,type:u||"POST"});t.uploadProgress&&(s.xhr=function(){var r=e.ajaxSettings.xhr();return r.upload&&r.upload.addEventListener("progress",function(e){var r=0,a=e.loaded||e.position,n=e.total;e.lengthComputable&&(r=Math.ceil(a/n*100)),t.uploadProgress(e,a,n,r)},!1),r}),s.data=null;var c=s.beforeSend;return s.beforeSend=function(e,r){r.data=t.formData?t.formData:n,c&&c.call(this,e,r)},e.ajax(s)}function s(r){function n(e){var t=null;try{e.contentWindow&&(t=e.contentWindow.document)}catch(r){a("cannot get iframe.contentWindow document: "+r)}if(t)return t;try{t=e.contentDocument?e.contentDocument:e.document}catch(r){a("cannot get iframe.contentDocument: "+r),t=e.document}return t}function o(){function t(){try{var e=n(g).readyState;a("state = "+e),e&&"uninitialized"==e.toLowerCase()&&setTimeout(t,50)}catch(r){a("Server abort: ",r," (",r.name,")"),s(k),j&&clearTimeout(j),j=void 0}}var r=f.attr2("target"),i=f.attr2("action"),o="multipart/form-data",c=f.attr("enctype")||f.attr("encoding")||o;w.setAttribute("target",p),(!u||/post/i.test(u))&&w.setAttribute("method","POST"),i!=m.url&&w.setAttribute("action",m.url),m.skipEncodingOverride||u&&!/post/i.test(u)||f.attr({encoding:"multipart/form-data",enctype:"multipart/form-data"}),m.timeout&&(j=setTimeout(function(){T=!0,s(D)},m.timeout));var l=[];try{if(m.extraData)for(var d in m.extraData)m.extraData.hasOwnProperty(d)&&l.push(e.isPlainObject(m.extraData[d])&&m.extraData[d].hasOwnProperty("name")&&m.extraData[d].hasOwnProperty("value")?e('<input type="hidden" name="'+m.extraData[d].name+'">').val(m.extraData[d].value).appendTo(w)[0]:e('<input type="hidden" name="'+d+'">').val(m.extraData[d]).appendTo(w)[0]);m.iframeTarget||v.appendTo("body"),g.attachEvent?g.attachEvent("onload",s):g.addEventListener("load",s,!1),setTimeout(t,15);try{w.submit()}catch(h){var x=document.createElement("form").submit;x.apply(w)}}finally{w.setAttribute("action",i),w.setAttribute("enctype",c),r?w.setAttribute("target",r):f.removeAttr("target"),e(l).remove()}}function s(t){if(!x.aborted&&!F){if(M=n(g),M||(a("cannot access response document"),t=k),t===D&&x)return x.abort("timeout"),void S.reject(x,"timeout");if(t==k&&x)return x.abort("server abort"),void S.reject(x,"error","server abort");if(M&&M.location.href!=m.iframeSrc||T){g.detachEvent?g.detachEvent("onload",s):g.removeEventListener("load",s,!1);var r,i="success";try{if(T)throw"timeout";var o="xml"==m.dataType||M.XMLDocument||e.isXMLDoc(M);if(a("isXml="+o),!o&&window.opera&&(null===M.body||!M.body.innerHTML)&&--O)return a("requeing onLoad callback, DOM not available"),void setTimeout(s,250);var u=M.body?M.body:M.documentElement;x.responseText=u?u.innerHTML:null,x.responseXML=M.XMLDocument?M.XMLDocument:M,o&&(m.dataType="xml"),x.getResponseHeader=function(e){var t={"content-type":m.dataType};return t[e.toLowerCase()]},u&&(x.status=Number(u.getAttribute("status"))||x.status,x.statusText=u.getAttribute("statusText")||x.statusText);var c=(m.dataType||"").toLowerCase(),l=/(json|script|text)/.test(c);if(l||m.textarea){var f=M.getElementsByTagName("textarea")[0];if(f)x.responseText=f.value,x.status=Number(f.getAttribute("status"))||x.status,x.statusText=f.getAttribute("statusText")||x.statusText;else if(l){var p=M.getElementsByTagName("pre")[0],h=M.getElementsByTagName("body")[0];p?x.responseText=p.textContent?p.textContent:p.innerText:h&&(x.responseText=h.textContent?h.textContent:h.innerText)}}else"xml"==c&&!x.responseXML&&x.responseText&&(x.responseXML=X(x.responseText));try{E=_(x,c,m)}catch(y){i="parsererror",x.error=r=y||i}}catch(y){a("error caught: ",y),i="error",x.error=r=y||i}x.aborted&&(a("upload aborted"),i=null),x.status&&(i=x.status>=200&&x.status<300||304===x.status?"success":"error"),"success"===i?(m.success&&m.success.call(m.context,E,"success",x),S.resolve(x.responseText,"success",x),d&&e.event.trigger("ajaxSuccess",[x,m])):i&&(void 0===r&&(r=x.statusText),m.error&&m.error.call(m.context,x,i,r),S.reject(x,"error",r),d&&e.event.trigger("ajaxError",[x,m,r])),d&&e.event.trigger("ajaxComplete",[x,m]),d&&!--e.active&&e.event.trigger("ajaxStop"),m.complete&&m.complete.call(m.context,x,i),F=!0,m.timeout&&clearTimeout(j),setTimeout(function(){m.iframeTarget?v.attr("src",m.iframeSrc):v.remove(),x.responseXML=null},100)}}}var c,l,m,d,p,v,g,x,y,b,T,j,w=f[0],S=e.Deferred();if(S.abort=function(e){x.abort(e)},r)for(l=0;l<h.length;l++)c=e(h[l]),i?c.prop("disabled",!1):c.removeAttr("disabled");if(m=e.extend(!0,{},e.ajaxSettings,t),m.context=m.context||m,p="jqFormIO"+(new Date).getTime(),m.iframeTarget?(v=e(m.iframeTarget),b=v.attr2("name"),b?p=b:v.attr2("name",p)):(v=e('<iframe name="'+p+'" src="'+m.iframeSrc+'" />'),v.css({position:"absolute",top:"-1000px",left:"-1000px"})),g=v[0],x={aborted:0,responseText:null,responseXML:null,status:0,statusText:"n/a",getAllResponseHeaders:function(){},getResponseHeader:function(){},setRequestHeader:function(){},abort:function(t){var r="timeout"===t?"timeout":"aborted";a("aborting upload... "+r),this.aborted=1;try{g.contentWindow.document.execCommand&&g.contentWindow.document.execCommand("Stop")}catch(n){}v.attr("src",m.iframeSrc),x.error=r,m.error&&m.error.call(m.context,x,r,t),d&&e.event.trigger("ajaxError",[x,m,r]),m.complete&&m.complete.call(m.context,x,r)}},d=m.global,d&&0===e.active++&&e.event.trigger("ajaxStart"),d&&e.event.trigger("ajaxSend",[x,m]),m.beforeSend&&m.beforeSend.call(m.context,x,m)===!1)return m.global&&e.active--,S.reject(),S;if(x.aborted)return S.reject(),S;y=w.clk,y&&(b=y.name,b&&!y.disabled&&(m.extraData=m.extraData||{},m.extraData[b]=y.value,"image"==y.type&&(m.extraData[b+".x"]=w.clk_x,m.extraData[b+".y"]=w.clk_y)));var D=1,k=2,A=e("meta[name=csrf-token]").attr("content"),L=e("meta[name=csrf-param]").attr("content");L&&A&&(m.extraData=m.extraData||{},m.extraData[L]=A),m.forceSync?o():setTimeout(o,10);var E,M,F,O=50,X=e.parseXML||function(e,t){return window.ActiveXObject?(t=new ActiveXObject("Microsoft.XMLDOM"),t.async="false",t.loadXML(e)):t=(new DOMParser).parseFromString(e,"text/xml"),t&&t.documentElement&&"parsererror"!=t.documentElement.nodeName?t:null},C=e.parseJSON||function(e){return window.eval("("+e+")")},_=function(t,r,a){var n=t.getResponseHeader("content-type")||"",i="xml"===r||!r&&n.indexOf("xml")>=0,o=i?t.responseXML:t.responseText;return i&&"parsererror"===o.documentElement.nodeName&&e.error&&e.error("parsererror"),a&&a.dataFilter&&(o=a.dataFilter(o,r)),"string"==typeof o&&("json"===r||!r&&n.indexOf("json")>=0?o=C(o):("script"===r||!r&&n.indexOf("javascript")>=0)&&e.globalEval(o)),o};return S}if(!this.length)return a("ajaxSubmit: skipping submit process - no element selected"),this;var u,c,l,f=this;"function"==typeof t?t={success:t}:void 0===t&&(t={}),u=t.type||this.attr2("method"),c=t.url||this.attr2("action"),l="string"==typeof c?e.trim(c):"",l=l||window.location.href||"",l&&(l=(l.match(/^([^#]+)/)||[])[1]),t=e.extend(!0,{url:l,success:e.ajaxSettings.success,type:u||e.ajaxSettings.type,iframeSrc:/^https/i.test(window.location.href||"")?"javascript:false":"about:blank"},t);var m={};if(this.trigger("form-pre-serialize",[this,t,m]),m.veto)return a("ajaxSubmit: submit vetoed via form-pre-serialize trigger"),this;if(t.beforeSerialize&&t.beforeSerialize(this,t)===!1)return a("ajaxSubmit: submit aborted via beforeSerialize callback"),this;var d=t.traditional;void 0===d&&(d=e.ajaxSettings.traditional);var p,h=[],v=this.formToArray(t.semantic,h);if(t.data&&(t.extraData=t.data,p=e.param(t.data,d)),t.beforeSubmit&&t.beforeSubmit(v,this,t)===!1)return a("ajaxSubmit: submit aborted via beforeSubmit callback"),this;if(this.trigger("form-submit-validate",[v,this,t,m]),m.veto)return a("ajaxSubmit: submit vetoed via form-submit-validate trigger"),this;var g=e.param(v,d);p&&(g=g?g+"&"+p:p),"GET"==t.type.toUpperCase()?(t.url+=(t.url.indexOf("?")>=0?"&":"?")+g,t.data=null):t.data=g;var x=[];if(t.resetForm&&x.push(function(){f.resetForm()}),t.clearForm&&x.push(function(){f.clearForm(t.includeHidden)}),!t.dataType&&t.target){var y=t.success||function(){};x.push(function(r){var a=t.replaceTarget?"replaceWith":"html";e(t.target)[a](r).each(y,arguments)})}else t.success&&x.push(t.success);if(t.success=function(e,r,a){for(var n=t.context||this,i=0,o=x.length;o>i;i++)x[i].apply(n,[e,r,a||f,f])},t.error){var b=t.error;t.error=function(e,r,a){var n=t.context||this;b.apply(n,[e,r,a,f])}}if(t.complete){var T=t.complete;t.complete=function(e,r){var a=t.context||this;T.apply(a,[e,r,f])}}var j=e("input[type=file]:enabled",this).filter(function(){return""!==e(this).val()}),w=j.length>0,S="multipart/form-data",D=f.attr("enctype")==S||f.attr("encoding")==S,k=n.fileapi&&n.formdata;a("fileAPI :"+k);var A,L=(w||D)&&!k;t.iframe!==!1&&(t.iframe||L)?t.closeKeepAlive?e.get(t.closeKeepAlive,function(){A=s(v)}):A=s(v):A=(w||D)&&k?o(v):e.ajax(t),f.removeData("jqxhr").data("jqxhr",A);for(var E=0;E<h.length;E++)h[E]=null;return this.trigger("form-submit-notify",[this,t]),this},e.fn.ajaxForm=function(n){if(n=n||{},n.delegation=n.delegation&&e.isFunction(e.fn.on),!n.delegation&&0===this.length){var i={s:this.selector,c:this.context};return!e.isReady&&i.s?(a("DOM not ready, queuing ajaxForm"),e(function(){e(i.s,i.c).ajaxForm(n)}),this):(a("terminating; zero elements found by selector"+(e.isReady?"":" (DOM not ready)")),this)}return n.delegation?(e(document).off("submit.form-plugin",this.selector,t).off("click.form-plugin",this.selector,r).on("submit.form-plugin",this.selector,n,t).on("click.form-plugin",this.selector,n,r),this):this.ajaxFormUnbind().bind("submit.form-plugin",n,t).bind("click.form-plugin",n,r)},e.fn.ajaxFormUnbind=function(){return this.unbind("submit.form-plugin click.form-plugin")},e.fn.formToArray=function(t,r){var a=[];if(0===this.length)return a;var i,o=this[0],s=this.attr("id"),u=t?o.getElementsByTagName("*"):o.elements;if(u&&!/MSIE [678]/.test(navigator.userAgent)&&(u=e(u).get()),s&&(i=e(':input[form="'+s+'"]').get(),i.length&&(u=(u||[]).concat(i))),!u||!u.length)return a;var c,l,f,m,d,p,h;for(c=0,p=u.length;p>c;c++)if(d=u[c],f=d.name,f&&!d.disabled)if(t&&o.clk&&"image"==d.type)o.clk==d&&(a.push({name:f,value:e(d).val(),type:d.type}),a.push({name:f+".x",value:o.clk_x},{name:f+".y",value:o.clk_y}));else if(m=e.fieldValue(d,!0),m&&m.constructor==Array)for(r&&r.push(d),l=0,h=m.length;h>l;l++)a.push({name:f,value:m[l]});else if(n.fileapi&&"file"==d.type){r&&r.push(d);var v=d.files;if(v.length)for(l=0;l<v.length;l++)a.push({name:f,value:v[l],type:d.type});else a.push({name:f,value:"",type:d.type})}else null!==m&&"undefined"!=typeof m&&(r&&r.push(d),a.push({name:f,value:m,type:d.type,required:d.required}));if(!t&&o.clk){var g=e(o.clk),x=g[0];f=x.name,f&&!x.disabled&&"image"==x.type&&(a.push({name:f,value:g.val()}),a.push({name:f+".x",value:o.clk_x},{name:f+".y",value:o.clk_y}))}return a},e.fn.formSerialize=function(t){return e.param(this.formToArray(t))},e.fn.fieldSerialize=function(t){var r=[];return this.each(function(){var a=this.name;if(a){var n=e.fieldValue(this,t);if(n&&n.constructor==Array)for(var i=0,o=n.length;o>i;i++)r.push({name:a,value:n[i]});else null!==n&&"undefined"!=typeof n&&r.push({name:this.name,value:n})}}),e.param(r)},e.fn.fieldValue=function(t){for(var r=[],a=0,n=this.length;n>a;a++){var i=this[a],o=e.fieldValue(i,t);null===o||"undefined"==typeof o||o.constructor==Array&&!o.length||(o.constructor==Array?e.merge(r,o):r.push(o))}return r},e.fieldValue=function(t,r){var a=t.name,n=t.type,i=t.tagName.toLowerCase();if(void 0===r&&(r=!0),r&&(!a||t.disabled||"reset"==n||"button"==n||("checkbox"==n||"radio"==n)&&!t.checked||("submit"==n||"image"==n)&&t.form&&t.form.clk!=t||"select"==i&&-1==t.selectedIndex))return null;if("select"==i){var o=t.selectedIndex;if(0>o)return null;for(var s=[],u=t.options,c="select-one"==n,l=c?o+1:u.length,f=c?o:0;l>f;f++){var m=u[f];if(m.selected){var d=m.value;if(d||(d=m.attributes&&m.attributes.value&&!m.attributes.value.specified?m.text:m.value),c)return d;s.push(d)}}return s}return e(t).val()},e.fn.clearForm=function(t){return this.each(function(){e("input,select,textarea",this).clearFields(t)})},e.fn.clearFields=e.fn.clearInputs=function(t){var r=/^(?:color|date|datetime|email|month|number|password|range|search|tel|text|time|url|week)$/i;return this.each(function(){var a=this.type,n=this.tagName.toLowerCase();r.test(a)||"textarea"==n?this.value="":"checkbox"==a||"radio"==a?this.checked=!1:"select"==n?this.selectedIndex=-1:"file"==a?/MSIE/.test(navigator.userAgent)?e(this).replaceWith(e(this).clone(!0)):e(this).val(""):t&&(t===!0&&/hidden/.test(a)||"string"==typeof t&&e(this).is(t))&&(this.value="")})},e.fn.resetForm=function(){return this.each(function(){("function"==typeof this.reset||"object"==typeof this.reset&&!this.reset.nodeType)&&this.reset()})},e.fn.enable=function(e){return void 0===e&&(e=!0),this.each(function(){this.disabled=!e})},e.fn.selected=function(t){return void 0===t&&(t=!0),this.each(function(){var r=this.type;if("checkbox"==r||"radio"==r)this.checked=t;else if("option"==this.tagName.toLowerCase()){var a=e(this).parent("select");t&&a[0]&&"select-one"==a[0].type&&a.find("option").selected(!1),this.selected=t}})},e.fn.ajaxSubmit.debug=!1});
</script>
<script>
/*! jQuery Validation Plugin - v1.12.0 - 4/1/2014
* http://jqueryvalidation.org/
* Copyright (c) 2014 Jörn Zaefferer; Licensed MIT */
!function(a){a.extend(a.fn,{validate:function(b){if(!this.length)return void(b&&b.debug&&window.console&&console.warn("Nothing selected, can't validate, returning nothing."));var c=a.data(this[0],"validator");return c?c:(this.attr("novalidate","novalidate"),c=new a.validator(b,this[0]),a.data(this[0],"validator",c),c.settings.onsubmit&&(this.validateDelegate(":submit","click",function(b){c.settings.submitHandler&&(c.submitButton=b.target),a(b.target).hasClass("cancel")&&(c.cancelSubmit=!0),void 0!==a(b.target).attr("formnovalidate")&&(c.cancelSubmit=!0)}),this.submit(function(b){function d(){var d;return c.settings.submitHandler?(c.submitButton&&(d=a("<input type='hidden'/>").attr("name",c.submitButton.name).val(a(c.submitButton).val()).appendTo(c.currentForm)),c.settings.submitHandler.call(c,c.currentForm,b),c.submitButton&&d.remove(),!1):!0}return c.settings.debug&&b.preventDefault(),c.cancelSubmit?(c.cancelSubmit=!1,d()):c.form()?c.pendingRequest?(c.formSubmitted=!0,!1):d():(c.focusInvalid(),!1)})),c)},valid:function(){var b,c;return a(this[0]).is("form")?b=this.validate().form():(b=!0,c=a(this[0].form).validate(),this.each(function(){b=c.element(this)&&b})),b},removeAttrs:function(b){var c={},d=this;return a.each(b.split(/\s/),function(a,b){c[b]=d.attr(b),d.removeAttr(b)}),c},rules:function(b,c){var d,e,f,g,h,i,j=this[0];if(b)switch(d=a.data(j.form,"validator").settings,e=d.rules,f=a.validator.staticRules(j),b){case"add":a.extend(f,a.validator.normalizeRule(c)),delete f.messages,e[j.name]=f,c.messages&&(d.messages[j.name]=a.extend(d.messages[j.name],c.messages));break;case"remove":return c?(i={},a.each(c.split(/\s/),function(b,c){i[c]=f[c],delete f[c],"required"===c&&a(j).removeAttr("aria-required")}),i):(delete e[j.name],f)}return g=a.validator.normalizeRules(a.extend({},a.validator.classRules(j),a.validator.attributeRules(j),a.validator.dataRules(j),a.validator.staticRules(j)),j),g.required&&(h=g.required,delete g.required,g=a.extend({required:h},g),a(j).attr("aria-required","true")),g.remote&&(h=g.remote,delete g.remote,g=a.extend(g,{remote:h})),g}}),a.extend(a.expr[":"],{blank:function(b){return!a.trim(""+a(b).val())},filled:function(b){return!!a.trim(""+a(b).val())},unchecked:function(b){return!a(b).prop("checked")}}),a.validator=function(b,c){this.settings=a.extend(!0,{},a.validator.defaults,b),this.currentForm=c,this.init()},a.validator.format=function(b,c){return 1===arguments.length?function(){var c=a.makeArray(arguments);return c.unshift(b),a.validator.format.apply(this,c)}:(arguments.length>2&&c.constructor!==Array&&(c=a.makeArray(arguments).slice(1)),c.constructor!==Array&&(c=[c]),a.each(c,function(a,c){b=b.replace(new RegExp("\\{"+a+"\\}","g"),function(){return c})}),b)},a.extend(a.validator,{defaults:{messages:{},groups:{},rules:{},errorClass:"error",validClass:"valid",errorElement:"label",focusInvalid:!0,errorContainer:a([]),errorLabelContainer:a([]),onsubmit:!0,ignore:":hidden",ignoreTitle:!1,onfocusin:function(a){this.lastActive=a,this.settings.focusCleanup&&!this.blockFocusCleanup&&(this.settings.unhighlight&&this.settings.unhighlight.call(this,a,this.settings.errorClass,this.settings.validClass),this.addWrapper(this.errorsFor(a)).hide())},onfocusout:function(a){this.checkable(a)||!(a.name in this.submitted)&&this.optional(a)||this.element(a)},onkeyup:function(a,b){(9!==b.which||""!==this.elementValue(a))&&(a.name in this.submitted||a===this.lastElement)&&this.element(a)},onclick:function(a){a.name in this.submitted?this.element(a):a.parentNode.name in this.submitted&&this.element(a.parentNode)},highlight:function(b,c,d){"radio"===b.type?this.findByName(b.name).addClass(c).removeClass(d):a(b).addClass(c).removeClass(d)},unhighlight:function(b,c,d){"radio"===b.type?this.findByName(b.name).removeClass(c).addClass(d):a(b).removeClass(c).addClass(d)}},setDefaults:function(b){a.extend(a.validator.defaults,b)},messages:{required:"This field is required.",remote:"Please fix this field.",email:"Please enter a valid email address.",url:"Please enter a valid URL.",date:"Please enter a valid date.",dateISO:"Please enter a valid date (ISO).",number:"Please enter a valid number.",digits:"Please enter only digits.",creditcard:"Please enter a valid credit card number.",equalTo:"Please enter the same value again.",maxlength:a.validator.format("Please enter no more than {0} characters."),minlength:a.validator.format("Please enter at least {0} characters."),rangelength:a.validator.format("Please enter a value between {0} and {1} characters long."),range:a.validator.format("Please enter a value between {0} and {1}."),max:a.validator.format("Please enter a value less than or equal to {0}."),min:a.validator.format("Please enter a value greater than or equal to {0}.")},autoCreateRanges:!1,prototype:{init:function(){function b(b){var c=a.data(this[0].form,"validator"),d="on"+b.type.replace(/^validate/,""),e=c.settings;e[d]&&!this.is(e.ignore)&&e[d].call(c,this[0],b)}this.labelContainer=a(this.settings.errorLabelContainer),this.errorContext=this.labelContainer.length&&this.labelContainer||a(this.currentForm),this.containers=a(this.settings.errorContainer).add(this.settings.errorLabelContainer),this.submitted={},this.valueCache={},this.pendingRequest=0,this.pending={},this.invalid={},this.reset();var c,d=this.groups={};a.each(this.settings.groups,function(b,c){"string"==typeof c&&(c=c.split(/\s/)),a.each(c,function(a,c){d[c]=b})}),c=this.settings.rules,a.each(c,function(b,d){c[b]=a.validator.normalizeRule(d)}),a(this.currentForm).validateDelegate(":text, [type='password'], [type='file'], select, textarea, [type='number'], [type='search'] ,[type='tel'], [type='url'], [type='email'], [type='datetime'], [type='date'], [type='month'], [type='week'], [type='time'], [type='datetime-local'], [type='range'], [type='color'] ","focusin focusout keyup",b).validateDelegate("[type='radio'], [type='checkbox'], select, option","click",b),this.settings.invalidHandler&&a(this.currentForm).bind("invalid-form.validate",this.settings.invalidHandler),a(this.currentForm).find("[required], [data-rule-required], .required").attr("aria-required","true")},form:function(){return this.checkForm(),a.extend(this.submitted,this.errorMap),this.invalid=a.extend({},this.errorMap),this.valid()||a(this.currentForm).triggerHandler("invalid-form",[this]),this.showErrors(),this.valid()},checkForm:function(){this.prepareForm();for(var a=0,b=this.currentElements=this.elements();b[a];a++)this.check(b[a]);return this.valid()},element:function(b){var c=this.clean(b),d=this.validationTargetFor(c),e=!0;return this.lastElement=d,void 0===d?delete this.invalid[c.name]:(this.prepareElement(d),this.currentElements=a(d),e=this.check(d)!==!1,e?delete this.invalid[d.name]:this.invalid[d.name]=!0),a(b).attr("aria-invalid",!e),this.numberOfInvalids()||(this.toHide=this.toHide.add(this.containers)),this.showErrors(),e},showErrors:function(b){if(b){a.extend(this.errorMap,b),this.errorList=[];for(var c in b)this.errorList.push({message:b[c],element:this.findByName(c)[0]});this.successList=a.grep(this.successList,function(a){return!(a.name in b)})}this.settings.showErrors?this.settings.showErrors.call(this,this.errorMap,this.errorList):this.defaultShowErrors()},resetForm:function(){a.fn.resetForm&&a(this.currentForm).resetForm(),this.submitted={},this.lastElement=null,this.prepareForm(),this.hideErrors(),this.elements().removeClass(this.settings.errorClass).removeData("previousValue").removeAttr("aria-invalid")},numberOfInvalids:function(){return this.objectLength(this.invalid)},objectLength:function(a){var b,c=0;for(b in a)c++;return c},hideErrors:function(){this.addWrapper(this.toHide).hide()},valid:function(){return 0===this.size()},size:function(){return this.errorList.length},focusInvalid:function(){if(this.settings.focusInvalid)try{a(this.findLastActive()||this.errorList.length&&this.errorList[0].element||[]).filter(":visible").focus().trigger("focusin")}catch(b){}},findLastActive:function(){var b=this.lastActive;return b&&1===a.grep(this.errorList,function(a){return a.element.name===b.name}).length&&b},elements:function(){var b=this,c={};return a(this.currentForm).find("input, select, textarea").not(":submit, :reset, :image, [disabled]").not(this.settings.ignore).filter(function(){return!this.name&&b.settings.debug&&window.console&&console.error("%o has no name assigned",this),this.name in c||!b.objectLength(a(this).rules())?!1:(c[this.name]=!0,!0)})},clean:function(b){return a(b)[0]},errors:function(){var b=this.settings.errorClass.split(" ").join(".");return a(this.settings.errorElement+"."+b,this.errorContext)},reset:function(){this.successList=[],this.errorList=[],this.errorMap={},this.toShow=a([]),this.toHide=a([]),this.currentElements=a([])},prepareForm:function(){this.reset(),this.toHide=this.errors().add(this.containers)},prepareElement:function(a){this.reset(),this.toHide=this.errorsFor(a)},elementValue:function(b){var c,d=a(b),e=d.attr("type");return"radio"===e||"checkbox"===e?a("input[name='"+d.attr("name")+"']:checked").val():(c=d.val(),"string"==typeof c?c.replace(/\r/g,""):c)},check:function(b){b=this.validationTargetFor(this.clean(b));var c,d,e,f=a(b).rules(),g=a.map(f,function(a,b){return b}).length,h=!1,i=this.elementValue(b);for(d in f){e={method:d,parameters:f[d]};try{if(c=a.validator.methods[d].call(this,i,b,e.parameters),"dependency-mismatch"===c&&1===g){h=!0;continue}if(h=!1,"pending"===c)return void(this.toHide=this.toHide.not(this.errorsFor(b)));if(!c)return this.formatAndAdd(b,e),!1}catch(j){throw this.settings.debug&&window.console&&console.log("Exception occurred when checking element "+b.id+", check the '"+e.method+"' method.",j),j}}if(!h)return this.objectLength(f)&&this.successList.push(b),!0},customDataMessage:function(b,c){return a(b).data("msg"+c[0].toUpperCase()+c.substring(1).toLowerCase())||a(b).data("msg")},customMessage:function(a,b){var c=this.settings.messages[a];return c&&(c.constructor===String?c:c[b])},findDefined:function(){for(var a=0;a<arguments.length;a++)if(void 0!==arguments[a])return arguments[a];return void 0},defaultMessage:function(b,c){return this.findDefined(this.customMessage(b.name,c),this.customDataMessage(b,c),!this.settings.ignoreTitle&&b.title||void 0,a.validator.messages[c],"<strong>Warning: No message defined for "+b.name+"</strong>")},formatAndAdd:function(b,c){var d=this.defaultMessage(b,c.method),e=/\$?\{(\d+)\}/g;"function"==typeof d?d=d.call(this,c.parameters,b):e.test(d)&&(d=a.validator.format(d.replace(e,"{$1}"),c.parameters)),this.errorList.push({message:d,element:b,method:c.method}),this.errorMap[b.name]=d,this.submitted[b.name]=d},addWrapper:function(a){return this.settings.wrapper&&(a=a.add(a.parent(this.settings.wrapper))),a},defaultShowErrors:function(){var a,b,c;for(a=0;this.errorList[a];a++)c=this.errorList[a],this.settings.highlight&&this.settings.highlight.call(this,c.element,this.settings.errorClass,this.settings.validClass),this.showLabel(c.element,c.message);if(this.errorList.length&&(this.toShow=this.toShow.add(this.containers)),this.settings.success)for(a=0;this.successList[a];a++)this.showLabel(this.successList[a]);if(this.settings.unhighlight)for(a=0,b=this.validElements();b[a];a++)this.settings.unhighlight.call(this,b[a],this.settings.errorClass,this.settings.validClass);this.toHide=this.toHide.not(this.toShow),this.hideErrors(),this.addWrapper(this.toShow).show()},validElements:function(){return this.currentElements.not(this.invalidElements())},invalidElements:function(){return a(this.errorList).map(function(){return this.element})},showLabel:function(b,c){var d=this.errorsFor(b);d.length?(d.removeClass(this.settings.validClass).addClass(this.settings.errorClass),d.html(c)):(d=a("<"+this.settings.errorElement+">").attr("for",this.idOrName(b)).addClass(this.settings.errorClass).html(c||""),this.settings.wrapper&&(d=d.hide().show().wrap("<"+this.settings.wrapper+"/>").parent()),this.labelContainer.append(d).length||(this.settings.errorPlacement?this.settings.errorPlacement(d,a(b)):d.insertAfter(b))),!c&&this.settings.success&&(d.text(""),"string"==typeof this.settings.success?d.addClass(this.settings.success):this.settings.success(d,b)),this.toShow=this.toShow.add(d)},errorsFor:function(b){var c=this.idOrName(b);return this.errors().filter(function(){return a(this).attr("for")===c})},idOrName:function(a){return this.groups[a.name]||(this.checkable(a)?a.name:a.id||a.name)},validationTargetFor:function(a){return this.checkable(a)&&(a=this.findByName(a.name).not(this.settings.ignore)[0]),a},checkable:function(a){return/radio|checkbox/i.test(a.type)},findByName:function(b){return a(this.currentForm).find("[name='"+b+"']")},getLength:function(b,c){switch(c.nodeName.toLowerCase()){case"select":return a("option:selected",c).length;case"input":if(this.checkable(c))return this.findByName(c.name).filter(":checked").length}return b.length},depend:function(a,b){return this.dependTypes[typeof a]?this.dependTypes[typeof a](a,b):!0},dependTypes:{"boolean":function(a){return a},string:function(b,c){return!!a(b,c.form).length},"function":function(a,b){return a(b)}},optional:function(b){var c=this.elementValue(b);return!a.validator.methods.required.call(this,c,b)&&"dependency-mismatch"},startRequest:function(a){this.pending[a.name]||(this.pendingRequest++,this.pending[a.name]=!0)},stopRequest:function(b,c){this.pendingRequest--,this.pendingRequest<0&&(this.pendingRequest=0),delete this.pending[b.name],c&&0===this.pendingRequest&&this.formSubmitted&&this.form()?(a(this.currentForm).submit(),this.formSubmitted=!1):!c&&0===this.pendingRequest&&this.formSubmitted&&(a(this.currentForm).triggerHandler("invalid-form",[this]),this.formSubmitted=!1)},previousValue:function(b){return a.data(b,"previousValue")||a.data(b,"previousValue",{old:null,valid:!0,message:this.defaultMessage(b,"remote")})}},classRuleSettings:{required:{required:!0},email:{email:!0},url:{url:!0},date:{date:!0},dateISO:{dateISO:!0},number:{number:!0},digits:{digits:!0},creditcard:{creditcard:!0}},addClassRules:function(b,c){b.constructor===String?this.classRuleSettings[b]=c:a.extend(this.classRuleSettings,b)},classRules:function(b){var c={},d=a(b).attr("class");return d&&a.each(d.split(" "),function(){this in a.validator.classRuleSettings&&a.extend(c,a.validator.classRuleSettings[this])}),c},attributeRules:function(b){var c,d,e={},f=a(b),g=b.getAttribute("type");for(c in a.validator.methods)"required"===c?(d=b.getAttribute(c),""===d&&(d=!0),d=!!d):d=f.attr(c),/min|max/.test(c)&&(null===g||/number|range|text/.test(g))&&(d=Number(d)),d||0===d?e[c]=d:g===c&&"range"!==g&&(e[c]=!0);return e.maxlength&&/-1|2147483647|524288/.test(e.maxlength)&&delete e.maxlength,e},dataRules:function(b){var c,d,e={},f=a(b);for(c in a.validator.methods)d=f.data("rule"+c[0].toUpperCase()+c.substring(1).toLowerCase()),void 0!==d&&(e[c]=d);return e},staticRules:function(b){var c={},d=a.data(b.form,"validator");return d.settings.rules&&(c=a.validator.normalizeRule(d.settings.rules[b.name])||{}),c},normalizeRules:function(b,c){return a.each(b,function(d,e){if(e===!1)return void delete b[d];if(e.param||e.depends){var f=!0;switch(typeof e.depends){case"string":f=!!a(e.depends,c.form).length;break;case"function":f=e.depends.call(c,c)}f?b[d]=void 0!==e.param?e.param:!0:delete b[d]}}),a.each(b,function(d,e){b[d]=a.isFunction(e)?e(c):e}),a.each(["minlength","maxlength"],function(){b[this]&&(b[this]=Number(b[this]))}),a.each(["rangelength","range"],function(){var c;b[this]&&(a.isArray(b[this])?b[this]=[Number(b[this][0]),Number(b[this][1])]:"string"==typeof b[this]&&(c=b[this].split(/[\s,]+/),b[this]=[Number(c[0]),Number(c[1])]))}),a.validator.autoCreateRanges&&(b.min&&b.max&&(b.range=[b.min,b.max],delete b.min,delete b.max),b.minlength&&b.maxlength&&(b.rangelength=[b.minlength,b.maxlength],delete b.minlength,delete b.maxlength)),b},normalizeRule:function(b){if("string"==typeof b){var c={};a.each(b.split(/\s/),function(){c[this]=!0}),b=c}return b},addMethod:function(b,c,d){a.validator.methods[b]=c,a.validator.messages[b]=void 0!==d?d:a.validator.messages[b],c.length<3&&a.validator.addClassRules(b,a.validator.normalizeRule(b))},methods:{required:function(b,c,d){if(!this.depend(d,c))return"dependency-mismatch";if("select"===c.nodeName.toLowerCase()){var e=a(c).val();return e&&e.length>0}return this.checkable(c)?this.getLength(b,c)>0:a.trim(b).length>0},email:function(a,b){return this.optional(b)||/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(a)},url:function(a,b){return this.optional(b)||/^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(a)},date:function(a,b){return this.optional(b)||!/Invalid|NaN/.test(new Date(a).toString())},dateISO:function(a,b){return this.optional(b)||/^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/.test(a)},number:function(a,b){return this.optional(b)||/^-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(a)},digits:function(a,b){return this.optional(b)||/^\d+$/.test(a)},creditcard:function(a,b){if(this.optional(b))return"dependency-mismatch";if(/[^0-9 \-]+/.test(a))return!1;var c,d,e=0,f=0,g=!1;if(a=a.replace(/\D/g,""),a.length<13||a.length>19)return!1;for(c=a.length-1;c>=0;c--)d=a.charAt(c),f=parseInt(d,10),g&&(f*=2)>9&&(f-=9),e+=f,g=!g;return e%10===0},minlength:function(b,c,d){var e=a.isArray(b)?b.length:this.getLength(a.trim(b),c);return this.optional(c)||e>=d},maxlength:function(b,c,d){var e=a.isArray(b)?b.length:this.getLength(a.trim(b),c);return this.optional(c)||d>=e},rangelength:function(b,c,d){var e=a.isArray(b)?b.length:this.getLength(a.trim(b),c);return this.optional(c)||e>=d[0]&&e<=d[1]},min:function(a,b,c){return this.optional(b)||a>=c},max:function(a,b,c){return this.optional(b)||c>=a},range:function(a,b,c){return this.optional(b)||a>=c[0]&&a<=c[1]},equalTo:function(b,c,d){var e=a(d);return this.settings.onfocusout&&e.unbind(".validate-equalTo").bind("blur.validate-equalTo",function(){a(c).valid()}),b===e.val()},remote:function(b,c,d){if(this.optional(c))return"dependency-mismatch";var e,f,g=this.previousValue(c);return this.settings.messages[c.name]||(this.settings.messages[c.name]={}),g.originalMessage=this.settings.messages[c.name].remote,this.settings.messages[c.name].remote=g.message,d="string"==typeof d&&{url:d}||d,g.old===b?g.valid:(g.old=b,e=this,this.startRequest(c),f={},f[c.name]=b,a.ajax(a.extend(!0,{url:d,mode:"abort",port:"validate"+c.name,dataType:"json",data:f,context:e.currentForm,success:function(d){var f,h,i,j=d===!0||"true"===d;e.settings.messages[c.name].remote=g.originalMessage,j?(i=e.formSubmitted,e.prepareElement(c),e.formSubmitted=i,e.successList.push(c),delete e.invalid[c.name],e.showErrors()):(f={},h=d||e.defaultMessage(c,"remote"),f[c.name]=g.message=a.isFunction(h)?h(b):h,e.invalid[c.name]=!0,e.showErrors(f)),g.valid=j,e.stopRequest(c,j)}},d)),"pending")}}}),a.format=function(){throw"$.format has been deprecated. Please use $.validator.format instead."}}(jQuery),function(a){var b,c={};a.ajaxPrefilter?a.ajaxPrefilter(function(a,b,d){var e=a.port;"abort"===a.mode&&(c[e]&&c[e].abort(),c[e]=d)}):(b=a.ajax,a.ajax=function(d){var e=("mode"in d?d:a.ajaxSettings).mode,f=("port"in d?d:a.ajaxSettings).port;return"abort"===e?(c[f]&&c[f].abort(),c[f]=b.apply(this,arguments),c[f]):b.apply(this,arguments)})}(jQuery),function(a){a.extend(a.fn,{validateDelegate:function(b,c,d){return this.bind(c,function(c){var e=a(c.target);return e.is(b)?d.apply(e,arguments):void 0})}})}(jQuery);
</script>
<script>
// ADDITIONAL JQUERY VALIDATE METHODS
(function($) {
// Validate a multifield birthday
$.validator.addMethod("mc_birthday", function(date, element, grouping_class) {
var isValid = false;
var $fields = $('input:not(:hidden)' , $(element).closest(grouping_class));
if ($fields.filter(':filled').length == 0 && this.optional(element)) {
isValid = true; // None have been filled out, so no error
} else {
var dateArray = new Array();
dateArray['month'] = $fields.filter("input[name*='[month]']").val();
dateArray['day'] = $fields.filter("input[name*='[day]']").val();
// correct month value
dateArray['month'] = dateArray['month'] - 1;
var testDate = new Date(1970, dateArray['month'], dateArray['day']);
if (testDate.getDate()!=dateArray['day'] || testDate.getMonth()!=dateArray['month']) {
isValid = false;
} else {
isValid = true;
}
}
return isValid;
}, "Please enter a valid month and day.");
// Validate a multifield date
$.validator.addMethod("mc_date", function(date, element, grouping_class) {
var isValid = false;
var $fields = $('input:not(:hidden)' , $(element).closest(grouping_class));
if ($fields.filter(':filled').length == 0 && this.optional(element)) {
isValid = true; // None have been filled out, so no error
} else {
var dateArray = new Array();
dateArray['month'] = $fields.filter("input[name*='[month]']").val();
dateArray['day'] = $fields.filter("input[name*='[day]']").val();
dateArray['year'] = $fields.filter("input[name*='[year]']").val();
// correct month value
dateArray['month'] = dateArray['month'] - 1;
// correct year value
if (dateArray['year'].length < 4) {
dateArray['year'] = (parseInt(dateArray['year']) < 50) ? 2000 + parseInt(dateArray['year']) : 1900 + parseInt(dateArray['year']);
}
var testDate = new Date(dateArray['year'], dateArray['month'], dateArray['day']);
if (testDate.getDate()!=dateArray['day'] || testDate.getMonth()!=dateArray['month'] || testDate.getFullYear()!=dateArray['year']) {
isValid = false;
} else {
isValid = true;
}
}
return isValid;
}, "Please enter a valid date");
// Validate a multifield phone number
$.validator.addMethod("mc_phone", function(phone_number, element, grouping_class) {
var isValid = false;
var $fields = $('input:filled:not(:hidden)' , $(element).closest(grouping_class));
if ($fields.length == 0 && this.optional(element)) {
isValid = true; // None have been filled out, so no error
} else {
phone_number = $fields.eq(0).val() + $fields.eq(1).val() + $fields.eq(2).val();
isValid = phone_number.length == 10 && phone_number.match(/[0-9]{9}/);
}
return isValid;
}, "Please specify a valid phone number");
$.validator.addMethod("skip_or_complete_group", function(value, element, grouping_class) {
var $fields = $('input:not(:hidden)' , $(element).closest(grouping_class)),
$fieldsFirst = $fields.eq(0),
validator = $fieldsFirst.data("valid_skip") ? $fieldsFirst.data("valid_skip") : $.extend({}, this),
numberFilled = $fields.filter(function() {
return validator.elementValue(this);
}).length,
isValid = numberFilled === 0 || numberFilled === $fields.length;
// Store the cloned validator for future validation
$fieldsFirst.data("valid_skip", validator);
// If element isn't being validated, run each field's validation rules
if (!$(element).data("being_validated")) {
$fields.data("being_validated", true);
$fields.each(function() {
validator.element(this);
});
$fields.data("being_validated", false);
}
return isValid;
}, $.validator.format("Please supply missing fields."));
$.validator.addMethod("skip_or_fill_minimum", function(value, element, options) {
var $fields = $(options[1], element.form),
$fieldsFirst = $fields.eq(0),
validator = $fieldsFirst.data("valid_skip") ? $fieldsFirst.data("valid_skip") : $.extend({}, this),
numberFilled = $fields.filter(function() {
return validator.elementValue(this);
}).length,
isValid = numberFilled === 0 || numberFilled >= options[0];
console.log($fields.eq(0));
// Store the cloned validator for future validation
$fieldsFirst.data("valid_skip", validator);
// If element isn't being validated, run each skip_or_fill_minimum field's validation rules
if (!$(element).data("being_validated")) {
$fields.data("being_validated", true);
$fields.each(function() {
validator.element(this);
});
$fields.data("being_validated", false);
}
return isValid;
}, $.validator.format("Please either skip these fields or fill at least {0} of them."));
$.validator.addMethod("zipcodeUS", function(value, element) {
return this.optional(element) || /^\d{5}-\d{4}$|^\d{5}$/.test(value);
}, "The specified US ZIP Code is invalid");
}(jQuery));
</script>
<script>
// MC
(function($) {
var err_style = '';
try {
err_style = mc_custom_error_style;
} catch(e){
err_style = '#mc_embed_signup input.mce_inline_error { border-color:#6B0505; } #mc_embed_signup div.mce_inline_error { margin: 0 0 1em 0; padding: 5px 10px; background-color:#6B0505; font-weight: bold; z-index: 1; color:#fff; }';
}
var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = err_style;
} else {
style.appendChild(document.createTextNode(err_style));
}
head.appendChild(style);
// Expose extra mc form methods in global var
window.mc = {
openPopup: function() {
$('#mc_embed_signup a.mc_embed_close').show();
setTimeout( function(){ $('#mc_embed_signup').fadeIn(); } , mc.delayPopup);
},
closePopup: function() {
$('#mc_embed_signup').hide();
var now = new Date();
var expires_date = new Date( now.getTime() + 31536000000 );
document.cookie = 'MCEvilPopupClosed=yes;expires=' + expires_date.toGMTString()+';path=/';
},
/**
* Figure out if we should show the popup (if they've closed it before, don't show it.)
*/
evalPopup: function() {
$('#mc_embed_signup').hide();
cks = document.cookie.split(';');
for(i=0; i<cks.length; i++){
parts = cks[i].split('=');
if (parts[0].indexOf('MCEvilPopupClosed') != -1) mc.showPopup = false;
}
if (mc.showPopup) mc.openPopup();
},
/**
* Grab the list subscribe url from the form action and make it work for an ajax post.
*/
getAjaxSubmitUrl: function() {
var url = $("form#mc-embedded-subscribe-form").attr("action");
console.log(url);
url = url.replace("/post?u=", "/post-json?u=");
url += "&c=?";
return url;
},
/**
* Classify text inputs in the same field group as group for validation purposes.
* All this does is tell jQueryValidation to create one error div for the group, rather
* than one for each input. Primary use case is birthday and date fields, where we want
* to display errors about the inputs collectively, not individually.
*
* NOTE: Grouping inputs will give you one error div, but you still need to specify where
* that div should be displayed. By default, it's inserted after the first input with a
* validation error, which can break up a set of inputs. Use the errorPlacement setting in
* the validator to control error div placement.
*/
getGroups: function (){
var groups = {};
$(".mc-field-group").each(function(index) {
var inputs = $(this).find("input:text:not(:hidden)");
if (inputs.length > 1) {
var mergeName = inputs.first().attr("name");
var fieldNames = $.map(inputs, function(f) { return f.name; });
groups[mergeName.substring(0, mergeName.indexOf("["))] = fieldNames.join(" ");
}
});
return groups;
},
/**
* Check if a field is part of a multipart field
* (e.g., A date merge field is composed of individual inputs for month, day and year)
* Used in jQuery validation onkeyup method to ensure that we don't evaluate a field
* if a user hasn't reached the last input in a multipart field yet.
*/
isMultiPartField: function(element) {
return ($('input:not(:hidden)' , $(element).closest(".mc-field-group")).length > 1);
},
/**
* Checks if the element is the last input in its fieldgroup.
* If the field is not the last in a set of inputs we don't want to validate it on certain events (onfocusout, onblur)
* because the user might not be finished yet.
*/
isTooEarly: function(element) {
var fields = $('input:not(:hidden)' , $(element).closest(".mc-field-group"));
return ($(fields).eq(-1).attr('id') != $(element).attr('id'));
},
/**
* Handle the error/success message after successful form submission.
* Success messages are appended to #mce-success-response
* Error messages are displayed with the invalid input when possible, or appended to #mce-error-response
*/
mce_success_cb: function(resp){
$('#mce-success-response').hide();
$('#mce-error-response').hide();
// On successful form submission, display a success message and reset the form
if (resp.result == "success"){
$('#mce-'+resp.result+'-response').show();
$('#mce-'+resp.result+'-response').html(resp.msg);
$('#mc-embedded-subscribe-form').each(function(){
this.reset();
});
// If the form has errors, display them, inline if possible, or appended to #mce-error-response
} else {
// Example errors - Note: You only get one back at a time even if you submit several that are bad.
// Error structure - number indicates the index of the merge field that was invalid, then details
// Object {result: "error", msg: "6 - Please enter the date"}
// Object {result: "error", msg: "4 - Please enter a value"}
// Object {result: "error", msg: "9 - Please enter a complete address"}
// Try to parse the error into a field index and a message.
// On failure, just put the dump thing into in the msg variable.
var index = -1;
var msg;
try {
var parts = resp.msg.split(' - ',2);
if (parts[1]==undefined){
msg = resp.msg;
} else {
i = parseInt(parts[0]);
if (i.toString() == parts[0]){
index = parts[0];
msg = parts[1];
} else {
index = -1;
msg = resp.msg;
}
}
} catch(e){
index = -1;
msg = resp.msg;
}
try {
// If index is -1 if means we don't have data on specifically which field was invalid.
// Just lump the error message into the generic response div.
if (index == -1){
$('#mce-'+resp.result+'-response').show();
$('#mce-'+resp.result+'-response').html(msg);
} else {
var fieldName = $("input[name*='"+fnames[index]+"']").attr('name'); // Make sure this exists (they haven't deleted the fnames array lookup)
var data = {};
data[fieldName] = msg;
mc.mce_validator.showErrors(data);
}
} catch(e){
$('#mce-'+resp.result+'-response').show();
$('#mce-'+resp.result+'-response').html(msg);
}
}
}
}
window.mc.mce_validator = $("#mc-embedded-subscribe-form").validate({
// Set error HTML: <div class="mce_inline_error"></div>
errorClass: "mce_inline_error",
errorElement: "div",
// Validate fields on keyup, focusout and blur.
onkeyup: false,
onfocusout: function(element) {
if (!mc.isTooEarly(element)) {
$(element).valid();
}
},
onblur: function(element) {
if (!mc.isTooEarly(element)) {
$(element).valid();
}
},
// Grouping fields makes jQuery Validation display one error for all the fields in the group
// It doesn't have anything to do with how the fields are validated (together or separately),
// it's strictly for visual display of errors
groups: mc.getGroups(),
// Place a field's inline error HTML just before the div.mc-field-group closing tag
errorPlacement: function(error, element) {
element.closest('.mc-field-group').append(error);
},
// Submit the form via ajax (see: jQuery Form plugin)
submitHandler: function(form) {
$(form).ajaxSubmit(mc.ajaxOptions);
}
});
window.mc.ajaxOptions = {
url: mc.getAjaxSubmitUrl(),
type: 'GET',
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: mc.mce_success_cb
};
// Custom validation methods for fields with certain css classes
$.validator.addClassRules("birthday", { digits: true, mc_birthday: ".datefield" });
$.validator.addClassRules("datepart", { digits: true, mc_date: ".datefield" });
$.validator.addClassRules("phonepart", { digits: true, mc_phone: ".phonefield" });
// Evil Popup
$('#mc_embed_signup a.mc_embed_close').click(function(){
mc.closePopup();
});
$(document).keydown(function(e){
keycode = (e == null) ? event.keyCode : e.which;
if (keycode == 27 && typeof mc.showPopup != 'undefined') mc.closePopup();
});
}(jQuery));
</script>
3. Now, you can click on the button below to see the form.
Sign-up Forms
1. First, insert styles for the Demo pop-up.
<style>
#signupModal .modal-body {
background: white url('http://www.fabl.co/assets/img/accounts/fabl/modal-signup-5ecf122652.jpg') no-repeat 100% 100%;
padding: 8% 9%;
}
#signupModal .modal-header {
padding: 0px !important;
background-color: white;
}
@media (min-width: 768px) {
#signupModal .modal-dialog {
width: 800px !important;
}
}
.fabl-promotion h6 {
text-align: left !important;
font-size: 1rem !important;
line-height: 1.2 !important;
margin-top: 0 !important;
margin-bottom: .75rem !important;
opacity: .4 !important;
text-transform: uppercase !important;
font-weight: 700 !important;
letter-spacing: .05em !important;
}
.fabl-promotion h3 {
font-family: 'adobe-garamond-pro', 'Adobe Garamond', Garamond, serif;
letter-spacing: 0 !important;
text-align: left !important;
text-transform: none !important;
font-weight: normal !important;
font-size: 2rem !important;
line-height: 1.25 !important;
}
.modal-content a.modal-close {
font-size: 45px !important;
color: #222 !important;
transform: rotate(45deg) !important;
width: 24px !important;
height: 24px !important;
display: block !important;
position: absolute !important;
top: 30px !important;
right: 30px !important;
cursor: pointer !important;
z-index: 999 !important;
}
.modal-content a.modal-close:hover {
text-decoration: none !important;
}
.modal-body .form-combo {
background: #eee !important;
}
.form-combo {
display: block !important;
background: rgba(0, 0, 0, 0.05);
box-shadow: none !important;
border-radius: 4px !important;
font-size: 17px !important;
height: 2.5rem !important;
padding: .5rem 1rem !important;
line-height: 1.5 !important;
color: inherit !important;
outline: none !important;
margin: .5em 0 !important;
border: 1px solid transparent;
padding: 0 !important;
display: table !important;
width: 100% !important;
}
.form-combo > * {
padding: .5rem 1rem !important;
display: table-cell !important;
background: transparent !important;
border-width: 0 !important;
box-shadow: none !important;
margin: 0 !important;
white-space: nowrap !important;
}
.form-combo > *:last-child {
text-align: right;
}
.grid .grid-6 {
width: 50%;
padding: 0 4px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
.fabl-promotion .offer {
font-size: 17px;
}
</style>
2. Define and setup the form.
Copy and paste this code snippet that includes the form itself, script for sending the request, and script for minor customization of the form behavior:
<div id="demoModalContainer">
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="modal-close pull-right" data-dismiss="modal" aria-label="Close">+</a>
</div>
<div class="modal-body">
<div class="fabl-promotion">
<h6>Elevate Your Story</h6>
<h3>Register for a Fabl Demo</h3>
<form name="signupForm">
<div class="grid">
<div class="grid-6">
<div class="form-combo">
<label for="first_name">First Name:</label>
<input type="text" name="first_name" id="first_name" class="form-control" required="">
</div>
<div class="form-combo">
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="last_name" class="form-control" required="">
</div>
<div class="form-combo">
<label for="email">Email:</label>
<input type="email" name="email" id="email" class="form-control" required="">
</div>
<div class="form-combo">
<label for="phone_number">Phone:</label>
<input type="text" name="phone_number" id="phone_number" class="form-control">
</div>
</div><div class="grid-6">
<div class="form-combo">
<label for="company_name">Company Name:</label>
<input type="text" name="company_name" id="company_name" class="form-control" required="">
</div>
<div class="form-combo">
<label for="website">Company URL:</label>
<input type="url" name="website" id="website" class="form-control" required="">
</div>
<div class="form-combo">
<label for="title">Position:</label>
<input type="text" name="title" id="title" class="form-control">
</div>
</div>
<div class="grid">
<div class="grid-6">
<input type="submit" class="btn btn-primary btn-med btn-block" value="Let's Do This">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<link href="https://fabl.co/assets/components/growl-3038ae10f84bc8e0/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />
<script src="https://fabl.co/assets/components/growl-3038ae10f84bc8e0/javascripts/jquery.growl.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// Handle form submit
// ---------------------------
var $modal = $("#signupModal");
var $form = $("form", $modal);
$form.on('submit', function(e) { //use on if jQuery 1.7+
e.preventDefault(); //prevent form from submitting
var data = { registration: {}};
$.each($form.serializeArray(), function(_, kv) {
data.registration[kv.name] = kv.value;
});
$.ajax({
type: "POST",
url: "https://api.fabl.co/api/registrations",
dataType: "json",
success: function () {
$modal.modal('hide');
$form[0].reset();
$.growl.notice({ title: "Thank you for signing up! ", message: "We will be in touch with you shortly." });
},
error: function () {
$.growl.warning({ title: "Something goes wrong.", message: "Sorry, we were unable to record your contact information at this time." });
},
data: data
});
});
if (window.location.search.match(/request-demo/)) {
$('.signup .btn.btn-primary.btn-med').click();
}
});
</script>
<script type="text/javascript">
jQuery(function ($) {
var jqCookiesUrl = "https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js";
var bsUrl = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js";
loadScripts([bsUrl, jqCookiesUrl], function () {
console.log("Load Scripts!");
var $modal = $('#signupModal');
setTimeout(function(){
$modal.modal('show');
},2000);
$('#signupModal .modal-close').click(function(){
$modal.modal('hide');
})
});
});
</script>
Note:This form will be shown after 2 seconds. To change this time period, you should go to setTimout(... , 2000) from ‘2000’ to whatever you need. To see what the form looks like, click the button below.
Elevate Your Story
Register for a Fabl Demo
3. Creating an inline form.
To set up this form as inline, you should copy the code snippet below:
<link href="https://fabl.co/assets/components/growl-3038ae10f84bc8e0/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />
<script src="https://fabl.co/assets/components/growl-3038ae10f84bc8e0/javascripts/jquery.growl.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// Handle form submit
// ---------------------------
var $modal = $("#signup-simplified");
var $form = $("form", $modal);
$form.on('submit', function(e) {
e.preventDefault();
var data = { registration: {}};
$.each($form.serializeArray(), function(_, kv) {
data.registration[kv.name] = kv.value;
});
$.ajax({
type: "POST",
url: "https://api.fabl.co/api/registrations",
dataType: "json",
success: function () {
$form[0].reset();
$.growl.notice({ title: "Thank you!", message: "We will be in touch with you shortly." });
},
error: function () {
$.growl.warning({ title: "Something goes wrong.", message: "Sorry, we were unable to record your contact information at this time." });
},
data: data
});
});
//if (window.location.search.match(/request-demo/)) {
//$('.signup .btn.btn-primary.btn-med').click();
//}
});
</script>
<div id="demoContainer">
<div id="signup-simplified" tabindex="-1" role="dialog">
<div class="dialog">
<div class="content">
<div class="header"></div>
<div class="body">
<div class="fabl-promotion">
<div class="fabl-promotion-legend">
<h4>GET ACCESS TO A FABL DEMO & MORE!</h4>
<p><span class="demo-form-alert">*</span> indicates required</p>
</div>
<form name="signupForm">
<div class="grid">
<div class="grid-6">
<div class="form-combo">
<label for="first_name">First Name:<span class="demo-form-alert">*</span></label>
<input type="text" name="first_name" id="first_name" class="form-control" required="">
</div>
<div class="form-combo">
<label for="last_name">Last Name:<span class="demo-form-alert">*</span></label>
<input type="text" name="last_name" id="last_name" class="form-control" required="">
</div>
<div class="form-combo">
<label for="email">Email:<span class="demo-form-alert">*</span></label>
<input type="email" name="email" id="email" class="form-control" required="">
</div>
<div class="form-combo">
<label for="phone_number">Phone:</label>
<input type="text" name="phone_number" id="phone_number" class="form-control">
</div>
<div class="form-combo">
<label for="company_name">Company Name:<span class="demo-form-alert">*</span></label>
<input type="text" name="company_name" id="company_name" class="form-control" required="">
</div>
<div class="form-combo">
<label for="website">Company URL:<span class="demo-form-alert">*</span></label>
<input type="url" name="website" id="website" class="form-control" required="">
</div>
<div class="form-combo">
<label for="title">Position:</label>
<input type="text" name="title" id="title" class="form-control">
</div>
</div>
<div class="grid">
<div class="grid-6">
<input type="submit" class="btn btn-primary btn-med btn-block" value="Let's Do This">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
#signup-simplified .body {
padding: 8% 9%;
}
#signup-simplified .header {
padding: 0px !important;
background-color: white;
}
@media (min-width: 768px) {
#signup-simplified .dialog {
width: 800px !important;
}
}
#signup-simplified .fabl-promotion-legend h4 {
display: inline-block;
clear: both;
width: 100%;
<!--font-family: 'adobe-garamond-pro', 'Adobe Garamond', Garamond, serif;-->
letter-spacing: 0 !important;
text-align: center !important;
text-transform: none !important;
font-weight: normal !important;
font-size: 1.5rem !important;
}
#signup-simplified .fabl-promotion-legend p {
font-size: 14px;
text-align: right;
}
#signup-simplified span.demo-form-alert {
color: red;
}
#signup-simplified .body .form-combo {
background: #eee !important;
}
#signup-simplified .form-combo {
display: block !important;
background: rgba(0, 0, 0, 0.05);
box-shadow: none !important;
border-radius: 4px !important;
font-size: 17px !important;
height: 2.5rem !important;
padding: .5rem 1rem !important;
line-height: 1.5 !important;
color: inherit !important;
outline: none !important;
margin: .5em 0 !important;
border: 1px solid transparent;
padding: 0 !important;
display: table !important;
width: 100% !important;
}
#signup-simplified .form-combo > * {
padding: .5rem 1rem !important;
display: table-cell !important;
background: transparent !important;
border-width: 0 !important;
box-shadow: none !important;
margin: 0 !important;
white-space: nowrap !important;
}
#signup-simplified .form-combo > *:last-child {
text-align: right;
}
#signup-simplified .grid .grid-6 {
width: 100%;
padding: 0 4px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
#signup-simplified input[type="submit"] {
width: auto;
margin: 0 auto;
}
#signup-simplified .fabl-promotion .offer {
font-size: 17px;
}
</style>
GET ACCESS TO A FABL DEMO & MORE!
* indicates required
Already an experienced user?
See what else you can do to enhance your story.
Content Elements