<div class="form-overlay" data-module="formOverlay" data-timeout-seconds="100" data-expiry="24" data-preload="true">
<div class="form-overlay__container">
<span class="form-overlay__close js-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.33 21.33">
<path d="M.39,20.94a1.33,1.33,0,0,1,0-1.88L19.06.39a1.33,1.33,0,0,1,1.88,1.89L2.28,20.94A1.34,1.34,0,0,1,.39,20.94Z" style="fill-rule:evenodd" />
<path d="M.39.39a1.34,1.34,0,0,1,1.89,0L20.94,19.06a1.33,1.33,0,0,1-1.88,1.88L.39,2.28A1.34,1.34,0,0,1,.39.39Z" style="fill-rule:evenodd" /></svg></span>
<div class="form-overlay__banner-container">
<figure class="image js-image " data-module="imagelazy" data-is-small-image="">
<img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10" alt="Alt Text">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" />
<source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
</picture>
</figure>
</div>
<div class="form-overlay__form-container">
<div class="newsletter-form" data-module="newsletterForm" data-api-endpoint="http://ti-dev-web.hugoandcat.dev/api/sitecore/customform/subscribe" data-news-letter-signup="" data-preload="false">
<h3 class="newsletter-form__title">Newsletter</h3>
<p class="newsletter-form__subtitle">Subscribe to our monthly newsletter and get the best offers, holiday ideas and unmissable events.</p>
<form class="newsletter-form__form js-newsletter-form" action="" method="GET">
<label class="newsletter-form__label" for="title">Title</label>
<div class="newsletter-form__group">
<div class="newsletter-form__input-group newsletter-form__input-group--select">
<div class="newsletter-form__select">
<select id="title" name="title" class="js-newsletter-salutations-input">
<option value="">Title</option>
<option value="Lieutenant">Lieutenant</option>
<option value="Brigadier">Brigadier</option>
<option value="Colistingonel">Colonel</option>
<option value="Admiral">Admiral</option>
</select>
</div>
<div class="tooltip" data-module="tooltip">
<div class="tooltip__inner">
<div class="tooltip__icon tooltip__icon--info tooltip__toggle"></div>
</div>
<div class="tooltip__tooltip ">
<p class="tooltip__tooltip-content">And what is it exactly that we should know you as?</p>
<div class="tooltip__icon tooltip__icon--close tooltip__close"></div>
</div>
</div>
</div>
<div class="newsletter-form__input-group">
<label class="newsletter-form__label" for="first_name">First name</label>
<input class="newsletter-form__input js-newsletter-first-name-input" type="text" id="first_name" name="first_name" autocomplete="off" placeholder="First name" required />
<div class="tooltip" data-module="tooltip">
<div class="tooltip__inner">
<div class="tooltip__icon tooltip__icon--info tooltip__toggle"></div>
</div>
<div class="tooltip__tooltip ">
<p class="tooltip__tooltip-content">This is your name, the first bit, like 'James' in 'James Bond'</p>
<div class="tooltip__icon tooltip__icon--close tooltip__close"></div>
</div>
</div>
</div>
<div class="newsletter-form__input-group">
<label class="newsletter-form__label" for="last_name">Last name</label>
<input class="newsletter-form__input js-newsletter-surname-input" type="text" id="last_name" name="last_name" autocomplete="off" placeholder="Last name" required />
<div class="tooltip" data-module="tooltip">
<div class="tooltip__inner">
<div class="tooltip__icon tooltip__icon--info tooltip__toggle"></div>
</div>
<div class="tooltip__tooltip ">
<p class="tooltip__tooltip-content">This is your last name, the last bit, like 'Twotts' in 'Felicity Twotts'</p>
<div class="tooltip__icon tooltip__icon--close tooltip__close"></div>
</div>
</div>
</div>
</div>
<div class="newsletter-form__group">
<div class="newsletter-form__input-group">
<label class="newsletter-form__label" for="email">Email address</label>
<input class="newsletter-form__input js-newsletter-email-input" type="text" id="email" name="email" autocomplete="off" placeholder="Email address" required />
<div class="tooltip" data-module="tooltip">
<div class="tooltip__inner">
<div class="tooltip__icon tooltip__icon--info tooltip__toggle"></div>
</div>
<div class="tooltip__tooltip ">
<p class="tooltip__tooltip-content">This is like a postal address but its for posting Electronic messages. The future is here and it might actually save the trees!</p>
<div class="tooltip__icon tooltip__icon--close tooltip__close"></div>
</div>
</div>
</div>
</div>
<label class="newsletter-form__label" for="email"></label>
<input class="newsletter-form__inputemail2 js-newsletter-inputemail2" type="email" id="email2" name="email2" autocomplete="do-not-autocomplete-asdflaskd" placeholder="" />
<p class="newsletter-form__message newsletter-form__message--error js-newsletter-error"><span class="newsletter-form__icon"></span></p>
<p class="newsletter-form__message newsletter-form__message--error js-newsletter-api-error"><span class="newsletter-form__icon"></span>Something went wrong...</p>
<p class="newsletter-form__message newsletter-form__message--success js-newsletter-success"><span class="newsletter-form__icon"></span>Success! Thank you for subscribing to our newsletter.</p>
<div class="newsletter-form__group">
<div class="newsletter-form__input-group newsletter-form__checkbox-group">
<input type="checkbox" id="agree" value="" class="newsletter-form__checkbox input-checkbox is-default js-newsletter-checkbox-input" required>
<label class="newsletter-form__disclaimer" for="agree">
<div class="richtext ">
<p>I agree to the <a href='#'>privacy terms</a></p>
</div>
</label>
</div>
</div>
<button class="button-p1 button-p1--with-icon newsletter-form__button js-newsletter-submit" disabled>Subscribe</button>
</form>
</div>
</div>
</div>
</div>
<div class="form-overlay" data-module="formOverlay" data-timeout-seconds="{{timeout}}" data-expiry="{{cookieExpiryHours}}" data-preload="true">
<div class="form-overlay__container">
<span class="form-overlay__close js-close">{{{closeIcon}}}</span>
<div class="form-overlay__banner-container">
{{> @cp-medium-image responsiveImage}}
</div>
<div class="form-overlay__form-container">
{{> @cp-newsletter-form overlayForm}}
</div>
</div>
</div>
{
"closeIcon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 21.33 21.33\"><path d=\"M.39,20.94a1.33,1.33,0,0,1,0-1.88L19.06.39a1.33,1.33,0,0,1,1.88,1.89L2.28,20.94A1.34,1.34,0,0,1,.39,20.94Z\" style=\"fill-rule:evenodd\"/><path d=\"M.39.39a1.34,1.34,0,0,1,1.89,0L20.94,19.06a1.33,1.33,0,0,1-1.88,1.88L.39,2.28A1.34,1.34,0,0,1,.39.39Z\" style=\"fill-rule:evenodd\"/></svg>",
"timeout": 100,
"responsiveImage": {
"altText": "Alt Text",
"dominantColour": "#c9c9c9",
"lowResolutionUrl": "https://images.unsplash.com/photo-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "https://images.unsplash.com/photo-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
"smallUrl": "https://images.unsplash.com/photo-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
},
"cookieExpiryHours": 24,
"overlayForm": {
"preload": false,
"title": "Newsletter",
"subtitle": "Subscribe to our monthly newsletter and get the best offers, holiday ideas and unmissable events.",
"disclaimerText": {
"content": "<p>I agree to the <a href='#'>privacy terms</a></p>"
},
"form": {
"apiEndpoint": "http://ti-dev-web.hugoandcat.dev/api/sitecore/customform/subscribe",
"salutations": [
{
"name": "Lieutenant",
"value": "Lieutenant"
},
{
"name": "Brigadier",
"value": "Brigadier"
},
{
"name": "Colonel",
"value": "Colistingonel"
},
{
"name": "Admiral",
"value": "Admiral"
}
],
"salutationPlaceholderText": "Title",
"salutationToolTip": {
"content": "And what is it exactly that we should know you as?"
},
"firstNamePlaceholderText": "First name",
"firstNameToolTip": {
"content": "This is your name, the first bit, like 'James' in 'James Bond'"
},
"surnamePlaceholderText": "Last name",
"surnameToolTip": {
"content": "This is your last name, the last bit, like 'Twotts' in 'Felicity Twotts'"
},
"emailPlaceholderText": "Email address",
"emailToolTip": {
"content": "This is like a postal address but its for posting Electronic messages. The future is here and it might actually save the trees!"
},
"emailErrorMessage": "Email format incorrect",
"requiredErrorMessage": "Fields can not be blank",
"apiErrorMessage": "Something went wrong...",
"successMessage": "Success! Thank you for subscribing to our newsletter.",
"button": {
"text": "Subscribe",
"url": "#"
}
}
}
}
There are no notes for this item.