MusicTopus/views/pages/nous-contacter.ejs

<section class="box mini" id="contact">
    <h1>Nous contacter</h1>
    <form @submit="send" <% if (config.mailMethod === 'formspree' ) { %> id="contact" method="POST" action="https://formspree.io/f/<%= config.formspreeId %>" <% } %>>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
            <div class="field">
                <label for="email">Addresse e-mail*</label>
                <input type="email" name="email" id="email" v-model="email" required />
            </div>
            <div class="field">
                <label for="name">Prénom, nom</label>
                <input type="text" name="name" id="name" v-model="name" />
            </div>
        </div>

        <div class="field">
            <label for="message">Message*</label>
            <textarea name="message" id="message" rows="6" required v-model="message" ></textarea>
        </div>

        <% if (config.mailMethod !== 'formspree' ) { %>
            <img src="/api/v1/contact" alt="Captcha" />
            <div class="field">
                <label for="captcha">Captcha</label>
                <input type="text" name="captcha" id="captcha" v-model="captcha" required />
            </div>
        <% } %>

        <button type="submit" class="button is-primary" :disabled="loading">
            <% if (config.mailMethod !== 'formspree' ) { %>
            <i class="icon-spin animate-spin" v-if="loading"></i>
            <% } %>
            Envoyer
        </button>
    </form>
</section>

<script>
    const contactMethod = '<%= config.mailMethod %>';
</script>