Categories
Interactive HTML and Tailwind CSS Contact Us Form Code Snippet | Component
This code snippet presents a modern and functional contact form component design crafted with HTML and Tailwind CSS. The form code snippet features well-organized input fields for first name, username, email, select input, and number, each styled with consistent padding and border properties. Checkbox and radio button options are included with clear labels for easy selection, and the form maintains a clean appearance with a white background, rounded corners, and subtle shadow effects. Overall, this component offers a visually appealing and user-friendly solution for collecting contact information and user preferences. This a general form and customisable
<div class="sm:p-4 lg:p-11 xl:p-20 2xl:p-52 relative">
<div class="flex justify-center">
<div class="max-w-2xl w-full m-auto p-6">
<!-- Main form details begins here -->
<div class="shadow rounded bg-white">
<div class="p-5">
<h5 class="text-lg font-semibold">Form Inputs</h5>
</div>
<div class="p-5 border-t border-gray-100">
<form>
<div class="grid grid-cols-1 gap-5">
<div class="">
<label class="font-semibold">First Name:</label>
<input
type="text"
class="w-full py-2 px-3 h-10 bg-transparent rounded outline-none border border-gray-200 focus:border-indigo-600"
placeholder="First Name:"
id="firstname"
name="name"
required=""
/>
</div>
<div class="">
<label class="font-semibold">Username:</label>
<div class="relative mt-2">
<span
class="absolute top-0.5 start-0.5 w-9 h-9 text-xl bg-gray-100 inline-flex justify-center items-center text-dark rounded"
id="basic-addon1"
><i class="fas fa-at"></i
></span>
<input
type="text"
class="ps-12 w-full py-2 px-3 h-10 bg-transparent rounded outline-none border border-gray-200 focus:border-indigo-600"
placeholder="Username"
required
/>
</div>
</div>
<div class="">
<label class="font-semibold">Your Email:</label>
<input
type="email"
class="w-full py-2 px-3 h-10 bg-transparent rounded outline-none border border-gray-200 focus:border-indigo-600"
placeholder="Email"
name="email"
required=""
/>
</div>
<div class="">
<label class="font-semibold">Select Input:</label>
<select
class="mt-2 w-full py-2 px-3 h-10 bg-transparent rounded outline-none border border-gray-200 focus:border-indigo-600"
>
<option value="USA">USA</option>
<option value="CAD">Canada</option>
<option value="CHINA">China</option>
</select>
</div>
<div class="">
<label class="font-semibold">Number:</label>
<input
type="number"
class="w-full py-2 px-3 h-10 bg-transparent rounded outline-none border border-gray-200 focus:border-indigo-600"
placeholder="Zip:"
id="zipcode"
name="number"
required=""
/>
</div>
<div class="">
<h6 class="font-semibold">Form Checkbox</h6>
<div class="flex items-center w-full mb-0">
<input
class="rounded border-gray-200 text-indigo-600 focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50 me-2"
type="checkbox"
checked
value=""
id="sameaddress"
/>
<label class="text-slate-400" for="sameaddress"
><i class="far fa-check-square"></i> Checkbox 1</label
>
</div>
<div class="flex items-center w-full mb-0">
<input
class="rounded border-gray-200 text-indigo-600 focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50 me-2"
type="checkbox"
value=""
id="savenexttime"
/>
<label class="text-slate-400" for="savenexttime"
><i class="far fa-check-square"></i> Checkbox 2</label
>
</div>
<div class="flex items-center w-full mb-0">
<input
class="rounded border-gray-200 text-indigo-600 focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50 me-2"
type="checkbox"
disabled
value=""
id="checkbox-d"
/>
<label class="text-slate-400" for="checkbox-d"
><i class="far fa-check-square"></i> Disabled
Checkbox</label
>
</div>
</div>
<div class="">
<h6 class="font-semibold">Form Radio</h6>
<div class="block">
<div>
<label class="inline-flex items-center">
<input
type="radio"
class="border-gray-200 text-indigo-600 focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50 me-2"
checked
name="radio-colors"
value="1"
/>
<span class="text-slate-400"
><i class="far fa-dot-circle"></i> Radio 1</span
>
</label>
</div>
</div>
<div class="block mt-2">
<div>
<label class="inline-flex items-center">
<input
type="radio"
class="border-gray-200 text-indigo-600 focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50 me-2"
name="radio-colors"
value="1"
/>
<span class="text-slate-400"
><i class="far fa-dot-circle"></i> Radio 2</span
>
</label>
</div>
</div>
<div class="block mt-2">
<div>
<label class="inline-flex items-center">
<input
type="radio"
class="border-gray-200 text-indigo-600 focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50 me-2"
disabled
name="radio-colors"
value="1"
/>
<span class="text-slate-400"
><i class="far fa-dot-circle"></i> Disabled
Radio</span
>
</label>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- Main form details ends here -->
</div>
</div>
</div>