Signup
#
2 Options {% include 'components/signup/2-options' %}
#
HTML 
<div class="inner sign-up-two-options">
    <div class="sign-up-two-options__heading">
        <h2>SIGN UP TO REC/EIVE OUR <span>LENT DEVOTIONALS</span></h2>
    </div>
    <div class="sign-up-two-options__content center-text">
    <br>
    <div class="large-col-6">
        <picture>
            <source media="(min-width: 375px)" srcset="/images/mainsite5/big-quiz-night/Customisable_Flyer_Option1.jpg, /images/mainsite5/big-quiz-night/Customisable_Flyer_Option1@2x.jpg 2x">
                <img src="/images/mainsite5/big-quiz-night/Customisable_Flyer_Option1.jpg" alt="Flyer" title="Flyer">
        </picture>
        <h3 class="sign-up-two-options__option-heading">
            EMAIL DEVOTIONALS
        </h3>
        <p>Sign up to receive a reflection, prayer or poem straight to your inbox every day in Lent.</p>
        <a data-lightbox="1" class="button button--bold show-lightbox" href="#">SIGN UP</a>

    </div>
    <div class="large-col-6">
        <picture>
            <source media="(min-width: 375px)" srcset="/images/mainsite5/big-quiz-night/Customisable_Flyer_Option2.jpg, /images/mainsite5/big-quiz-night/Customisable_Flyer_Option2@2x.jpg 2x">
                <img src="/images/mainsite5/big-quiz-night/Customisable_Flyer_Option2.jpg" alt="Flyer" title="Flyer">
            </picture>
            <h3 class="sign-up-two-options__option-heading">
               BOOKLET
            </h3>
            <p>A free booklet containing all of our Lent devotionals for you to read through at your own pace.</p>
            <a data-lightbox="2" class="button button--bold show-lightbox" href="#">SIGN UP</a>
        </div>
    </div>
</div>
Twig 
<div class="inner sign-up-two-options">
    <div class="sign-up-two-options__heading">
        <h2>SIGN UP TO REC/EIVE OUR <span>LENT DEVOTIONALS</span></h2>
    </div>
    <div class="sign-up-two-options__content center-text">
    <br>
    <div class="large-col-6">
        <picture>
            <source media="(min-width: 375px)" srcset="/images/mainsite5/big-quiz-night/Customisable_Flyer_Option1.jpg, /images/mainsite5/big-quiz-night/Customisable_Flyer_Option1@2x.jpg 2x">
                <img src="/images/mainsite5/big-quiz-night/Customisable_Flyer_Option1.jpg" alt="Flyer" title="Flyer">
        </picture>
        <h3 class="sign-up-two-options__option-heading">
            EMAIL DEVOTIONALS
        </h3>
        <p>Sign up to receive a reflection, prayer or poem straight to your inbox every day in Lent.</p>
        <a data-lightbox="1" class="button button--bold show-lightbox" href="#">SIGN UP</a>

    </div>
    <div class="large-col-6">
        <picture>
            <source media="(min-width: 375px)" srcset="/images/mainsite5/big-quiz-night/Customisable_Flyer_Option2.jpg, /images/mainsite5/big-quiz-night/Customisable_Flyer_Option2@2x.jpg 2x">
                <img src="/images/mainsite5/big-quiz-night/Customisable_Flyer_Option2.jpg" alt="Flyer" title="Flyer">
            </picture>
            <h3 class="sign-up-two-options__option-heading">
               BOOKLET
            </h3>
            <p>A free booklet containing all of our Lent devotionals for you to read through at your own pace.</p>
            <a data-lightbox="2" class="button button--bold show-lightbox" href="#">SIGN UP</a>
        </div>
    </div>
</div>
{}
Signup Feature {% include 'components/signup/signup-feature' %}
#
HTML 
<div class="signup-feature">

	<div class="signup-feature__heading">SIGN UP TO RECEIVE OUR ADVENT CALENDAR</div>

	<div class="signup-feature__content">

		<p>Our daily reflections are a great way to use the advent season as a time to reflect and prepare for the celebration of Christmas. We hope you can claim a little bit of time each day to reflect, focus and be inspired during what should be a precious and beautiful time of year.</p>

		<form class="tf-signup" method="POST">
			<input type="hidden" name="u" value="cd19eb0b2a74af14054950f15">
			<input type="hidden" name="id" value="110ced3ea5">

			<fieldset class="newsletter-subscribe">
				<div class="field">
					<label class="field-label" for="firstname">First Name</label>
					<div class="input">
						<input type="text" id="firstname" name="MERGE1" class="firstname" placeholder="First Name">
						<span id="pagefooter_0_EmailSignUpOneStep_requiredFirstname" class="error-message error-message--first" style="display: none;">Please enter your first name</span>
					</div>
				</div>
				<div class="field">
					<label class="field-label" for="lastname">Last Name</label>
					<div class="input">
						<input type="text" id="lastname" name="MERGE2" class="lastname" placeholder="Last Name">
						<span id="pagefooter_0_EmailSignUpOneStep_requiredLastname" class="error-message error-message--last" style="display: none;">Please enter your last name</span>
					</div>
				</div>
				<div class="field">
					<label class="field-label" for="email">Email</label>
					<div class="input">
						<input type="text" id="email" name="MERGE0" class="email" placeholder="you@youremail.com">
						<span id="pagefooter_0_EmailSignUpOneStep_requiredEmail" class="error-message error-message--email" style="display: none;">Please enter an email address</span>
						<span id="pagefooter_0_EmailSignUpOneStep_regexEmail" class="error-message error-message--email-valid" style="display: none;">Please enter a valid email address</span>
					</div>
				</div>
				<div class="field buttons">
					<div class="input">
						<input onClick="_gaq.push(['_trackEvent', 'Click', 'Subscribe', 'Subscribe']); fbq('track', 'Lead');" type="submit" value="Subscribe" class="button" name="submit">
					</div>
				</div>
			</fieldset>
			<!-- <div class="compliance">If you've given us your email address we'll send you a daily email during Advent and Advent only! Of course, you can change your preferences at any time – just email <a href="mailto:info@tearfund.org">info@tearfund.org</a> or call 020 3906 3906.. We promise never to pass your details on to another organisation for marketing purposes.</div> -->
		</form>

	</div>


</div>
Twig 
<div class="signup-feature">

	<div class="signup-feature__heading">SIGN UP TO RECEIVE OUR ADVENT CALENDAR</div>

	<div class="signup-feature__content">

		<p>Our daily reflections are a great way to use the advent season as a time to reflect and prepare for the celebration of Christmas. We hope you can claim a little bit of time each day to reflect, focus and be inspired during what should be a precious and beautiful time of year.</p>

		<form class="tf-signup" method="POST">
			<input type="hidden" name="u" value="cd19eb0b2a74af14054950f15">
			<input type="hidden" name="id" value="110ced3ea5">

			<fieldset class="newsletter-subscribe">
				<div class="field">
					<label class="field-label" for="firstname">First Name</label>
					<div class="input">
						<input type="text" id="firstname" name="MERGE1" class="firstname" placeholder="First Name">
						<span id="pagefooter_0_EmailSignUpOneStep_requiredFirstname" class="error-message error-message--first" style="display: none;">Please enter your first name</span>
					</div>
				</div>
				<div class="field">
					<label class="field-label" for="lastname">Last Name</label>
					<div class="input">
						<input type="text" id="lastname" name="MERGE2" class="lastname" placeholder="Last Name">
						<span id="pagefooter_0_EmailSignUpOneStep_requiredLastname" class="error-message error-message--last" style="display: none;">Please enter your last name</span>
					</div>
				</div>
				<div class="field">
					<label class="field-label" for="email">Email</label>
					<div class="input">
						<input type="text" id="email" name="MERGE0" class="email" placeholder="you@youremail.com">
						<span id="pagefooter_0_EmailSignUpOneStep_requiredEmail" class="error-message error-message--email" style="display: none;">Please enter an email address</span>
						<span id="pagefooter_0_EmailSignUpOneStep_regexEmail" class="error-message error-message--email-valid" style="display: none;">Please enter a valid email address</span>
					</div>
				</div>
				<div class="field buttons">
					<div class="input">
						<input onClick="_gaq.push(['_trackEvent', 'Click', 'Subscribe', 'Subscribe']); fbq('track', 'Lead');" type="submit" value="Subscribe" class="button" name="submit">
					</div>
				</div>
			</fieldset>
			<!-- <div class="compliance">If you've given us your email address we'll send you a daily email during Advent and Advent only! Of course, you can change your preferences at any time – just email <a href="mailto:info@tearfund.org">info@tearfund.org</a> or call 020 3906 3906.. We promise never to pass your details on to another organisation for marketing purposes.</div> -->
		</form>

	</div>


</div>
{}