Custom HTML/CSS Captures

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.

Setting Up Your Custom Capture

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:

Custom Capture Elements

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.
• An element with the id 'facebook' to add a like button.
• Any element with the 'gcap-close' will close the capture

Basic Example Template

Below is some HTML & CSS with:

• Name & Email inputs
  • Required (using data-w-required attribute)
  • Regex pattern validation (with data-w-pattern attribute)
  • Email validation (using type=email browser validation)
• Country select
• Agree checkbox
• Required (using data-w-required attribute)
• Submit button
• Included loader element
• Facebook element

Custom Capture HTML

<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=''>&nbsp;</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'>&times;</div>
</form>

Custom Capture CSS

.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;
}

Examples

Here's a few examples of what's possible with Custom Captures.