Custom HTML/CSS Captures

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

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

<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>

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