Contact
A contact form can be used to allow visitors to submit messages directly via the website, instead of using email or telephone.
These page sections require the button and @tailwindcss/custom-forms plugins.
Contact section 1
<div class="text-gray-900 font-sans">
<div class="container max-w-3xl py-20 lg:py-32">
<div class="text-center">
<h2 class="text-xl font-bold md:text-2xl">Vulputate Ullamcorper</h2>
<p class="mt-2 text-gray-700 text-lg md:mt-4">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
<form class="mt-8 md:mt-12" action="#">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
<div
x-data="{ ...floatingLabelInputGroup() }"
class="relative"
>
<label
for="example-input"
class="transform pb-1 block text-gray-600 text-sm leading-tight transition-all"
x-bind:class="labelClasses()"
>
First name
</label>
<input
id="example-input"
x-ref="input"
type="text"
class="w-full px-0 border-0 border-b transition-colors focus:ring-0 focus:border-red-600"
placeholder=""
x-on:focus="onFocus"
x-on:blur="onBlur"
>
</div>
<div
x-data="{ ...floatingLabelInputGroup() }"
class="relative"
>
<label
for="example-input-2"
class="transform pb-1 block text-gray-600 text-sm leading-tight transition-all"
x-bind:class="labelClasses()"
>
Last name
</label>
<input
id="example-input-2"
x-ref="input"
type="text"
class="w-full px-0 border-0 border-b transition-colors focus:ring-0 focus:border-red-600"
placeholder=""
x-on:focus="onFocus"
x-on:blur="onBlur"
>
</div>
<div
x-data="{ ...floatingLabelInputGroup() }"
class="relative md:col-span-2"
>
<label
for="example-input-3"
class="transform pb-1 block text-gray-600 text-sm leading-tight transition-all"
x-bind:class="labelClasses()"
>
Email
</label>
<input
id="example-input-3"
x-ref="input"
type="text"
class="w-full px-0 border-0 border-b transition-colors focus:ring-0 focus:border-red-600"
placeholder=""
x-on:focus="onFocus"
x-on:blur="onBlur"
>
</div>
<div
x-data="{ ...floatingLabelInputGroup() }"
class="relative md:col-span-2"
>
<label
for="example-input-4"
class="transform pb-1 block text-gray-600 text-sm leading-tight transition-all"
x-bind:class="labelClasses()"
>
Message
</label>
<textarea
id="example-input-4"
x-ref="input"
type="text"
class="w-full px-0 border-0 border-b transition-colors focus:ring-0 focus:border-red-600"
placeholder=""
rows="1"
x-on:focus="onFocus"
x-on:blur="onBlur"
></textarea>
</div>
<div class="text-right md:col-span-2">
<button class="btn text-black border-black hover:bg-black hover:text-white">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
<script>
const floatingLabelInputGroup = () => {
return {
labelIsLifted: false,
labelClasses() {
return {
'text-gray-900': this.labelIsLifted,
'translate-y-8': !this.labelIsLifted,
}
},
onFocus() {
this.labelIsLifted = true
},
onBlur() {
this.labelIsLifted = this.$refs.input.value.length > 0
},
}
}
</script>
Contact section 2
<div class="text-gray-900 font-sans">
<div class="container max-w-3xl py-20 lg:py-32">
<div class="text-center">
<h2 class="text-xl font-bold md:text-2xl">Vulputate Ullamcorper</h2>
<p class="mt-2 text-gray-700 text-lg md:mt-4">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
<form class="mt-8 md:mt-12" action="#">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
<div>
<label for="example-input" class="block text-gray-800 text-sm">First name</label>
<input id="example-input" type="text" class="mt-1 w-full" placeholder="">
</div>
<div>
<label for="example-input-2" class="block text-gray-800 text-sm">Last name</label>
<input id="example-input-2" type="text" class="mt-1 w-full" placeholder="">
</div>
<div class="md:col-span-2">
<label for="example-input-3" class="block text-gray-800 text-sm">Email</label>
<input id="example-input-3" type="text" class="mt-1 w-full" placeholder="">
</div>
<div class="md:col-span-2">
<label for="example-input-4" class="block text-gray-800 text-sm">Message</label>
<textarea id="example-input-4" class="mt-1 w-full" placeholder="" rows="8"></textarea>
</div>
<div>
<button class="btn text-black border-black hover:bg-black hover:text-white">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
Contact section 3
<div class="text-gray-900 font-sans">
<div class="container max-w-4xl py-20 lg:py-32">
<div>
<h2 class="text-xl font-bold md:text-2xl">Vulputate Ullamcorper</h2>
</div>
<form class="mt-8" action="#">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
<div>
<label for="example-input" class="block text-gray-800 text-sm">First name</label>
<input id="example-input" type="text" class="mt-1 w-full" placeholder="">
</div>
<div>
<label for="example-input-2" class="block text-gray-800 text-sm">Last name</label>
<input id="example-input-2" type="text" class="mt-1 w-full" placeholder="">
</div>
<div class="md:col-span-2">
<label for="example-input-3" class="block text-gray-800 text-sm">Email</label>
<input id="example-input-3" type="text" class="mt-1 w-full" placeholder="">
</div>
</div>
<div>
<label for="example-input-4" class="block text-gray-800 text-sm">Message</label>
<textarea id="example-input-4" class="mt-1 w-full" placeholder="" rows="5"></textarea>
</div>
</div>
<div class="flex justify-end mt-4 md:mt-8">
<button class="btn text-black border-black hover:bg-black hover:text-white">
Submit
</button>
</div>
</form>
</div>
</div>