Documentation

Getting Started
Gleam Updates
Capture
Competitions
Galleries
Rewards
Installation
Advanced
Integrations
Action Types
Guides

Custom HTML/CSS Captures

Custom Captures are currently in BETA and available for all users to test. They require you to have working knowledge of CSS & HTML to implement.

This feature gives you complete control over your Capture, essentially allowing you to use a custom template. You can also add additional fields, checkboxes or custom close elements.

Setting Up

To setup a custom Capture simply select the Popup With Image template type, then navigate to the Template -> Custom CSS/HTML.

Elements

Common 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.
  • The svg/circle below for a loading animation
  • 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

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>
<svg class='gcap-spinner hide-done' height='28px' viewBox='0 0 28 28' width='28px' xmlns='http://www.w3.org/2000/svg'>
<circle class='gcap-path' cx='14' cy='14' fill='none' r='10' stroke-linecap='round' stroke-width='3'></circle>
</svg>
</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>

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

Connect With Us