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

Add honeypot to contact form

Browse source
This commit is contained in:
Paul Nicoué 2023-01-30 12:34:53 +01:00
parent d3465c6ea3
commit 88bac001d8
2 changed files with 10 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

11
components/ContactForm.vue
View file

@ -29,6 +29,7 @@
<VeeError name="message" as="p" />
</Transition>
</div>
<VeeField name="honeypot" type="hidden" />
<button class="contact-form__button">
<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">
@ -42,7 +43,7 @@
<Transition name="validation">
<div class="contact-form__validation" v-if="isValidated" v-click-outside="hideValidationMessage">
<p class="contact-form__validation-success" v-if="isSuccessful">Votre message a bien été envoyé !</p>
<p class="contact-form__validation-error" v-else>Oups ! Une erreur est survenue...</p>
<p class="contact-form__validation-error" v-else>Une erreur est survenue... Veuillez me contacter à l'adresse e-mail contact@paulnicoue.com</p>
</div>
</Transition>
</VeeForm>
@ -72,7 +73,9 @@
.required('Veuillez saisir le sujet de votre message.'),
message: yupString()
.min(10, 'Votre message doit comprendre au moins ${min} caractères.')
.required('Veuillez saisir votre message.')
.required('Veuillez saisir votre message.'),
honeypot: yupString()
.max(0)
});
// Form validation
@ -92,7 +95,7 @@
const sendEmail = async (values) => {
isLoading.value = true;
try {
const response = await $fetch('/api/contact', {
await $fetch('/api/contact', {
method: 'post',
body: {
name: values.name,
@ -219,7 +222,7 @@
.validation-enter-to,
.validation-leave-from {
opacity: 1;
max-height: calc(2 * (var(--caption-font-size) * var(--line-height)));
max-height: calc(3 * (var(--caption-font-size) * var(--line-height)));
}
.loader-enter-from,