This contact form focuses on a single primary action, encouraging users to initiate contact quickly with minimal input.
HTML
<form class="contact-cta">
<input type="email" placeholder="Your email" required />
<button type="submit">Request Contact</button>
</form>CSS
.contact-cta {
width: 200px;
padding: 1rem;
border-radius: 18px;
background: radial-gradient(circle at top, #eef2ff, #ffffff);
box-shadow: 0 18px 36px rgba(0,0,0,0.14);
display: grid;
gap: 0.6rem;
text-align: center;
}
.contact-cta input {
padding: 0.45rem;
border-radius: 999px;
border: 1px solid #e5e7eb;
font-size: 12px;
text-align: center;
color: #111827;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.contact-cta input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 2px rgba(99,102,241,0.25);
outline: none;
}
.contact-cta button {
padding: 0.45rem;
border-radius: 999px;
border: none;
background: linear-gradient(135deg, #6366f1, #22d3ee);
color: #ffffff;
font-size: 12px;
cursor: pointer;
transition: transform 150ms ease;
}
.contact-cta button:hover {
transform: translateY(-1px);
}
@media (prefers-color-scheme: dark) {
.contact-cta {
background: radial-gradient(circle at top, #1e1b4b, #020617);
color: #e5e7eb;
}
.contact-cta input {
background: #020617;
border-color: #374151;
color: #e5e7eb;
}
}Notes
- Single-action, conversion-focused layout
- Minimal friction for user outreach
- Ideal for SaaS demos and lead capture
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.