Bootstrap 5
Form
Ai
Glassmorphism
Gradient
Animation Css
Dark
Tendance
Template
Html Css Js
Formulaire HTML CSS JS style IA 2026 : glassmorphism, gradient aurora, placeholder animé, chips suggestions et bouton shimmer Bootstrap 5.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippet Form AI Style Bootstrap 5 202605020002 | AngularForAll</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
:root {
--ai-purple: #7c3aed;
--ai-cyan: #06b6d4;
--ai-pink: #ec4899;
--ai-glow: rgba(124, 58, 237, 0.5);
--glass-bg: rgba(15, 12, 30, 0.75);
--glass-border: rgba(124, 58, 237, 0.3);
--input-bg: rgba(255, 255, 255, 0.05);
}
body {
min-height: 100vh;
background: #060612;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
font-family: 'Segoe UI', system-ui, sans-serif;
overflow-x: hidden;
}
/* Aurora background */
.aurora-bg {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
}
.aurora-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.35;
animation: float 8s ease-in-out infinite;
}
.aurora-orb:nth-child(1) {
width: 500px; height: 500px;
background: radial-gradient(circle, var(--ai-purple), transparent);
top: -150px; left: -100px;
animation-delay: 0s;
}
.aurora-orb:nth-child(2) {
width: 400px; height: 400px;
background: radial-gradient(circle, var(--ai-cyan), transparent);
bottom: -100px; right: -100px;
animation-delay: -3s;
}
.aurora-orb:nth-child(3) {
width: 300px; height: 300px;
background: radial-gradient(circle, var(--ai-pink), transparent);
top: 50%; left: 60%;
animation-delay: -5s;
}
@keyframes float {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-30px) scale(1.05); }
}
/* Grid overlay */
.grid-overlay {
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(124, 58, 237, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(124, 58, 237, 0.05) 1px, transparent 1px);
background-size: 40px 40px;
z-index: 0;
}
/* Main card */
.ai-card {
position: relative;
z-index: 1;
width: 100%;
max-width: 540px;
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 20px;
padding: 2.5rem 2rem;
border: 1px solid var(--glass-border);
box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 20px 60px rgba(0,0,0,0.5), 0 0 80px var(--ai-glow);
}
/* Glow border animation */
.ai-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 21px;
background: linear-gradient(135deg, var(--ai-purple), var(--ai-cyan), var(--ai-pink), var(--ai-purple));
background-size: 300% 300%;
animation: gradient-border 4s linear infinite;
z-index: -1;
opacity: 0.6;
}
@keyframes gradient-border {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Badge AI */
.ai-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: rgba(124, 58, 237, 0.2);
border: 1px solid rgba(124, 58, 237, 0.4);
color: #a78bfa;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.3rem 0.75rem;
border-radius: 999px;
margin-bottom: 1rem;
}
.ai-badge .pulse-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #a78bfa;
animation: pulse-glow 1.5s ease-in-out infinite;
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.6); }
50% { box-shadow: 0 0 0 5px rgba(167, 139, 250, 0); }
}
/* Title */
.ai-title {
font-size: 1.65rem;
font-weight: 800;
background: linear-gradient(135deg, #fff 0%, #a78bfa 50%, #67e8f9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
margin-bottom: 0.4rem;
}
.ai-subtitle {
color: rgba(255,255,255,0.45);
font-size: 0.88rem;
margin-bottom: 1.5rem;
}
/* Chips suggestions */
.chips-wrap {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 1.5rem;
}
.chip {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.6);
font-size: 0.75rem;
padding: 0.3rem 0.75rem;
border-radius: 999px;
cursor: pointer;
transition: all 0.2s;
user-select: none;
}
.chip:hover, .chip.active {
background: rgba(124, 58, 237, 0.25);
border-color: rgba(124, 58, 237, 0.5);
color: #a78bfa;
}
/* Form controls */
.ai-label {
color: rgba(255,255,255,0.55);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 0.4rem;
display: block;
}
.ai-input, .ai-textarea {
width: 100%;
background: var(--input-bg);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
color: #fff;
padding: 0.7rem 1rem;
font-size: 0.9rem;
transition: all 0.25s;
outline: none;
}
.ai-input:focus, .ai-textarea:focus {
background: rgba(124, 58, 237, 0.08);
border-color: rgba(124, 58, 237, 0.5);
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
color: #fff;
}
.ai-input::placeholder, .ai-textarea::placeholder {
color: rgba(255,255,255,0.2);
}
.ai-textarea {
resize: none;
height: 110px;
line-height: 1.5;
}
/* Input wrapper with icon */
.input-icon-wrap {
position: relative;
}
.input-icon-wrap .field-icon {
position: absolute;
left: 0.85rem;
top: 50%;
transform: translateY(-50%);
color: rgba(124, 58, 237, 0.6);
font-size: 0.95rem;
pointer-events: none;
}
.input-icon-wrap .ai-input {
padding-left: 2.4rem;
}
/* Textarea counter */
.char-counter {
text-align: right;
font-size: 0.72rem;
color: rgba(255,255,255,0.25);
margin-top: 0.3rem;
}
.char-counter.warn { color: #f59e0b; }
/* Submit button */
.ai-btn {
position: relative;
width: 100%;
padding: 0.85rem;
border: none;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 700;
color: #fff;
cursor: pointer;
overflow: hidden;
background: linear-gradient(135deg, var(--ai-purple), var(--ai-cyan));
transition: all 0.3s;
letter-spacing: 0.03em;
}
.ai-btn::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
transition: left 0.5s;
}
.ai-btn:hover::before { left: 100%; }
.ai-btn:hover {
box-shadow: 0 0 30px rgba(124, 58, 237, 0.5);
transform: translateY(-1px);
}
.ai-btn:active { transform: translateY(0); }
.ai-btn .btn-spinner {
display: none;
width: 16px; height: 16px;
border: 2px solid rgba(255,255,255,0.4);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
.ai-btn.loading .btn-text { display: none; }
.ai-btn.loading .btn-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Success message */
.success-msg {
display: none;
background: rgba(6, 182, 212, 0.1);
border: 1px solid rgba(6, 182, 212, 0.3);
border-radius: 10px;
color: #67e8f9;
padding: 0.85rem 1rem;
font-size: 0.88rem;
text-align: center;
gap: 0.5rem;
}
.success-msg.show { display: flex; align-items: center; justify-content: center; }
/* Footer powered */
.ai-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1.5rem;
color: rgba(255,255,255,0.2);
font-size: 0.72rem;
letter-spacing: 0.04em;
}
.ai-footer .dot-loader span {
display: inline-block;
width: 4px; height: 4px;
border-radius: 50%;
background: rgba(124, 58, 237, 0.5);
animation: dot-bounce 1.2s ease-in-out infinite;
}
.ai-footer .dot-loader span:nth-child(2) { animation-delay: 0.2s; }
.ai-footer .dot-loader span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-bounce {
0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
40% { transform: translateY(-5px); opacity: 1; }
}
/* Divider */
.ai-divider {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
margin: 1.5rem 0;
}
</style>
</head>
<body>
<!-- Aurora background -->
<div class="aurora-bg">
<div class="aurora-orb"></div>
<div class="aurora-orb"></div>
<div class="aurora-orb"></div>
</div>
<div class="grid-overlay"></div>
<!-- AI Form Card -->
<div class="ai-card">
<!-- Badge -->
<div class="ai-badge">
<span class="pulse-dot"></span>
AI Assistant · Online
</div>
<!-- Title -->
<h1 class="ai-title">Envoyer un message</h1>
<p class="ai-subtitle">Décrivez votre besoin, notre IA vous répond en quelques secondes.</p>
<!-- Chips suggestions -->
<div class="chips-wrap" id="chips">
<span class="chip" data-prompt="Génère du code TypeScript pour moi">⌨️ Code TypeScript</span>
<span class="chip" data-prompt="Explique-moi un concept Angular">📖 Angular</span>
<span class="chip" data-prompt="Optimise mes performances web">⚡ Performance</span>
<span class="chip" data-prompt="Rédige un article technique">✍️ Rédaction</span>
<span class="chip" data-prompt="Debug mon erreur">🐛 Debug</span>
</div>
<!-- Form -->
<form id="aiForm" novalidate>
<div class="row g-3">
<!-- Name -->
<div class="col-12 col-sm-6">
<label class="ai-label" for="aiName"><i class="bi bi-person me-1"></i>Nom</label>
<div class="input-icon-wrap">
<i class="bi bi-person-fill field-icon"></i>
<input type="text" id="aiName" class="ai-input" placeholder="Votre nom" autocomplete="off">
</div>
</div>
<!-- Email -->
<div class="col-12 col-sm-6">
<label class="ai-label" for="aiEmail"><i class="bi bi-envelope me-1"></i>Email</label>
<div class="input-icon-wrap">
<i class="bi bi-envelope-fill field-icon"></i>
<input type="email" id="aiEmail" class="ai-input" placeholder="vous@exemple.com" autocomplete="off">
</div>
</div>
<!-- Subject -->
<div class="col-12">
<label class="ai-label" for="aiSubject"><i class="bi bi-tag me-1"></i>Sujet</label>
<div class="input-icon-wrap">
<i class="bi bi-tag-fill field-icon"></i>
<input type="text" id="aiSubject" class="ai-input" placeholder="Quel est le sujet ?" autocomplete="off">
</div>
</div>
<!-- Prompt / Message -->
<div class="col-12">
<label class="ai-label" for="aiPrompt"><i class="bi bi-chat-square-text me-1"></i>Votre prompt / message</label>
<textarea id="aiPrompt" class="ai-textarea" placeholder="Décrivez votre besoin en détail…" maxlength="500"></textarea>
<div class="char-counter"><span id="charCount">0</span> / 500</div>
</div>
<!-- Divider -->
<div class="col-12"><hr class="ai-divider"></div>
<!-- Submit -->
<div class="col-12">
<button type="submit" class="ai-btn" id="aiSubmit">
<span class="btn-text d-flex align-items-center justify-content-center gap-2">
<i class="bi bi-stars"></i> Envoyer à l'IA
</span>
<span class="btn-spinner"></span>
</button>
</div>
<!-- Success -->
<div class="col-12">
<div class="success-msg" id="successMsg">
<i class="bi bi-check-circle-fill text-info me-2"></i>
Message envoyé ! Notre IA traite votre demande…
</div>
</div>
</div>
</form>
<!-- Footer -->
<div class="ai-footer">
<span class="dot-loader">
<span></span><span></span><span></span>
</span>
Powered by AI · AngularForAll.com
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
(function () {
'use strict';
// Chips → fill textarea
document.querySelectorAll('.chip').forEach(function (chip) {
chip.addEventListener('click', function () {
document.querySelectorAll('.chip').forEach(function (c) { c.classList.remove('active'); });
chip.classList.add('active');
var prompt = chip.getAttribute('data-prompt');
var textarea = document.getElementById('aiPrompt');
textarea.value = prompt;
textarea.dispatchEvent(new Event('input'));
textarea.focus();
});
});
// Char counter
var textarea = document.getElementById('aiPrompt');
var counter = document.getElementById('charCount');
textarea.addEventListener('input', function () {
var len = textarea.value.length;
counter.textContent = len;
counter.parentElement.classList.toggle('warn', len > 400);
});
// Form submit
document.getElementById('aiForm').addEventListener('submit', function (e) {
e.preventDefault();
var btn = document.getElementById('aiSubmit');
var success = document.getElementById('successMsg');
// Minimal validation
var name = document.getElementById('aiName').value.trim();
var email = document.getElementById('aiEmail').value.trim();
var msg = document.getElementById('aiPrompt').value.trim();
if (!name || !email || !msg) {
// Bootstrap validation shake using border-color toggle
[document.getElementById('aiName'), document.getElementById('aiEmail'), document.getElementById('aiPrompt')].forEach(function (el) {
if (!el.value.trim()) {
el.style.borderColor = '#ec4899';
el.style.boxShadow = '0 0 0 3px rgba(236, 72, 153, 0.2)';
setTimeout(function () {
el.style.borderColor = '';
el.style.boxShadow = '';
}, 1800);
}
});
return;
}
// Loading state
btn.classList.add('loading');
btn.disabled = true;
success.classList.remove('show');
setTimeout(function () {
btn.classList.remove('loading');
btn.disabled = false;
success.classList.add('show');
document.getElementById('aiForm').reset();
counter.textContent = '0';
document.querySelectorAll('.chip').forEach(function (c) { c.classList.remove('active'); });
}, 2000);
});
})();
</script>
</body>
</html>
Télécharger le fichier source