Woodlands.co.uk Component Library

Subscribe Form

SubScribe Form

An email subscription form, which also includes “region” tags.

The “Dismiss” tags should include a hidden form input which can then be dismissed.

<form action="" method="POST" class="form form--subscribe">

    <div class="form__group">
        <label for="form__subscribe__region">Selected regions*</label>

        <div class="tags tags--gap" data-empty=".tags__empty">

            <p class="tags__empty">Please select at least one region from the map.</p>
        </div>
    </div>

    <div class="form__group">
        <label for="form__subscribe__email">Email*</label>
        <input type="text" id="form__subscribe__email" name="email" placeholder="name@example.com" />
    </div>

    <button class="button button--green--dark button--inline--small ">
        <span>Subscribe to email updates</span>
    </button>

    <a href="#">Our email policy</a>
</form>
 
<form action="" method="POST" class="form {{modifier 'form--subscribe' form.modifiers}}">

    <div class="form__group">
        <label for="form__subscribe__region">{{ region.label }}</label>

        <div class="tags tags--gap" data-empty=".tags__empty">
            {{#each region.tags}}
                {{ render '@tag--dismiss' this merge=true }}
            {{/each}}

            {{#if region.tags.length }}
                <p class="tags__empty hidden">{{ region.empty }}</p>
            {{else}}
                <p class="tags__empty">{{ region.empty }}</p>
            {{/if}}
        </div>
    </div>

    <div class="form__group">
        <label for="form__subscribe__email">{{ email.label }}</label>
        <input type="text" id="form__subscribe__email" name="email" placeholder="{{ email.placeholder }}" />
    </div>

    {{ render '@button' button merge=true }}

    <a href="{{ policy.link }}">{{ policy.text }}</a>
</form>