kairoscope-website-2021/themes/kairoscope-theme/layout/_partial/newsletter.ejs

<div class="container">
    <div class="row">
        <div class="col-12">
            <h2 class="group-header">Signup to our Newsletter</h2>
            <p class="lead justify">Participate in beta tests, get free game copies, get to know the devs and get a sneak peak behind the scenes.</p>
        </div>
    </div>
    <div class="row" v-show="newsletter.show_alert">
        <div class="col-12">
            <div class="alert fade show" v-bind:class="newsletter.alert_class" role="alert">
                <i class="fas fa-spinner fa-pulse" v-show="newsletter.show_spinner" 
                    style="margin-right: 10px; font-size: 1.3em;"></i> {{newsletter.alert_text}} 
                <button type="button" v-show="newsletter.show_alert_close" v-on:click="close_newsletter_alert()" class="btn close" aria-label="Close"
                style="float: right; margin-top: -4px;">
                  <span aria-hidden="true"><i class="fas fa-times"></i></span>
                </button>
            </div>
        </div>
    </div>
    <form @submit.prevent="subscribe_to_newsletter" v-show="newsletter.show_form" class="row g-3 dark-form newsletter">
        <div class="col-md-10 ">
            <input type="email" v-model="newsletter.email" class="form-control" id="inputEmail" aria-describedby="emailHelp" placeholder="Email">
            <div id="emailHelp" class="form-text hidden">We'll never share your email with anyone else.</div>
        </div>
        
        <div class="col-md-2 ">
            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-secondary" v-on:click="subscribe_to_newsletter()">Submit</button>
            </div>
        </div>                
    </form>
</div>