This feature gives you complete control over the HTML of your Capture, craft your perfect template and deploy it using our technology and advanced ruleset. You can also add additional fields, checkboxes or custom close elements.
To setup a custom Capture simply select the Custom Template type during setup:
One thing we've built to make it easier for you to build different types of templates is being able to use any existing template as the starting point for your Custom Capture. To do this simply select Pick From Templates:
In order for the Capture to work you need to follow some common patterns that are used within the templates.
Common Form elements:
<form>
with 'gcap-' for class and name attributes. When being submitted, this will add the 'sending' class and then a 'done' when complete.<input>
fields with names such as "form[email]" for the 'email' field<input>
text fields with 'data-w-pattern' attribute set to regex for validation<input>
fields (inputs and checkboxes) with data-w-required to require input or be checked<input>
of type submit for clicking/submitting the form.Below is some HTML & CSS with:
<form class='gcap-form'>
<div class='gcap-body'>
<div class='gcap-inputs hide-done'>
<p>
<label>Full Name</label>
<input class='gcap-input' data-w-pattern='[a-z]+' data-w-required name='form[name]' placeholder='Full Name'>
</p>
<p>
<label>Email</label>
<input class='gcap-input' data-w-pattern='^[0-9._%a-z\-+]+@(?:[0-9a-z\-]+\.)+[a-z]{2,12}$' data-w-required name='form[email]' placeholder='Email' type='email'>
</p>
<p>
<label>Postcode</label>
<input class='gcap-input' data-w-pattern='^\d{4,5}$' data-w-required maxlength='5' name='form[postcode]' placeholder='90210'>
</p>
<p>
<label>Country</label>
<select class='gcap-select' data-w-required name='form[country]'>
<option value=''> </option>
<option value='United States'>United States</option>
<option value='United Kingdom'>United Kingdom</option>
<option value='Australia'>Australia</option>
</select>
</p>
<p>
<label class='checkbox'>
<input data-w-required name='form[agree]' type='checkbox'>
I agree to subscribe to your newsletter
</label>
</p>
</div>
<input class='gcap-button hide-sending' type='submit' value='Subscribe'>
<a class='hide-sending' href='http://example.com' target='_blank'>
<small>Privacy policy</small>
</a>
</div>
<div class='gcap-thanks'>
<p>Thanks for subscribing.</p>
<p>Like us on Facebook to stay in touch :-)</p>
<span class='gcap-facebook'></span>
</div>
<div class='gcap-close'>×</div>
</form>
.gcap-custom-capture .gcap-form {
font-family: 'Open Sans', sans-serif;
padding: 20px;
background: #fff;
color: #555;
}
.gcap-custom-capture label {
display: inline-block;
width: 100px;
}
.gcap-custom-capture label.checkbox {
display: block;
width: auto;
}
.gcap-custom-capture p {
margin-bottom: 10px
}
.gcap-custom-capture .gcap-input {
border-radius: 4px;
border: solid 1px #bbb;
width: 200px;
font-size: 14px;
padding: 6px 8px;
}
.gcap-custom-capture .gcap-select {
width: 212px;
height: 30px;
}
.gcap-custom-capture label.checkbox.gcap-error,
.gcap-custom-capture .gcap-input.gcap-error,
.gcap-custom-capture .gcap-select.gcap-error {
background: #ffeeee;
}
.gcap-custom-capture .gcap-thanks,
.gcap-custom-capture .gcap-spinner {
display: none;
}
.gcap-custom-capture.gcap-sending .gcap-spinner {
display: block;
position: relative;
top: -5px;
left: 20px;
}
.gcap-custom-capture.gcap-sending .hide-sending,
.gcap-custom-capture.gcap-done .hide-done,
.gcap-custom-capture.gcap-done .hide-sending {
display: none
}
.gcap-custom-capture.gcap-done .gcap-thanks {
display: block;
}
.gcap-custom-capture .gcap-close {
position: absolute;
top: 3px;
right: 3px;
width: 10px;
line-height: 10px;
}
.gcap-custom-capture small {
font-size: 10px;
}
Here's a few examples of what's possible with Custom Captures.