Skip to content

Commit

Permalink
added auto formatting to phone field !noci
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexandzors
alexandzors committed Nov 27, 2024
1 parent f6b6f79 commit ee4da85
Showing 1 changed file with 103 additions and 18 deletions.
121 changes: 103 additions & 18 deletions src/components/ContactForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ onMounted(() => {
script.async = true;
script.defer = true;
document.head.appendChild(script);
// Initialize Turnstile once the script is loaded
script.onload = () => {
if (window.turnstile) {
Expand All @@ -39,10 +39,24 @@ onMounted(() => {
responseMessage.value = "Turnstile validation failed. Please try again.";
},
});
}
};
};
});
// Phone number formatting logic
function formatPhoneNumber(value: string): string {
const cleaned = value.replace(/\D/g, ''); // Remove non-digit characters
const match = cleaned.match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
if (!match) return '';
return !match[2] ? match[1] : `${match[1]}-${match[2]}${match[3] ? '-' + match[3] : ''}`;
};
function handlePhoneInput(event: Event) {
const input = event.target as HTMLInputElement;
formData.value.phone = formatPhoneNumber(input.value);
};
// Set character limits
const nameMaxLength = 100;
const emailMaxLength = 150;
Expand All @@ -57,11 +71,11 @@ async function submit(e: Event) {
if (!formData.value.turnstileToken) {
responseMessage.value = "Please complete the Turnstile challenge.";
return;
}
};
if (isSubmitting.value) {
return;
}
};
isSubmitting.value = true;
responseMessage.value = ''; // Clear previous response message
Expand Down Expand Up @@ -89,16 +103,16 @@ async function submit(e: Event) {
if (response.ok) {
responseMessage.value = "Message sent successfully!";
// resetForm();
resetForm();
} else {
responseMessage.value = `Error: ${data.message || "Something went wrong"}`;
}
} catch (error) {
responseMessage.value = 'An error occurred. Please try again later.';
} finally {
isSubmitting.value = false;
}
}
};
};
// Reset form data
function resetForm() {
Expand All @@ -112,7 +126,7 @@ function resetForm() {
turnstileToken: ''
};
responseMessage.value = '';
}
};
</script>


Expand All @@ -122,43 +136,114 @@ function resetForm() {

<div class="mb-[15px]">
<label for="name">Name <span class="text-red-600">*</span></label>
<input type="text" id="name" name="name" v-model="formData.name" required :maxlength="nameMaxLength" placeholder="John Smith" class="py-3 px-4 block w-full text-md rounded-lg border border-[var(--highlight-blue-200)] dark:border-[var(--highlight-blue-400)] bg-white dark:bg-[var(--highlight-blue-700)]" />
<input
type="text"
id="name"
name="name"
v-model="formData.name"
required :maxlength="nameMaxLength"
placeholder="John Smith"
aria-label="Name Input (Required)"
class="py-3 px-4 block w-full text-md rounded-lg border border-[var(--highlight-blue-200)] dark:border-[var(--highlight-blue-400)] bg-[var(--neutral-100)] dark:bg-[var(--highlight-blue-700)]"
/>
</div>

<div class="mb-[15px]">
<label for="email">Email <span class="text-red-600">*</span></label>
<input type="email" id="email" name="email" v-model="formData.email" required :maxlength="emailMaxLength" placeholder="[email protected]" class="py-3 px-4 block w-full text-md rounded-lg border border-[var(--highlight-blue-200)] dark:border-[var(--highlight-blue-400)] bg-white dark:bg-[var(--highlight-blue-700)]" />
<input
type="email"
id="email"
name="email"
v-model="formData.email"
required
:maxlength="emailMaxLength"
placeholder="[email protected]"
aria-label="Email Input (Required)"
class="py-3 px-4 block w-full text-md rounded-lg border border-[var(--highlight-blue-200)] dark:border-[var(--highlight-blue-400)] bg-[var(--neutral-100)] dark:bg-[var(--highlight-blue-700)]"
/>
</div>

<div class="mb-[15px]">
<label for="phone">Callback Number</label>
<input type="tel" id="phone" name="phone" v-model="formData.phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-867-5309" class="py-3 px-4 block w-full text-md rounded-lg border border-[var(--highlight-blue-200)] dark:border-[var(--highlight-blue-400)] bg-white dark:bg-[var(--highlight-blue-700)]" />
</div>
<div class="relative flex items-center">
<label for="phone" class="mr-1">Callback Number</label>
<span
class="flex items-center cursor-pointer text-[var(--neutral-400)] dark:text-[var(--neutral-100)]"
title="Callbacks for US numbers only!"
>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="#6388c5" d="M11 9h2V7h-2m1 13c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m-1 15h2v-6h-2z" />
</svg>
</span>
</div>
<div class="mb-[15px]">
<input
type="text"
id="phone"
name="phone"
v-model="formData.phone"
@input="handlePhoneInput"
placeholder="555-867-5309"
aria-label="Phone Number Input (Optional) (USA Only)"
class="py-3 px-4 block w-full text-md rounded-lg border border-[var(--highlight-blue-200)] dark:border-[var(--highlight-blue-400)] bg-[var(--neutral-100)] dark:bg-[var(--highlight-blue-700)]"
/>
</div>
</div>

<div class="mb-[15px]">
<label for="company">Company</label>
<input type="text" id="company" name="company" v-model="formData.company" :maxlength="companyMaxLength" placeholder="Some Company Inc." class="py-3 px-4 block w-full text-md rounded-lg border border-[var(--highlight-blue-200)] dark:border-[var(--highlight-blue-400)] bg-white dark:bg-[var(--highlight-blue-700)]" />
<input
type="text"
id="company"
name="company"
v-model="formData.company"
:maxlength="companyMaxLength"
placeholder="Some Company Inc."
aria-label="Company Name Input (Optional)"
class="py-3 px-4 block w-full text-md rounded-lg border border-[var(--highlight-blue-200)] dark:border-[var(--highlight-blue-400)] bg-[var(--neutral-100)] dark:bg-[var(--highlight-blue-700)]"
/>
</div>

<div class="mb-[15px]">
<label for="title">Job Title</label>
<input type="text" id="title" name="title" v-model="formData.title" :maxlength="titleMaxLength" placeholder="CEO" class="py-3 px-4 block w-full text-md rounded-lg border border-[var(--highlight-blue-200)] dark:border-[var(--highlight-blue-400)] bg-white dark:bg-[var(--highlight-blue-700)]" />
<input
type="text"
id="title"
name="title"
v-model="formData.title"
:maxlength="titleMaxLength"
placeholder="CEO"
aria-label="Job Title Input (Optional)"
class="py-3 px-4 block w-full text-md rounded-lg border border-[var(--highlight-blue-200)] dark:border-[var(--highlight-blue-400)] bg-[var(--neutral-100)] dark:bg-[var(--highlight-blue-700)]"
/>
</div>

<div class="mb-[15px]">
<label for="message">Message <span class="text-red-600">*</span></label>
<textarea id="message" name="message" v-model="formData.message" required :maxlength="messageMaxLength" placeholder="Your message here!" class="py-3 px-4 block w-full text-md rounded-lg border border-[var(--highlight-blue-200)] dark:border-[var(--highlight-blue-400)] bg-white dark:bg-[var(--highlight-blue-700)]"></textarea>
<textarea
id="message"
name="message"
v-model="formData.message"
required
:maxlength="messageMaxLength"
placeholder="Your message here!"
aria-label="Message Input (Required)"
class="py-3 px-4 block w-full text-md rounded-lg border border-[var(--highlight-blue-200)] dark:border-[var(--highlight-blue-400)] bg-[var(--neutral-100)] dark:bg-[var(--highlight-blue-700)]"
/>
</div>

<div class="mt-3 flex">
<div class="ml-3 mb-3">
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-[var(--neutral-600)] dark:[var(--neutral-400)]">
By submitting this contact form, you acknowledge and agree to the collection of your personal information per our <a href="/privacy">privacy policy</a>.
</p>
</div>
</div>

<button class="btn-primary border-[var(--highlight-blue-200)] rounded-lg hover:bg-[var(--highlight-blue-200)] dark:hover:bg-[var(--highlight-purple-400)] dark:border-[var(--highlight-blue-400)] dark:focus:bg-[var(--highlight-purple-400)]" :disabled="isSubmitting">
<button
aria-label="Form Submit Button"
class="btn-primary border-[var(--highlight-blue-200)] rounded-lg hover:bg-[var(--highlight-blue-200)] dark:hover:bg-[var(--highlight-purple-400)] dark:border-[var(--highlight-blue-400)] dark:focus:bg-[var(--highlight-purple-400)]"
:disabled="isSubmitting"
>
<span v-if="isSubmitting">Sending...</span>
<span v-else>Send Message</span>
</button>
Expand Down

0 comments on commit ee4da85

Please sign in to comment.