Published on 8/18/2017
Step 1
First, you should insert styles for the Demo pop-up. They will look like the below (click on arrow):
<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>
Step 2
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, simply click the button.
Elevate Your Story
Register for a Fabl Demo
(Optional - Variant 1) Create an inline form
To set up this form as inline, you should copy the code snippet below
<div id="demoContainer">
<div id="signup" 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><div class="grid-6">
<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 .body {
background: white url('http://www.fabl.co/assets/img/accounts/fabl/modal-signup-5ecf122652.jpg') no-repeat 100% 100%;
padding: 8% 9%;
}
#signup .header {
padding: 0px !important;
background-color: white;
}
@media (min-width: 768px) {
#signup .dialog {
width: 800px !important;
}
}
.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;
}
.fabl-promotion-legend p {
font-size: 14px;
text-align: right;
}
span.demo-form-alert {
color: red;
}
.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>
<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");
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 () {
$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>
GET ACCESS TO A FABL DEMO & MORE!
* indicates required
(Optional - Variant 2) Create 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