132 lines
3.7 KiB
Vue
132 lines
3.7 KiB
Vue
<template>
|
|
|
|
<form class="contact-form">
|
|
<div class="contact-form__name">
|
|
<label for="name">Nom</label>
|
|
<input type="text" id="name" name="name" required />
|
|
</div>
|
|
<div class="contact-form__email">
|
|
<label for="email">Adresse e-mail</label>
|
|
<input type="email" id="email" name="email" required />
|
|
</div>
|
|
<div class="contact-form__subject">
|
|
<label for="subject">Sujet</label>
|
|
<input type="text" id="subject" name="subject" required />
|
|
</div>
|
|
<div class="contact-form__message">
|
|
<label for="message">Message</label>
|
|
<textarea id="message" name="message" required></textarea>
|
|
</div>
|
|
<button class="contact-form__button" @click.prevent="sendEmail()">
|
|
<span class="contact-form__button-text">Envoyer</span>
|
|
<svg class="contact-form__button-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
|
|
<line x1="23" y1="1" x2="10.9" y2="13.1"/>
|
|
<polygon points="23 1 15.3 23 10.9 13.1 1 8.7 23 1"/>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
// --------------------------------------------------
|
|
// DATA
|
|
// --------------------------------------------------
|
|
|
|
// const contactName = ref('');
|
|
// const contactEmailAddress = ref('');
|
|
// const contactSubject = ref('');
|
|
// const contactMessage = ref('');
|
|
|
|
const contactName = 'Saint Victeur';
|
|
const contactEmailAddress = 'saint.victeur@email.com';
|
|
const contactSubject = 'Test - API Mailjet';
|
|
const contactMessage = `Saint Victeur vous bénit !`;
|
|
|
|
// --------------------------------------------------
|
|
// LOGIC
|
|
// --------------------------------------------------
|
|
|
|
const sendEmail = async () => {
|
|
try {
|
|
$fetch('/api/mailjet', {
|
|
method: 'post',
|
|
body: {
|
|
name: contactName,
|
|
emailAddress: contactEmailAddress,
|
|
subject: contactSubject,
|
|
message: contactMessage
|
|
}
|
|
});
|
|
console.log('Success!');
|
|
} catch(err) {
|
|
console.log('Failure!');
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
// --------------------------------------------------
|
|
// LAYOUT & STYLE
|
|
// --------------------------------------------------
|
|
|
|
.contact-form {
|
|
width: var(--text-width);
|
|
display: grid;
|
|
grid:
|
|
'name name' auto
|
|
'email email' auto
|
|
'subject subject' auto
|
|
'message message' auto
|
|
'button .' auto
|
|
/ 1fr 1fr;
|
|
place-content: start;
|
|
place-items: start;
|
|
gap: 2rem;
|
|
|
|
&__name {
|
|
grid-area: name;
|
|
}
|
|
|
|
&__email {
|
|
grid-area: email;
|
|
}
|
|
|
|
&__subject {
|
|
grid-area: subject;
|
|
}
|
|
|
|
&__message {
|
|
grid-area: message;
|
|
}
|
|
|
|
&__name,
|
|
&__email,
|
|
&__subject,
|
|
&__message {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
&__button {
|
|
grid-area: button;
|
|
@include button-with-icon;
|
|
}
|
|
|
|
@media screen and (min-width: $tablet-media-query) {
|
|
|
|
grid:
|
|
'name .' auto
|
|
'email .' auto
|
|
'subject subject' auto
|
|
'message message' auto
|
|
'button .' auto
|
|
/ 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|