80 lines
2.8 KiB
Plaintext
80 lines
2.8 KiB
Plaintext
<section class="box" id="app">
|
|
<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>
|
|
|
|
<% if (config.mailMethod === 'smtp' ) { %>
|
|
<script>
|
|
Vue.createApp({
|
|
data() {
|
|
return {
|
|
email: '',
|
|
name: '',
|
|
message: '',
|
|
captcha: '',
|
|
loading: false,
|
|
}
|
|
},
|
|
methods: {
|
|
send(event) {
|
|
event.preventDefault();
|
|
|
|
if ( this.loading ) {
|
|
return false;
|
|
}
|
|
|
|
this.loading = true;
|
|
|
|
const {
|
|
email,
|
|
message,
|
|
name,
|
|
captcha,
|
|
} = this;
|
|
|
|
axios.post('/api/v1/contact', {email, name, message, captcha})
|
|
.then( () => {
|
|
showToastr("Message correctement envoyé", true);
|
|
})
|
|
.catch((err) => {
|
|
showToastr(err.response?.data?.message || "Impossible d'envoyer votre message", false);
|
|
})
|
|
.finally(() => {
|
|
this.loading = false;
|
|
})
|
|
},
|
|
},
|
|
}).mount('#app');
|
|
</script>
|
|
<% } %> |