@uplink-protocol/form-controller
Version:
Reactive multi-step form controller with dynamic validation and state management
172 lines (162 loc) • 6.91 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Form - Uplink Protocol</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
/>
</head>
<body
class="ng-gradient-to-br from-indigo-50 via-white to-indigo-100 min-h-[100%] flex items-center justify-center py-6"
>
<main
id="main-contact-form"
class="w-full min-h-[900px] flex items-center justify-center px-4"
>
<section
id="section-contact-form"
class="flex flex-col items-center w-full"
>
<form
id="contact-form"
novalidate=""
class="bg-white max-w-lg w-full rounded-3xl p-12 shadow-2xl animate-fadeInUp flex flex-col space-y-8 relative"
>
<!-- Header -->
<div id="card-form-header" class="flex flex-col items-center mb-2">
<div
class="mb-4 w-20 rounded-full bg-indigo-100 flex items-center justify-center shadow-lg"
>
<i class="fas fa-envelope-open-text text-indigo-600 text-3xl"></i>
</div>
<h2
class="text-center text-indigo-800 font-extrabold text-4xl tracking-wide mb02"
>
Get in Touch
</h2>
<p class="text-center text-gray-500 font-medium text-lg max-w-xs">
we’d love to hear from you!
</p>
</div>
<!-- Name -->
<div id="field-fullname" class="flex flex-col">
<label
for="name"
class="mb-2 text indigo-700 font-semibold uppercase tracking-widest text-sm"
>
Full Name
</label>
<div class="relative">
<i
class="fas fa-user absolute left-4 top-1/2 -translate-y-1/2 text-indigo-400 text-lg"
></i>
<input
type="text"
id="name"
placeholder="username"
autocomplete="name"
class="rounded-xl border-gray-200 pl-12 pr-5 py-4 text-lg font-medium focus:border-indigo-600 focus:ring-2 focus:ring-indigo-400 focus:outline-none transition duration-300 ease-in-out w-full bg-gray-50 placeholder-gray-400"
/>
</div>
<p
id="name-error"
class="text-red-500 mt-1 min-h-[1.25rem] text-sm font-semibold hidden"
></p>
</div>
<!-- Email -->
<div id="field-email" class="flex flex-col">
<label
for="email"
class="mb-2 text indigo-700 font-semibold uppercase tracking-widest text-sm"
>
Email
</label>
<div class="relative">
<i
class="fas fa-envelope absolute left-4 top-1/2 -translate-y-1/2 text-indigo-400 text-lg"
></i>
<input
type="text"
id="email"
placeholder="email"
autocomplete="false"
class="rounded-xl border-gray-200 pl-12 pr-5 py-4 text-lg font-medium focus:border-indigo-600 focus:ring-2 focus:ring-indigo-400 focus:outline-none transition duration-300 ease-in-out w-full bg-gray-50 placeholder-gray-400"
/>
</div>
<p
id="email-error"
class="text-red-500 mt-1 min-h-[1.25rem] text-sm font-semibold hidden"
></p>
</div>
<!-- Messsage -->
<div id="field-message" class="flex flex-col">
<label for="message"
class="mb-2 text indigo-700 font-semibold uppercase tracking-widest text-sm"
>
Message
</label>
<div class="relative">
<i
class="fas fa-comment-dots absolute left-4 top-5 text-indigo-400 text-lg"
></i>
<textarea
id="message"
name="message"
rows="5"
placeholder="Your message..."
class="rounded-xl border-2 border-gray-200 pl-12 pr-5 py-4 text-lg font-medium focus:border-indigo-600 focus:ring-2 focus:ring-indigo-400 focus:outline-none transition duration-300 ease-in-out w-full bg-gray-50 placeholder-gray-400 resize-none"
></textarea>
</div>
<p
id="message-error"
class="text-red-500 mt-1 min-h-[1.25rem] text-sm font-semibold hidden"
></p>
</div>
<!-- Submit Button -->
<div class="flex justify-center">
<button
id="submit"
type="submit"
class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-xl text-lg shadow-md transition duration-300 ease-in-out"
>
Send Message
</button>
</div>
</form></section>
</main>
<div id="success-message" class="fixed inset-0 bg-indigo-900 bg-opacity-70 flex items-center justify-center hidden">
<div class="bg-white p-8 rounded-2xl shadow-2xl max-w-md">
<div class="flex flex-col items-center">
<div class="w-20 h-20 rounded-full bg-green-100 flex items-center justify-center mb-4">
<i class="fas fa-check text-green-600 text-4xl"></i>
</div>
<h2 class="text-2xl font-bold text-indigo-900 mb-2">Success!</h2>
<p class="text-gray-600 text-center mb-6">Your message has been sent successfully.</p>
<button id="close-success" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-xl">
Close
</button>
</div>
</div>
</div>
<script type="module" src="js/main.js"></script>
<script>
// Add a console log to confirm the page loaded
console.log('Contact form loaded successfully!');
// Add a simple message when form loads successfully
window.addEventListener('DOMContentLoaded', () => {
const formEl = document.getElementById('contact-form');
if (formEl) {
console.log('Form element found and ready for interaction!');
}
// Close success message when the close button is clicked
document.getElementById('close-success').addEventListener('click', () => {
document.getElementById('success-message').classList.add('hidden');
});
});
</script>
</body>
</html>