<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="true">
<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="Colonel">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 class="newsletter-form" data-module="newsletterForm" data-api-endpoint="{{form.apiEndpoint}}"
data-news-letter-signup="{{newsLetterSignup}}" data-preload="{{preload}}">
<h3 class="newsletter-form__title">{{title}}</h3>
<p class="newsletter-form__subtitle">{{subtitle}}</p>
<form class="newsletter-form__form js-newsletter-form" action="" method="GET">
<label class="newsletter-form__label" for="title">{{form.salutationPlaceholderText}}</label>
<div class="newsletter-form__group">
{{#if form.salutations}}
<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="">{{form.salutationPlaceholderText}}</option>
{{#each form.salutations}}
<option value="{{value}}">{{name}}</option>
{{/each}}
</select>
</div>
{{#if form.salutationToolTip}}
{{> @cp-tooltip form.salutationToolTip}}
{{/if}}
</div>
{{/if}}
<div class="newsletter-form__input-group">
<label class="newsletter-form__label" for="first_name">{{form.firstNamePlaceholderText}}</label>
<input class="newsletter-form__input js-newsletter-first-name-input" type="text" id="first_name" name="first_name" autocomplete="off" placeholder="{{form.firstNamePlaceholderText}}" required />
{{#if form.firstNameToolTip}}
{{> @cp-tooltip form.firstNameToolTip}}
{{/if}}
</div>
<div class="newsletter-form__input-group">
<label class="newsletter-form__label" for="last_name">{{form.surnamePlaceholderText}}</label>
<input class="newsletter-form__input js-newsletter-surname-input" type="text" id="last_name" name="last_name" autocomplete="off" placeholder="{{form.surnamePlaceholderText}}" required />
{{#if form.surnameToolTip}}
{{> @cp-tooltip form.surnameToolTip}}
{{/if}}
</div>
</div>
<div class="newsletter-form__group">
<div class="newsletter-form__input-group">
<label class="newsletter-form__label" for="email">{{form.emailPlaceholderText}}</label>
<input class="newsletter-form__input js-newsletter-email-input" type="text" id="email" name="email" autocomplete="off" placeholder="{{form.emailPlaceholderText}}" required />
{{#if form.emailToolTip}}
{{> @cp-tooltip form.emailToolTip}}
{{/if}}
</div>
</div>
<label class="newsletter-form__label" for="email">{{form.placeholderText}}</label>
<input class="newsletter-form__inputemail2 js-newsletter-inputemail2" type="email" id="email2" name="email2"
autocomplete="do-not-autocomplete-asdflaskd" placeholder="{{form.placeholderText}}" />
<p class="newsletter-form__message newsletter-form__message--error js-newsletter-error"><span class="newsletter-form__icon"></span>{{form.errorMessage}}</p>
<p class="newsletter-form__message newsletter-form__message--error js-newsletter-api-error"><span class="newsletter-form__icon"></span>{{form.apiErrorMessage}}</p>
<p class="newsletter-form__message newsletter-form__message--success js-newsletter-success"><span class="newsletter-form__icon"></span>{{form.successMessage}}</p>
{{#if disclaimerText }}
<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">{{> @cp-text-richtext disclaimerText}}</label>
</div>
</div>
{{/if}}
<button class="button-p1 button-p1--with-icon newsletter-form__button js-newsletter-submit" disabled>{{form.button.text}}</button>
</form>
</div>
{
"preload": true,
"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": "Colonel"
},
{
"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.