host/paulnicoue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add form section

Browse source
This commit is contained in:
Paul Nicoué 2023-01-20 18:08:51 +01:00
parent c6705914e0
commit 2a4cf52465
33 changed files with 1031 additions and 311 deletions
Download patch file Download diff file Expand all files Collapse all files

132
components/ContactForm.vue Normal file
View file

@ -0,0 +1,132 @@
<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>