Templates/Support form
A wide white support request form with blue accents - first and last name, email, phone, message, and a privacy checkbox. Copy-paste for any stack.
Share the details and we will get back to you as soon as we can.
Same Tailwind fields as the preview. Paste into your stack, then connect your own submit handler or form backend.
<div class="isolate bg-white px-6 py-16 font-sans text-gray-900 sm:py-20">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl">Get support</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">Share the details and we will get back to you as soon as we can.</p>
</div>
<form method="post" action="#" class="mx-auto mt-12 max-w-xl sm:mt-16">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first_name" class="block text-sm font-semibold leading-6 text-gray-900">First name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="first_name" name="first_name" required autocomplete="given-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div>
<label for="last_name" class="block text-sm font-semibold leading-6 text-gray-900">Last name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="last_name" name="last_name" required autocomplete="family-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm font-semibold leading-6 text-gray-900">Email<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="email" id="email" name="email" required autocomplete="email" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="phone" class="block text-sm font-semibold leading-6 text-gray-900">Phone number</label>
<div class="mt-2.5">
<div class="flex overflow-hidden rounded-md border border-gray-300 bg-white hover:border-[#60a5fa] focus-within:border-[#2563eb] focus-within:ring-2 focus-within:ring-[#2563eb]/25 [&_:focus-visible]:!outline-none">
<select id="country" name="country" autocomplete="country" aria-label="Country" class="appearance-none border-0 bg-transparent py-2 pl-3.5 pr-8 text-base text-gray-500 focus-visible:!outline-none sm:text-sm">
<option value="US">US</option>
<option value="CA">CA</option>
<option value="EU">EU</option>
</select>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" autocomplete="tel" class="min-w-0 flex-1 border-0 bg-transparent py-2 pl-1 pr-3.5 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 focus-visible:!outline-none sm:text-sm" />
</div>
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm font-semibold leading-6 text-gray-900">Message<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<textarea id="message" name="message" rows="4" required placeholder="Describe the issue, steps to reproduce, or what you need help with." class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none"></textarea>
</div>
</div>
<div class="flex gap-x-3 sm:col-span-2">
<input id="agree_to_policies" type="checkbox" name="agree_to_policies" required aria-label="Agree to policies" class="mt-1 size-4 shrink-0 rounded border-gray-300 text-[#2563eb] accent-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/30 focus-visible:!outline-none" />
<label for="agree_to_policies" class="text-sm leading-6 text-gray-600">
By selecting this, you agree to our
<a href="#" class="font-semibold text-[#2563eb] hover:text-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">privacy policy</a>.
</label>
</div>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-[#2563eb] px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Send request</button>
</div>
</form>
</div>
<div class="isolate bg-white px-6 py-16 font-sans text-gray-900 sm:py-20">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl">Get support</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">Share the details and we will get back to you as soon as we can.</p>
</div>
<form method="post" action="#" class="mx-auto mt-12 max-w-xl sm:mt-16">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first_name" class="block text-sm font-semibold leading-6 text-gray-900">First name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="first_name" name="first_name" required autocomplete="given-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div>
<label for="last_name" class="block text-sm font-semibold leading-6 text-gray-900">Last name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="last_name" name="last_name" required autocomplete="family-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm font-semibold leading-6 text-gray-900">Email<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="email" id="email" name="email" required autocomplete="email" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="phone" class="block text-sm font-semibold leading-6 text-gray-900">Phone number</label>
<div class="mt-2.5">
<div class="flex overflow-hidden rounded-md border border-gray-300 bg-white hover:border-[#60a5fa] focus-within:border-[#2563eb] focus-within:ring-2 focus-within:ring-[#2563eb]/25 [&_:focus-visible]:!outline-none">
<select id="country" name="country" autocomplete="country" aria-label="Country" class="appearance-none border-0 bg-transparent py-2 pl-3.5 pr-8 text-base text-gray-500 focus-visible:!outline-none sm:text-sm">
<option value="US">US</option>
<option value="CA">CA</option>
<option value="EU">EU</option>
</select>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" autocomplete="tel" class="min-w-0 flex-1 border-0 bg-transparent py-2 pl-1 pr-3.5 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 focus-visible:!outline-none sm:text-sm" />
</div>
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm font-semibold leading-6 text-gray-900">Message<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<textarea id="message" name="message" rows="4" required placeholder="Describe the issue, steps to reproduce, or what you need help with." class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none"></textarea>
</div>
</div>
<div class="flex gap-x-3 sm:col-span-2">
<input id="agree_to_policies" type="checkbox" name="agree_to_policies" required aria-label="Agree to policies" class="mt-1 size-4 shrink-0 rounded border-gray-300 text-[#2563eb] accent-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/30 focus-visible:!outline-none" />
<label for="agree_to_policies" class="text-sm leading-6 text-gray-600">
By selecting this, you agree to our
<a href="#" class="font-semibold text-[#2563eb] hover:text-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">privacy policy</a>.
</label>
</div>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-[#2563eb] px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Send request</button>
</div>
</form>
</div>
<div class="isolate bg-white px-6 py-16 font-sans text-gray-900 sm:py-20">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl">Get support</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">Share the details and we will get back to you as soon as we can.</p>
</div>
<form id="support-form" method="post" action="#" class="mx-auto mt-12 max-w-xl sm:mt-16">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first_name" class="block text-sm font-semibold leading-6 text-gray-900">First name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="first_name" name="first_name" required autocomplete="given-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div>
<label for="last_name" class="block text-sm font-semibold leading-6 text-gray-900">Last name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="last_name" name="last_name" required autocomplete="family-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm font-semibold leading-6 text-gray-900">Email<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="email" id="email" name="email" required autocomplete="email" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="phone" class="block text-sm font-semibold leading-6 text-gray-900">Phone number</label>
<div class="mt-2.5">
<div class="flex overflow-hidden rounded-md border border-gray-300 bg-white hover:border-[#60a5fa] focus-within:border-[#2563eb] focus-within:ring-2 focus-within:ring-[#2563eb]/25 [&_:focus-visible]:!outline-none">
<select id="country" name="country" autocomplete="country" aria-label="Country" class="appearance-none border-0 bg-transparent py-2 pl-3.5 pr-8 text-base text-gray-500 focus-visible:!outline-none sm:text-sm">
<option value="US">US</option>
<option value="CA">CA</option>
<option value="EU">EU</option>
</select>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" autocomplete="tel" class="min-w-0 flex-1 border-0 bg-transparent py-2 pl-1 pr-3.5 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 focus-visible:!outline-none sm:text-sm" />
</div>
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm font-semibold leading-6 text-gray-900">Message<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<textarea id="message" name="message" rows="4" required placeholder="Describe the issue, steps to reproduce, or what you need help with." class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none"></textarea>
</div>
</div>
<div class="flex gap-x-3 sm:col-span-2">
<input id="agree_to_policies" type="checkbox" name="agree_to_policies" required aria-label="Agree to policies" class="mt-1 size-4 shrink-0 rounded border-gray-300 text-[#2563eb] accent-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/30 focus-visible:!outline-none" />
<label for="agree_to_policies" class="text-sm leading-6 text-gray-600">
By selecting this, you agree to our
<a href="#" class="font-semibold text-[#2563eb] hover:text-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">privacy policy</a>.
</label>
</div>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-[#2563eb] px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Send request</button>
</div>
</form>
</div>
<script>
document.getElementById('support-form')?.addEventListener('submit', (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
});
</script>
<div class="isolate bg-white px-6 py-16 font-sans text-gray-900 sm:py-20">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl">Get support</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">Share the details and we will get back to you as soon as we can.</p>
</div>
<form id="support-form" method="post" action="#" class="mx-auto mt-12 max-w-xl sm:mt-16">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first_name" class="block text-sm font-semibold leading-6 text-gray-900">First name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="first_name" name="first_name" required autocomplete="given-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div>
<label for="last_name" class="block text-sm font-semibold leading-6 text-gray-900">Last name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="last_name" name="last_name" required autocomplete="family-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm font-semibold leading-6 text-gray-900">Email<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="email" id="email" name="email" required autocomplete="email" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="phone" class="block text-sm font-semibold leading-6 text-gray-900">Phone number</label>
<div class="mt-2.5">
<div class="flex overflow-hidden rounded-md border border-gray-300 bg-white hover:border-[#60a5fa] focus-within:border-[#2563eb] focus-within:ring-2 focus-within:ring-[#2563eb]/25 [&_:focus-visible]:!outline-none">
<select id="country" name="country" autocomplete="country" aria-label="Country" class="appearance-none border-0 bg-transparent py-2 pl-3.5 pr-8 text-base text-gray-500 focus-visible:!outline-none sm:text-sm">
<option value="US">US</option>
<option value="CA">CA</option>
<option value="EU">EU</option>
</select>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" autocomplete="tel" class="min-w-0 flex-1 border-0 bg-transparent py-2 pl-1 pr-3.5 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 focus-visible:!outline-none sm:text-sm" />
</div>
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm font-semibold leading-6 text-gray-900">Message<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<textarea id="message" name="message" rows="4" required placeholder="Describe the issue, steps to reproduce, or what you need help with." class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none"></textarea>
</div>
</div>
<div class="flex gap-x-3 sm:col-span-2">
<input id="agree_to_policies" type="checkbox" name="agree_to_policies" required aria-label="Agree to policies" class="mt-1 size-4 shrink-0 rounded border-gray-300 text-[#2563eb] accent-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/30 focus-visible:!outline-none" />
<label for="agree_to_policies" class="text-sm leading-6 text-gray-600">
By selecting this, you agree to our
<a href="#" class="font-semibold text-[#2563eb] hover:text-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">privacy policy</a>.
</label>
</div>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-[#2563eb] px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Send request</button>
</div>
</form>
</div>
<script>
document.getElementById('support-form')?.addEventListener('submit', (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
});
</script>
function SupportForm() {
function handleSubmit(event) {
event.preventDefault();
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
}
return (
<div className="isolate bg-white px-6 py-16 font-sans text-gray-900 sm:py-20">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl">Get support</h2>
<p className="mt-2 text-lg leading-8 text-gray-600">Share the details and we will get back to you as soon as we can.</p>
</div>
<form onSubmit={handleSubmit} className="mx-auto mt-12 max-w-xl sm:mt-16">
<div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label htmlFor="first_name" className="block text-sm font-semibold leading-6 text-gray-900">First name<span className="ml-0.5 text-red-500">*</span></label>
<div className="mt-2.5">
<input type="text" id="first_name" name="first_name" required autocomplete="given-name" className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div>
<label htmlFor="last_name" className="block text-sm font-semibold leading-6 text-gray-900">Last name<span className="ml-0.5 text-red-500">*</span></label>
<div className="mt-2.5">
<input type="text" id="last_name" name="last_name" required autocomplete="family-name" className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="email" className="block text-sm font-semibold leading-6 text-gray-900">Email<span className="ml-0.5 text-red-500">*</span></label>
<div className="mt-2.5">
<input type="email" id="email" name="email" required autocomplete="email" className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="phone" className="block text-sm font-semibold leading-6 text-gray-900">Phone number</label>
<div className="mt-2.5">
<div className="flex overflow-hidden rounded-md border border-gray-300 bg-white hover:border-[#60a5fa] focus-within:border-[#2563eb] focus-within:ring-2 focus-within:ring-[#2563eb]/25 [&_:focus-visible]:!outline-none">
<select id="country" name="country" autocomplete="country" aria-label="Country" className="appearance-none border-0 bg-transparent py-2 pl-3.5 pr-8 text-base text-gray-500 focus-visible:!outline-none sm:text-sm">
<option value="US">US</option>
<option value="CA">CA</option>
<option value="EU">EU</option>
</select>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" autocomplete="tel" className="min-w-0 flex-1 border-0 bg-transparent py-2 pl-1 pr-3.5 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 focus-visible:!outline-none sm:text-sm" />
</div>
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="message" className="block text-sm font-semibold leading-6 text-gray-900">Message<span className="ml-0.5 text-red-500">*</span></label>
<div className="mt-2.5">
<textarea id="message" name="message" rows="4" required placeholder="Describe the issue, steps to reproduce, or what you need help with." className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none"></textarea>
</div>
</div>
<div className="flex gap-x-3 sm:col-span-2">
<input id="agree_to_policies" type="checkbox" name="agree_to_policies" required aria-label="Agree to policies" className="mt-1 size-4 shrink-0 rounded border-gray-300 text-[#2563eb] accent-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/30 focus-visible:!outline-none" />
<label htmlFor="agree_to_policies" className="text-sm leading-6 text-gray-600">
By selecting this, you agree to our
<a href="#" className="font-semibold text-[#2563eb] hover:text-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">privacy policy</a>.
</label>
</div>
</div>
<div className="mt-10">
<button type="submit" className="block w-full rounded-md bg-[#2563eb] px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Send request</button>
</div>
</form>
</div>
);
}
function SupportForm() {
function handleSubmit(event) {
event.preventDefault();
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
}
return (
<div className="isolate bg-white px-6 py-16 font-sans text-gray-900 sm:py-20">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl">Get support</h2>
<p className="mt-2 text-lg leading-8 text-gray-600">Share the details and we will get back to you as soon as we can.</p>
</div>
<form onSubmit={handleSubmit} className="mx-auto mt-12 max-w-xl sm:mt-16">
<div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label htmlFor="first_name" className="block text-sm font-semibold leading-6 text-gray-900">First name<span className="ml-0.5 text-red-500">*</span></label>
<div className="mt-2.5">
<input type="text" id="first_name" name="first_name" required autocomplete="given-name" className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div>
<label htmlFor="last_name" className="block text-sm font-semibold leading-6 text-gray-900">Last name<span className="ml-0.5 text-red-500">*</span></label>
<div className="mt-2.5">
<input type="text" id="last_name" name="last_name" required autocomplete="family-name" className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="email" className="block text-sm font-semibold leading-6 text-gray-900">Email<span className="ml-0.5 text-red-500">*</span></label>
<div className="mt-2.5">
<input type="email" id="email" name="email" required autocomplete="email" className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="phone" className="block text-sm font-semibold leading-6 text-gray-900">Phone number</label>
<div className="mt-2.5">
<div className="flex overflow-hidden rounded-md border border-gray-300 bg-white hover:border-[#60a5fa] focus-within:border-[#2563eb] focus-within:ring-2 focus-within:ring-[#2563eb]/25 [&_:focus-visible]:!outline-none">
<select id="country" name="country" autocomplete="country" aria-label="Country" className="appearance-none border-0 bg-transparent py-2 pl-3.5 pr-8 text-base text-gray-500 focus-visible:!outline-none sm:text-sm">
<option value="US">US</option>
<option value="CA">CA</option>
<option value="EU">EU</option>
</select>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" autocomplete="tel" className="min-w-0 flex-1 border-0 bg-transparent py-2 pl-1 pr-3.5 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 focus-visible:!outline-none sm:text-sm" />
</div>
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="message" className="block text-sm font-semibold leading-6 text-gray-900">Message<span className="ml-0.5 text-red-500">*</span></label>
<div className="mt-2.5">
<textarea id="message" name="message" rows="4" required placeholder="Describe the issue, steps to reproduce, or what you need help with." className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none"></textarea>
</div>
</div>
<div className="flex gap-x-3 sm:col-span-2">
<input id="agree_to_policies" type="checkbox" name="agree_to_policies" required aria-label="Agree to policies" className="mt-1 size-4 shrink-0 rounded border-gray-300 text-[#2563eb] accent-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/30 focus-visible:!outline-none" />
<label htmlFor="agree_to_policies" className="text-sm leading-6 text-gray-600">
By selecting this, you agree to our
<a href="#" className="font-semibold text-[#2563eb] hover:text-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">privacy policy</a>.
</label>
</div>
</div>
<div className="mt-10">
<button type="submit" className="block w-full rounded-md bg-[#2563eb] px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Send request</button>
</div>
</form>
</div>
);
}
'use client';
export default function SupportForm() {
function handleSubmit(event) {
event.preventDefault();
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
}
return (
<div className="isolate bg-white px-6 py-16 font-sans text-gray-900 sm:py-20">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl">Get support</h2>
<p className="mt-2 text-lg leading-8 text-gray-600">Share the details and we will get back to you as soon as we can.</p>
</div>
<form onSubmit={handleSubmit} className="mx-auto mt-12 max-w-xl sm:mt-16">
<div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label htmlFor="first_name" className="block text-sm font-semibold leading-6 text-gray-900">First name<span className="ml-0.5 text-red-500">*</span></label>
<div className="mt-2.5">
<input type="text" id="first_name" name="first_name" required autocomplete="given-name" className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div>
<label htmlFor="last_name" className="block text-sm font-semibold leading-6 text-gray-900">Last name<span className="ml-0.5 text-red-500">*</span></label>
<div className="mt-2.5">
<input type="text" id="last_name" name="last_name" required autocomplete="family-name" className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="email" className="block text-sm font-semibold leading-6 text-gray-900">Email<span className="ml-0.5 text-red-500">*</span></label>
<div className="mt-2.5">
<input type="email" id="email" name="email" required autocomplete="email" className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="phone" className="block text-sm font-semibold leading-6 text-gray-900">Phone number</label>
<div className="mt-2.5">
<div className="flex overflow-hidden rounded-md border border-gray-300 bg-white hover:border-[#60a5fa] focus-within:border-[#2563eb] focus-within:ring-2 focus-within:ring-[#2563eb]/25 [&_:focus-visible]:!outline-none">
<select id="country" name="country" autocomplete="country" aria-label="Country" className="appearance-none border-0 bg-transparent py-2 pl-3.5 pr-8 text-base text-gray-500 focus-visible:!outline-none sm:text-sm">
<option value="US">US</option>
<option value="CA">CA</option>
<option value="EU">EU</option>
</select>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" autocomplete="tel" className="min-w-0 flex-1 border-0 bg-transparent py-2 pl-1 pr-3.5 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 focus-visible:!outline-none sm:text-sm" />
</div>
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="message" className="block text-sm font-semibold leading-6 text-gray-900">Message<span className="ml-0.5 text-red-500">*</span></label>
<div className="mt-2.5">
<textarea id="message" name="message" rows="4" required placeholder="Describe the issue, steps to reproduce, or what you need help with." className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none"></textarea>
</div>
</div>
<div className="flex gap-x-3 sm:col-span-2">
<input id="agree_to_policies" type="checkbox" name="agree_to_policies" required aria-label="Agree to policies" className="mt-1 size-4 shrink-0 rounded border-gray-300 text-[#2563eb] accent-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/30 focus-visible:!outline-none" />
<label htmlFor="agree_to_policies" className="text-sm leading-6 text-gray-600">
By selecting this, you agree to our
<a href="#" className="font-semibold text-[#2563eb] hover:text-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">privacy policy</a>.
</label>
</div>
</div>
<div className="mt-10">
<button type="submit" className="block w-full rounded-md bg-[#2563eb] px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Send request</button>
</div>
</form>
</div>
);
}
'use client';
export default function SupportForm() {
function handleSubmit(event) {
event.preventDefault();
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
}
return (
<div className="isolate bg-white px-6 py-16 font-sans text-gray-900 sm:py-20">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl">Get support</h2>
<p className="mt-2 text-lg leading-8 text-gray-600">Share the details and we will get back to you as soon as we can.</p>
</div>
<form onSubmit={handleSubmit} className="mx-auto mt-12 max-w-xl sm:mt-16">
<div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label htmlFor="first_name" className="block text-sm font-semibold leading-6 text-gray-900">First name<span className="ml-0.5 text-red-500">*</span></label>
<div className="mt-2.5">
<input type="text" id="first_name" name="first_name" required autocomplete="given-name" className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div>
<label htmlFor="last_name" className="block text-sm font-semibold leading-6 text-gray-900">Last name<span className="ml-0.5 text-red-500">*</span></label>
<div className="mt-2.5">
<input type="text" id="last_name" name="last_name" required autocomplete="family-name" className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="email" className="block text-sm font-semibold leading-6 text-gray-900">Email<span className="ml-0.5 text-red-500">*</span></label>
<div className="mt-2.5">
<input type="email" id="email" name="email" required autocomplete="email" className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="phone" className="block text-sm font-semibold leading-6 text-gray-900">Phone number</label>
<div className="mt-2.5">
<div className="flex overflow-hidden rounded-md border border-gray-300 bg-white hover:border-[#60a5fa] focus-within:border-[#2563eb] focus-within:ring-2 focus-within:ring-[#2563eb]/25 [&_:focus-visible]:!outline-none">
<select id="country" name="country" autocomplete="country" aria-label="Country" className="appearance-none border-0 bg-transparent py-2 pl-3.5 pr-8 text-base text-gray-500 focus-visible:!outline-none sm:text-sm">
<option value="US">US</option>
<option value="CA">CA</option>
<option value="EU">EU</option>
</select>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" autocomplete="tel" className="min-w-0 flex-1 border-0 bg-transparent py-2 pl-1 pr-3.5 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 focus-visible:!outline-none sm:text-sm" />
</div>
</div>
</div>
<div className="sm:col-span-2">
<label htmlFor="message" className="block text-sm font-semibold leading-6 text-gray-900">Message<span className="ml-0.5 text-red-500">*</span></label>
<div className="mt-2.5">
<textarea id="message" name="message" rows="4" required placeholder="Describe the issue, steps to reproduce, or what you need help with." className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none"></textarea>
</div>
</div>
<div className="flex gap-x-3 sm:col-span-2">
<input id="agree_to_policies" type="checkbox" name="agree_to_policies" required aria-label="Agree to policies" className="mt-1 size-4 shrink-0 rounded border-gray-300 text-[#2563eb] accent-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/30 focus-visible:!outline-none" />
<label htmlFor="agree_to_policies" className="text-sm leading-6 text-gray-600">
By selecting this, you agree to our
<a href="#" className="font-semibold text-[#2563eb] hover:text-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">privacy policy</a>.
</label>
</div>
</div>
<div className="mt-10">
<button type="submit" className="block w-full rounded-md bg-[#2563eb] px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Send request</button>
</div>
</form>
</div>
);
}
<script setup>
function onSubmit(event) {
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
}
</script>
<template>
<div class="isolate bg-white px-6 py-16 font-sans text-gray-900 sm:py-20">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl">Get support</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">Share the details and we will get back to you as soon as we can.</p>
</div>
<form class="mx-auto mt-12 max-w-xl sm:mt-16" @submit.prevent="onSubmit">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first_name" class="block text-sm font-semibold leading-6 text-gray-900">First name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="first_name" name="first_name" required autocomplete="given-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div>
<label for="last_name" class="block text-sm font-semibold leading-6 text-gray-900">Last name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="last_name" name="last_name" required autocomplete="family-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm font-semibold leading-6 text-gray-900">Email<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="email" id="email" name="email" required autocomplete="email" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="phone" class="block text-sm font-semibold leading-6 text-gray-900">Phone number</label>
<div class="mt-2.5">
<div class="flex overflow-hidden rounded-md border border-gray-300 bg-white hover:border-[#60a5fa] focus-within:border-[#2563eb] focus-within:ring-2 focus-within:ring-[#2563eb]/25 [&_:focus-visible]:!outline-none">
<select id="country" name="country" autocomplete="country" aria-label="Country" class="appearance-none border-0 bg-transparent py-2 pl-3.5 pr-8 text-base text-gray-500 focus-visible:!outline-none sm:text-sm">
<option value="US">US</option>
<option value="CA">CA</option>
<option value="EU">EU</option>
</select>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" autocomplete="tel" class="min-w-0 flex-1 border-0 bg-transparent py-2 pl-1 pr-3.5 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 focus-visible:!outline-none sm:text-sm" />
</div>
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm font-semibold leading-6 text-gray-900">Message<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<textarea id="message" name="message" rows="4" required placeholder="Describe the issue, steps to reproduce, or what you need help with." class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none"></textarea>
</div>
</div>
<div class="flex gap-x-3 sm:col-span-2">
<input id="agree_to_policies" type="checkbox" name="agree_to_policies" required aria-label="Agree to policies" class="mt-1 size-4 shrink-0 rounded border-gray-300 text-[#2563eb] accent-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/30 focus-visible:!outline-none" />
<label for="agree_to_policies" class="text-sm leading-6 text-gray-600">
By selecting this, you agree to our
<a href="#" class="font-semibold text-[#2563eb] hover:text-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">privacy policy</a>.
</label>
</div>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-[#2563eb] px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Send request</button>
</div>
</form>
</div>
</template>
<script setup>
function onSubmit(event) {
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
}
</script>
<template>
<div class="isolate bg-white px-6 py-16 font-sans text-gray-900 sm:py-20">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl">Get support</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">Share the details and we will get back to you as soon as we can.</p>
</div>
<form class="mx-auto mt-12 max-w-xl sm:mt-16" @submit.prevent="onSubmit">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first_name" class="block text-sm font-semibold leading-6 text-gray-900">First name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="first_name" name="first_name" required autocomplete="given-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div>
<label for="last_name" class="block text-sm font-semibold leading-6 text-gray-900">Last name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="last_name" name="last_name" required autocomplete="family-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm font-semibold leading-6 text-gray-900">Email<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="email" id="email" name="email" required autocomplete="email" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="phone" class="block text-sm font-semibold leading-6 text-gray-900">Phone number</label>
<div class="mt-2.5">
<div class="flex overflow-hidden rounded-md border border-gray-300 bg-white hover:border-[#60a5fa] focus-within:border-[#2563eb] focus-within:ring-2 focus-within:ring-[#2563eb]/25 [&_:focus-visible]:!outline-none">
<select id="country" name="country" autocomplete="country" aria-label="Country" class="appearance-none border-0 bg-transparent py-2 pl-3.5 pr-8 text-base text-gray-500 focus-visible:!outline-none sm:text-sm">
<option value="US">US</option>
<option value="CA">CA</option>
<option value="EU">EU</option>
</select>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" autocomplete="tel" class="min-w-0 flex-1 border-0 bg-transparent py-2 pl-1 pr-3.5 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 focus-visible:!outline-none sm:text-sm" />
</div>
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm font-semibold leading-6 text-gray-900">Message<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<textarea id="message" name="message" rows="4" required placeholder="Describe the issue, steps to reproduce, or what you need help with." class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none"></textarea>
</div>
</div>
<div class="flex gap-x-3 sm:col-span-2">
<input id="agree_to_policies" type="checkbox" name="agree_to_policies" required aria-label="Agree to policies" class="mt-1 size-4 shrink-0 rounded border-gray-300 text-[#2563eb] accent-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/30 focus-visible:!outline-none" />
<label for="agree_to_policies" class="text-sm leading-6 text-gray-600">
By selecting this, you agree to our
<a href="#" class="font-semibold text-[#2563eb] hover:text-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">privacy policy</a>.
</label>
</div>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-[#2563eb] px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Send request</button>
</div>
</form>
</div>
</template>
<script setup>
function onSubmit(event) {
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
}
</script>
<template>
<div class="isolate bg-white px-6 py-16 font-sans text-gray-900 sm:py-20">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl">Get support</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">Share the details and we will get back to you as soon as we can.</p>
</div>
<form class="mx-auto mt-12 max-w-xl sm:mt-16" @submit.prevent="onSubmit">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first_name" class="block text-sm font-semibold leading-6 text-gray-900">First name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="first_name" name="first_name" required autocomplete="given-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div>
<label for="last_name" class="block text-sm font-semibold leading-6 text-gray-900">Last name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="last_name" name="last_name" required autocomplete="family-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm font-semibold leading-6 text-gray-900">Email<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="email" id="email" name="email" required autocomplete="email" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="phone" class="block text-sm font-semibold leading-6 text-gray-900">Phone number</label>
<div class="mt-2.5">
<div class="flex overflow-hidden rounded-md border border-gray-300 bg-white hover:border-[#60a5fa] focus-within:border-[#2563eb] focus-within:ring-2 focus-within:ring-[#2563eb]/25 [&_:focus-visible]:!outline-none">
<select id="country" name="country" autocomplete="country" aria-label="Country" class="appearance-none border-0 bg-transparent py-2 pl-3.5 pr-8 text-base text-gray-500 focus-visible:!outline-none sm:text-sm">
<option value="US">US</option>
<option value="CA">CA</option>
<option value="EU">EU</option>
</select>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" autocomplete="tel" class="min-w-0 flex-1 border-0 bg-transparent py-2 pl-1 pr-3.5 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 focus-visible:!outline-none sm:text-sm" />
</div>
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm font-semibold leading-6 text-gray-900">Message<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<textarea id="message" name="message" rows="4" required placeholder="Describe the issue, steps to reproduce, or what you need help with." class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none"></textarea>
</div>
</div>
<div class="flex gap-x-3 sm:col-span-2">
<input id="agree_to_policies" type="checkbox" name="agree_to_policies" required aria-label="Agree to policies" class="mt-1 size-4 shrink-0 rounded border-gray-300 text-[#2563eb] accent-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/30 focus-visible:!outline-none" />
<label for="agree_to_policies" class="text-sm leading-6 text-gray-600">
By selecting this, you agree to our
<a href="#" class="font-semibold text-[#2563eb] hover:text-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">privacy policy</a>.
</label>
</div>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-[#2563eb] px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Send request</button>
</div>
</form>
</div>
</template>
<script setup>
function onSubmit(event) {
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
}
</script>
<template>
<div class="isolate bg-white px-6 py-16 font-sans text-gray-900 sm:py-20">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl">Get support</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">Share the details and we will get back to you as soon as we can.</p>
</div>
<form class="mx-auto mt-12 max-w-xl sm:mt-16" @submit.prevent="onSubmit">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first_name" class="block text-sm font-semibold leading-6 text-gray-900">First name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="first_name" name="first_name" required autocomplete="given-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div>
<label for="last_name" class="block text-sm font-semibold leading-6 text-gray-900">Last name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="last_name" name="last_name" required autocomplete="family-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm font-semibold leading-6 text-gray-900">Email<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="email" id="email" name="email" required autocomplete="email" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="phone" class="block text-sm font-semibold leading-6 text-gray-900">Phone number</label>
<div class="mt-2.5">
<div class="flex overflow-hidden rounded-md border border-gray-300 bg-white hover:border-[#60a5fa] focus-within:border-[#2563eb] focus-within:ring-2 focus-within:ring-[#2563eb]/25 [&_:focus-visible]:!outline-none">
<select id="country" name="country" autocomplete="country" aria-label="Country" class="appearance-none border-0 bg-transparent py-2 pl-3.5 pr-8 text-base text-gray-500 focus-visible:!outline-none sm:text-sm">
<option value="US">US</option>
<option value="CA">CA</option>
<option value="EU">EU</option>
</select>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" autocomplete="tel" class="min-w-0 flex-1 border-0 bg-transparent py-2 pl-1 pr-3.5 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 focus-visible:!outline-none sm:text-sm" />
</div>
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm font-semibold leading-6 text-gray-900">Message<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<textarea id="message" name="message" rows="4" required placeholder="Describe the issue, steps to reproduce, or what you need help with." class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none"></textarea>
</div>
</div>
<div class="flex gap-x-3 sm:col-span-2">
<input id="agree_to_policies" type="checkbox" name="agree_to_policies" required aria-label="Agree to policies" class="mt-1 size-4 shrink-0 rounded border-gray-300 text-[#2563eb] accent-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/30 focus-visible:!outline-none" />
<label for="agree_to_policies" class="text-sm leading-6 text-gray-600">
By selecting this, you agree to our
<a href="#" class="font-semibold text-[#2563eb] hover:text-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">privacy policy</a>.
</label>
</div>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-[#2563eb] px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Send request</button>
</div>
</form>
</div>
</template>
---
// src/components/SupportForm.astro
---
<div class="isolate bg-white px-6 py-16 font-sans text-gray-900 sm:py-20">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl">Get support</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">Share the details and we will get back to you as soon as we can.</p>
</div>
<form method="post" action="#" class="mx-auto mt-12 max-w-xl sm:mt-16">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first_name" class="block text-sm font-semibold leading-6 text-gray-900">First name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="first_name" name="first_name" required autocomplete="given-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div>
<label for="last_name" class="block text-sm font-semibold leading-6 text-gray-900">Last name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="last_name" name="last_name" required autocomplete="family-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm font-semibold leading-6 text-gray-900">Email<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="email" id="email" name="email" required autocomplete="email" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="phone" class="block text-sm font-semibold leading-6 text-gray-900">Phone number</label>
<div class="mt-2.5">
<div class="flex overflow-hidden rounded-md border border-gray-300 bg-white hover:border-[#60a5fa] focus-within:border-[#2563eb] focus-within:ring-2 focus-within:ring-[#2563eb]/25 [&_:focus-visible]:!outline-none">
<select id="country" name="country" autocomplete="country" aria-label="Country" class="appearance-none border-0 bg-transparent py-2 pl-3.5 pr-8 text-base text-gray-500 focus-visible:!outline-none sm:text-sm">
<option value="US">US</option>
<option value="CA">CA</option>
<option value="EU">EU</option>
</select>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" autocomplete="tel" class="min-w-0 flex-1 border-0 bg-transparent py-2 pl-1 pr-3.5 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 focus-visible:!outline-none sm:text-sm" />
</div>
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm font-semibold leading-6 text-gray-900">Message<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<textarea id="message" name="message" rows="4" required placeholder="Describe the issue, steps to reproduce, or what you need help with." class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none"></textarea>
</div>
</div>
<div class="flex gap-x-3 sm:col-span-2">
<input id="agree_to_policies" type="checkbox" name="agree_to_policies" required aria-label="Agree to policies" class="mt-1 size-4 shrink-0 rounded border-gray-300 text-[#2563eb] accent-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/30 focus-visible:!outline-none" />
<label for="agree_to_policies" class="text-sm leading-6 text-gray-600">
By selecting this, you agree to our
<a href="#" class="font-semibold text-[#2563eb] hover:text-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">privacy policy</a>.
</label>
</div>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-[#2563eb] px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Send request</button>
</div>
</form>
</div>
---
// src/components/SupportForm.astro
---
<div class="isolate bg-white px-6 py-16 font-sans text-gray-900 sm:py-20">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl">Get support</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">Share the details and we will get back to you as soon as we can.</p>
</div>
<form method="post" action="#" class="mx-auto mt-12 max-w-xl sm:mt-16">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first_name" class="block text-sm font-semibold leading-6 text-gray-900">First name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="first_name" name="first_name" required autocomplete="given-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div>
<label for="last_name" class="block text-sm font-semibold leading-6 text-gray-900">Last name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="last_name" name="last_name" required autocomplete="family-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm font-semibold leading-6 text-gray-900">Email<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="email" id="email" name="email" required autocomplete="email" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="phone" class="block text-sm font-semibold leading-6 text-gray-900">Phone number</label>
<div class="mt-2.5">
<div class="flex overflow-hidden rounded-md border border-gray-300 bg-white hover:border-[#60a5fa] focus-within:border-[#2563eb] focus-within:ring-2 focus-within:ring-[#2563eb]/25 [&_:focus-visible]:!outline-none">
<select id="country" name="country" autocomplete="country" aria-label="Country" class="appearance-none border-0 bg-transparent py-2 pl-3.5 pr-8 text-base text-gray-500 focus-visible:!outline-none sm:text-sm">
<option value="US">US</option>
<option value="CA">CA</option>
<option value="EU">EU</option>
</select>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" autocomplete="tel" class="min-w-0 flex-1 border-0 bg-transparent py-2 pl-1 pr-3.5 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 focus-visible:!outline-none sm:text-sm" />
</div>
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm font-semibold leading-6 text-gray-900">Message<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<textarea id="message" name="message" rows="4" required placeholder="Describe the issue, steps to reproduce, or what you need help with." class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none"></textarea>
</div>
</div>
<div class="flex gap-x-3 sm:col-span-2">
<input id="agree_to_policies" type="checkbox" name="agree_to_policies" required aria-label="Agree to policies" class="mt-1 size-4 shrink-0 rounded border-gray-300 text-[#2563eb] accent-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/30 focus-visible:!outline-none" />
<label for="agree_to_policies" class="text-sm leading-6 text-gray-600">
By selecting this, you agree to our
<a href="#" class="font-semibold text-[#2563eb] hover:text-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">privacy policy</a>.
</label>
</div>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-[#2563eb] px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Send request</button>
</div>
</form>
</div>
<script>
function onSubmit(event) {
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
}
</script>
<div class="isolate bg-white px-6 py-16 font-sans text-gray-900 sm:py-20">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl">Get support</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">Share the details and we will get back to you as soon as we can.</p>
</div>
<form method="post" class="mx-auto mt-12 max-w-xl sm:mt-16" on:submit|preventDefault={onSubmit}>
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first_name" class="block text-sm font-semibold leading-6 text-gray-900">First name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="first_name" name="first_name" required autocomplete="given-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div>
<label for="last_name" class="block text-sm font-semibold leading-6 text-gray-900">Last name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="last_name" name="last_name" required autocomplete="family-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm font-semibold leading-6 text-gray-900">Email<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="email" id="email" name="email" required autocomplete="email" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="phone" class="block text-sm font-semibold leading-6 text-gray-900">Phone number</label>
<div class="mt-2.5">
<div class="flex overflow-hidden rounded-md border border-gray-300 bg-white hover:border-[#60a5fa] focus-within:border-[#2563eb] focus-within:ring-2 focus-within:ring-[#2563eb]/25 [&_:focus-visible]:!outline-none">
<select id="country" name="country" autocomplete="country" aria-label="Country" class="appearance-none border-0 bg-transparent py-2 pl-3.5 pr-8 text-base text-gray-500 focus-visible:!outline-none sm:text-sm">
<option value="US">US</option>
<option value="CA">CA</option>
<option value="EU">EU</option>
</select>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" autocomplete="tel" class="min-w-0 flex-1 border-0 bg-transparent py-2 pl-1 pr-3.5 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 focus-visible:!outline-none sm:text-sm" />
</div>
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm font-semibold leading-6 text-gray-900">Message<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<textarea id="message" name="message" rows="4" required placeholder="Describe the issue, steps to reproduce, or what you need help with." class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none"></textarea>
</div>
</div>
<div class="flex gap-x-3 sm:col-span-2">
<input id="agree_to_policies" type="checkbox" name="agree_to_policies" required aria-label="Agree to policies" class="mt-1 size-4 shrink-0 rounded border-gray-300 text-[#2563eb] accent-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/30 focus-visible:!outline-none" />
<label for="agree_to_policies" class="text-sm leading-6 text-gray-600">
By selecting this, you agree to our
<a href="#" class="font-semibold text-[#2563eb] hover:text-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">privacy policy</a>.
</label>
</div>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-[#2563eb] px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Send request</button>
</div>
</form>
</div>
<script>
function onSubmit(event) {
const data = new FormData(event.currentTarget);
// Handle form data (fetch, auth API, etc.)
console.log(Object.fromEntries(data.entries()));
}
</script>
<div class="isolate bg-white px-6 py-16 font-sans text-gray-900 sm:py-20">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl">Get support</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">Share the details and we will get back to you as soon as we can.</p>
</div>
<form method="post" class="mx-auto mt-12 max-w-xl sm:mt-16" on:submit|preventDefault={onSubmit}>
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first_name" class="block text-sm font-semibold leading-6 text-gray-900">First name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="first_name" name="first_name" required autocomplete="given-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div>
<label for="last_name" class="block text-sm font-semibold leading-6 text-gray-900">Last name<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="text" id="last_name" name="last_name" required autocomplete="family-name" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm font-semibold leading-6 text-gray-900">Email<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<input type="email" id="email" name="email" required autocomplete="email" class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none" />
</div>
</div>
<div class="sm:col-span-2">
<label for="phone" class="block text-sm font-semibold leading-6 text-gray-900">Phone number</label>
<div class="mt-2.5">
<div class="flex overflow-hidden rounded-md border border-gray-300 bg-white hover:border-[#60a5fa] focus-within:border-[#2563eb] focus-within:ring-2 focus-within:ring-[#2563eb]/25 [&_:focus-visible]:!outline-none">
<select id="country" name="country" autocomplete="country" aria-label="Country" class="appearance-none border-0 bg-transparent py-2 pl-3.5 pr-8 text-base text-gray-500 focus-visible:!outline-none sm:text-sm">
<option value="US">US</option>
<option value="CA">CA</option>
<option value="EU">EU</option>
</select>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" autocomplete="tel" class="min-w-0 flex-1 border-0 bg-transparent py-2 pl-1 pr-3.5 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 focus-visible:!outline-none sm:text-sm" />
</div>
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm font-semibold leading-6 text-gray-900">Message<span class="ml-0.5 text-red-500">*</span></label>
<div class="mt-2.5">
<textarea id="message" name="message" rows="4" required placeholder="Describe the issue, steps to reproduce, or what you need help with." class="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-base text-gray-900 placeholder:text-sm placeholder:text-gray-400 hover:border-[#60a5fa] focus:border-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/25 focus-visible:!outline-none"></textarea>
</div>
</div>
<div class="flex gap-x-3 sm:col-span-2">
<input id="agree_to_policies" type="checkbox" name="agree_to_policies" required aria-label="Agree to policies" class="mt-1 size-4 shrink-0 rounded border-gray-300 text-[#2563eb] accent-[#2563eb] focus:ring-2 focus:ring-[#2563eb]/30 focus-visible:!outline-none" />
<label for="agree_to_policies" class="text-sm leading-6 text-gray-600">
By selecting this, you agree to our
<a href="#" class="font-semibold text-[#2563eb] hover:text-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">privacy policy</a>.
</label>
</div>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-[#2563eb] px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-[#3b82f6] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#2563eb]">Send request</button>
</div>
</form>
</div>Docs sites, SaaS apps, and product pages where visitors need help. The wide white layout works well on dedicated support or contact pages.
Point the form at your FormsReach endpoint, configure email recipients, and optionally WhatsApp on paid plans. Workflow rules can route by message keywords when you grow past a single inbox.
Quick answers about fields, styling, and wiring this template to your own backend.
No. It captures support requests and delivers them to you. Use webhooks or your help desk if you need ticket IDs and SLAs.
Two-column name fields match common support and CRM imports. Merge them into one name field if your backend prefers it.
Keep it when you collect personal data under a privacy policy. Remove the row if your site already covers consent elsewhere.
WhatsApp is on Pro and Agency. Free and Starter include email, webhooks, and workflow rules with monthly credits.
Create a free API key. Upgrade when you need more monthly credits.