Split Contact Forms
Contact forms split with maps, images, or text.
Split Contact — Form Left, Info Right
Get in touch
Let's build something great together
Fill out the form and our team will get back to you within 24 hours.
Contact information
Prefer to reach out directly? Here's how to find us.
Email
[email protected]
Phone
+1 (555) 123-4567
Office
548 Market St, San Francisco, CA 94104
Hours
Mon–Fri, 9am–6pm PT
<div class="uk-contact-split">
<!-- Left: Form -->
<div class="uk-contact-form-col">
<div class="uk-contact-form-header">
<span class="uk-contact-eyebrow">Get in touch</span>
<h1 class="uk-contact-title">Let's build something great together</h1>
<p class="uk-contact-subtitle">Fill out the form and our team will get back to you within 24 hours.</p>
</div>
<form class="uk-contact-form">
<div class="uk-contact-row">
<div class="uk-contact-field">
<label class="uk-contact-label">First name</label>
<input type="text" class="uk-contact-input" placeholder="Jane">
</div>
<div class="uk-contact-field">
<label class="uk-contact-label">Last name</label>
<input type="text" class="uk-contact-input" placeholder="Cooper">
</div>
</div>
<div class="uk-contact-field">
<label class="uk-contact-label">Work email</label>
<input type="email" class="uk-contact-input" placeholder="[email protected]">
</div>
<div class="uk-contact-field">
<label class="uk-contact-label">Company</label>
<input type="text" class="uk-contact-input" placeholder="Acme Inc.">
</div>
<div class="uk-contact-field">
<label class="uk-contact-label">How can we help?</label>
<textarea class="uk-contact-textarea" rows="4" placeholder="Tell us about your project..."></textarea>
</div>
<button type="submit" class="uk-contact-submit">
Send message <i class="fas fa-paper-plane"></i>
</button>
</form>
</div>
<!-- Right: Info panel -->
<div class="uk-contact-info">
<div class="uk-contact-info-inner">
<h2 class="uk-contact-info-title">Contact information</h2>
<p class="uk-contact-info-desc">Prefer to reach out directly? Here's how to find us.</p>
<div class="uk-contact-info-list">
<div class="uk-contact-info-item">
<div class="uk-contact-info-icon"><i class="fas fa-envelope"></i></div>
<div>
<div class="uk-contact-info-label">Email</div>
<a href="mailto:[email protected]" class="uk-contact-info-value">[email protected]</a>
</div>
</div>
<div class="uk-contact-info-item">
<div class="uk-contact-info-icon"><i class="fas fa-phone"></i></div>
<div>
<div class="uk-contact-info-label">Phone</div>
<a href="tel:+15551234567" class="uk-contact-info-value">+1 (555) 123-4567</a>
</div>
</div>
<div class="uk-contact-info-item">
<div class="uk-contact-info-icon"><i class="fas fa-location-dot"></i></div>
<div>
<div class="uk-contact-info-label">Office</div>
<div class="uk-contact-info-value">548 Market St, San Francisco, CA 94104</div>
</div>
</div>
<div class="uk-contact-info-item">
<div class="uk-contact-info-icon"><i class="fas fa-clock"></i></div>
<div>
<div class="uk-contact-info-label">Hours</div>
<div class="uk-contact-info-value">Mon–Fri, 9am–6pm PT</div>
</div>
</div>
</div>
<div class="uk-contact-socials">
<a href="#" class="uk-contact-social"><i class="fab fa-twitter"></i></a>
<a href="#" class="uk-contact-social"><i class="fab fa-github"></i></a>
<a href="#" class="uk-contact-social"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</div>
<style>
.uk-contact-split {
display: grid;
grid-template-columns: 1.3fr 1fr;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
overflow: hidden;
text-align: left;
}
/* Form column */
.uk-contact-form-col {
padding: 3rem 2.5rem;
}
.uk-contact-form-header {
margin-bottom: 2rem;
}
.uk-contact-eyebrow {
display: inline-block;
font-size: 0.72rem;
font-weight: 800;
color: #1e3a8a;
background: #eff6ff;
padding: 0.35rem 0.85rem;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 1rem;
}
.uk-contact-title {
font-size: 1.85rem;
font-weight: 900;
line-height: 1.2;
color: #0b1b2f;
margin-bottom: 0.75rem;
letter-spacing: -0.02em;
}
.uk-contact-subtitle {
font-size: 0.9rem;
line-height: 1.6;
color: #64748b;
margin: 0;
}
.uk-contact-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.uk-contact-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.uk-contact-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.uk-contact-label {
font-size: 0.78rem;
font-weight: 700;
color: #334155;
}
.uk-contact-input,
.uk-contact-textarea {
width: 100%;
padding: 0.7rem 0.9rem;
border: 1.5px solid #e2e8f0;
border-radius: 0.55rem;
font-size: 0.875rem;
color: #0b1b2f;
background: #fff;
outline: none;
transition: all 0.15s;
font-family: inherit;
box-sizing: border-box;
}
.uk-contact-input::placeholder,
.uk-contact-textarea::placeholder {
color: #cbd5e1;
}
.uk-contact-input:focus,
.uk-contact-textarea:focus {
border-color: #1e3a8a;
box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
}
.uk-contact-textarea {
resize: vertical;
min-height: 110px;
}
.uk-contact-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
color: #fff;
border: none;
border-radius: 0.55rem;
padding: 0.85rem 1.25rem;
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
box-shadow: 0 4px 14px rgba(30,58,138,0.25);
margin-top: 0.5rem;
}
.uk-contact-submit:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(30,58,138,0.35);
}
.uk-contact-submit i {
font-size: 0.8rem;
}
/* Info column */
.uk-contact-info {
background: linear-gradient(145deg, #0b1b2f 0%, #1e3a8a 100%);
color: #fff;
position: relative;
overflow: hidden;
}
.uk-contact-info::before {
content: '';
position: absolute;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(96,165,250,0.25) 0%, transparent 70%);
top: -100px;
right: -100px;
}
.uk-contact-info-inner {
position: relative;
z-index: 1;
padding: 3rem 2.25rem;
height: 100%;
display: flex;
flex-direction: column;
}
.uk-contact-info-title {
font-size: 1.35rem;
font-weight: 800;
margin-bottom: 0.5rem;
color: #fff;
}
.uk-contact-info-desc {
font-size: 0.85rem;
line-height: 1.6;
color: #94a3b8;
margin-bottom: 2rem;
}
.uk-contact-info-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 2rem;
}
.uk-contact-info-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.uk-contact-info-icon {
width: 40px;
height: 40px;
border-radius: 0.6rem;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15);
display: flex;
align-items: center;
justify-content: center;
color: #93c5fd;
font-size: 0.9rem;
flex-shrink: 0;
}
.uk-contact-info-label {
font-size: 0.7rem;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.2rem;
}
.uk-contact-info-value {
font-size: 0.85rem;
color: #e2e8f0;
text-decoration: none;
transition: color 0.15s;
line-height: 1.4;
}
a.uk-contact-info-value:hover {
color: #fff;
}
.uk-contact-socials {
display: flex;
gap: 0.5rem;
margin-top: auto;
padding-top: 1.5rem;
border-top: 1px solid rgba(255,255,255,0.1);
}
.uk-contact-social {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.08);
color: #cbd5e1;
font-size: 0.85rem;
text-decoration: none;
transition: all 0.15s;
}
.uk-contact-social:hover {
background: #1e3a8a;
color: #fff;
transform: translateY(-2px);
}
@media (max-width: 860px) {
.uk-contact-split { grid-template-columns: 1fr; }
.uk-contact-form-col { padding: 2.5rem 1.5rem; }
.uk-contact-info-inner { padding: 2.5rem 1.5rem; }
}
@media (max-width: 480px) {
.uk-contact-row { grid-template-columns: 1fr; }
.uk-contact-title { font-size: 1.5rem; }
}
</style>
Split Contact — Info Left, Form Right
Contact
We'd love to hear from you
Whether you have a question about features, pricing, or anything else — our team is ready to answer.
<div class="uk-contact-split-reverse">
<!-- Left: Info -->
<div class="uk-contact-info-light">
<div class="uk-contact-info-light-inner">
<span class="uk-contact-eyebrow">Contact</span>
<h1 class="uk-contact-title">We'd love to hear from you</h1>
<p class="uk-contact-subtitle">Whether you have a question about features, pricing...</p>
<div class="uk-contact-cards">
<div class="uk-contact-card">
<div class="uk-contact-card-icon uk-contact-card-icon-blue"><i class="fas fa-headset"></i></div>
<div>
<div class="uk-contact-card-title">Sales</div>
<a href="mailto:[email protected]" class="uk-contact-card-link">[email protected]</a>
</div>
</div>
<div class="uk-contact-card">
<div class="uk-contact-card-icon uk-contact-card-icon-purple"><i class="fas fa-life-ring"></i></div>
<div>
<div class="uk-contact-card-title">Support</div>
<a href="mailto:[email protected]" class="uk-contact-card-link">[email protected]</a>
</div>
</div>
<div class="uk-contact-card">
<div class="uk-contact-card-icon uk-contact-card-icon-green"><i class="fas fa-briefcase"></i></div>
<div>
<div class="uk-contact-card-title">Careers</div>
<a href="mailto:[email protected]" class="uk-contact-card-link">[email protected]</a>
</div>
</div>
</div>
<div class="uk-contact-light-footer">
<i class="fas fa-clock"></i> Average response time: <strong>under 4 hours</strong>
</div>
</div>
</div>
<!-- Right: Form -->
<div class="uk-contact-form-col">
<form class="uk-contact-form">
<div class="uk-contact-field">
<label class="uk-contact-label">Full name</label>
<input type="text" class="uk-contact-input" placeholder="Jane Cooper">
</div>
<div class="uk-contact-field">
<label class="uk-contact-label">Email address</label>
<input type="email" class="uk-contact-input" placeholder="[email protected]">
</div>
<div class="uk-contact-field">
<label class="uk-contact-label">Subject</label>
<select class="uk-contact-input">
<option>General inquiry</option>
<option>Sales question</option>
<option>Technical support</option>
<option>Partnership</option>
</select>
</div>
<div class="uk-contact-field">
<label class="uk-contact-label">Message</label>
<textarea class="uk-contact-textarea" rows="5" placeholder="How can we help you?"></textarea>
</div>
<div class="uk-contact-checkbox-row">
<label class="uk-contact-checkbox">
<input type="checkbox"> <span>Send me product updates and news</span>
</label>
</div>
<button type="submit" class="uk-contact-submit">
Send message <i class="fas fa-arrow-right"></i>
</button>
</form>
</div>
</div>
<style>
.uk-contact-split-reverse {
display: grid;
grid-template-columns: 1fr 1.2fr;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
overflow: hidden;
text-align: left;
}
.uk-contact-info-light {
background: linear-gradient(160deg, #f8fafc 0%, #eef2ff 100%);
border-right: 1px solid #e2e8f0;
}
.uk-contact-info-light-inner {
padding: 3rem 2.5rem;
height: 100%;
display: flex;
flex-direction: column;
}
.uk-contact-eyebrow {
display: inline-block;
font-size: 0.72rem;
font-weight: 800;
color: #1e3a8a;
background: #fff;
padding: 0.35rem 0.85rem;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 1rem;
border: 1px solid #dbeafe;
}
.uk-contact-title {
font-size: 1.75rem;
font-weight: 900;
line-height: 1.2;
color: #0b1b2f;
margin-bottom: 0.75rem;
letter-spacing: -0.02em;
}
.uk-contact-subtitle {
font-size: 0.9rem;
line-height: 1.6;
color: #64748b;
margin-bottom: 2rem;
}
.uk-contact-cards {
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-bottom: 2rem;
}
.uk-contact-card {
display: flex;
align-items: center;
gap: 0.9rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.7rem;
padding: 0.85rem 1rem;
transition: all 0.15s;
}
.uk-contact-card:hover {
border-color: #cbd5e1;
transform: translateX(2px);
}
.uk-contact-card-icon {
width: 40px;
height: 40px;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
flex-shrink: 0;
}
.uk-contact-card-icon-blue {
background: #eff6ff;
color: #1e3a8a;
}
.uk-contact-card-icon-purple {
background: #f5f3ff;
color: #6d28d9;
}
.uk-contact-card-icon-green {
background: #ecfdf5;
color: #16a34a;
}
.uk-contact-card-title {
font-size: 0.78rem;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.15rem;
}
.uk-contact-card-link {
font-size: 0.85rem;
font-weight: 600;
color: #0b1b2f;
text-decoration: none;
transition: color 0.15s;
}
.uk-contact-card-link:hover { color: #1e3a8a; }
.uk-contact-light-footer {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.55rem;
padding: 0.6rem 0.9rem;
font-size: 0.78rem;
color: #64748b;
margin-top: auto;
}
.uk-contact-light-footer i { color: #16a34a; font-size: 0.8rem; }
.uk-contact-light-footer strong { color: #0b1b2f; }
/* Form */
.uk-contact-form-col { padding: 3rem 2.5rem; }
.uk-contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.uk-contact-field { display: flex; flex-direction: column; gap: 0.4rem; }
.uk-contact-label {
font-size: 0.78rem;
font-weight: 700;
color: #334155;
}
.uk-contact-input,
.uk-contact-textarea {
width: 100%;
padding: 0.7rem 0.9rem;
border: 1.5px solid #e2e8f0;
border-radius: 0.55rem;
font-size: 0.875rem;
color: #0b1b2f;
background: #fff;
outline: none;
transition: all 0.15s;
font-family: inherit;
box-sizing: border-box;
}
.uk-contact-input::placeholder,
.uk-contact-textarea::placeholder { color: #cbd5e1; }
.uk-contact-input:focus,
.uk-contact-textarea:focus {
border-color: #1e3a8a;
box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
}
.uk-contact-textarea { resize: vertical; min-height: 120px; }
.uk-contact-checkbox-row { display: flex; align-items: center; }
.uk-contact-checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
color: #64748b;
cursor: pointer;
user-select: none;
}
.uk-contact-checkbox input {
width: 16px; height: 16px;
accent-color: #1e3a8a;
cursor: pointer;
}
.uk-contact-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
color: #fff;
border: none;
border-radius: 0.55rem;
padding: 0.85rem 1.25rem;
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
box-shadow: 0 4px 14px rgba(30,58,138,0.25);
}
.uk-contact-submit:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(30,58,138,0.35);
}
.uk-contact-submit i {
font-size: 0.75rem;
transition: transform 0.15s;
}
.uk-contact-submit:hover i { transform: translateX(3px); }
@media (max-width: 860px) {
.uk-contact-split-reverse { grid-template-columns: 1fr; }
.uk-contact-info-light-inner,
.uk-contact-form-col { padding: 2.5rem 1.5rem; }
.uk-contact-info-light { border-right: none; border-bottom: 1px solid #e2e8f0; }
}
</style>
Split Contact — Form + Map
Visit us
Come say hello at our HQ
We're located in the heart of San Francisco. Drop by or send us a message.
Nexus HQ
548 Market Street, Suite 400
San Francisco, CA 94104
San Francisco, CA 94104
<div class="uk-contact-map-split">
<!-- Form -->
<div class="uk-contact-map-form">
<div class="uk-contact-form-header">
<span class="uk-contact-eyebrow">Visit us</span>
<h1 class="uk-contact-title">Come say hello at our HQ</h1>
<p class="uk-contact-subtitle">We're located in the heart of San Francisco...</p>
</div>
<div class="uk-contact-address-box">
<div class="uk-contact-address-icon"><i class="fas fa-location-dot"></i></div>
<div>
<div class="uk-contact-address-title">Nexus HQ</div>
<div class="uk-contact-address-text">548 Market Street, Suite 400<br>San Francisco, CA 94104</div>
</div>
</div>
<form class="uk-contact-form">
<div class="uk-contact-field">
<label class="uk-contact-label">Your name</label>
<input type="text" class="uk-contact-input" placeholder="Jane Cooper">
</div>
<div class="uk-contact-field">
<label class="uk-contact-label">Email address</label>
<input type="email" class="uk-contact-input" placeholder="[email protected]">
</div>
<div class="uk-contact-field">
<label class="uk-contact-label">Message</label>
<textarea class="uk-contact-textarea" rows="4" placeholder="Tell us what's on your mind..."></textarea>
</div>
<button type="submit" class="uk-contact-submit">
Send message <i class="fas fa-paper-plane"></i>
</button>
</form>
</div>
<!-- Map -->
<div class="uk-contact-map">
<iframe src="https://www.openstreetmap.org/export/embed.html?bbox=-122.4194%2C37.7749%2C-122.4094%2C37.7849&layer=mapnik&marker=37.7799%2C-122.4144"
style="border:0;width:100%;height:100%;" loading="lazy" title="Nexus HQ location"></iframe>
<div class="uk-contact-map-overlay">
<div class="uk-contact-map-card">
<div class="uk-contact-map-card-icon"><i class="fas fa-location-dot"></i></div>
<div class="uk-contact-map-card-body">
<div class="uk-contact-map-card-title">Nexus HQ</div>
<div class="uk-contact-map-card-desc">548 Market St, San Francisco</div>
</div>
<a href="#" class="uk-contact-map-card-btn" aria-label="Get directions"><i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
<style>
.uk-contact-map-split {
display: grid;
grid-template-columns: 1fr 1fr;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
overflow: hidden;
text-align: left;
min-height: 620px;
}
.uk-contact-map-form {
padding: 3rem 2.5rem;
display: flex;
flex-direction: column;
}
.uk-contact-form-header { margin-bottom: 1.5rem; }
.uk-contact-eyebrow {
display: inline-block;
font-size: 0.72rem;
font-weight: 800;
color: #1e3a8a;
background: #eff6ff;
padding: 0.35rem 0.85rem;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 1rem;
}
.uk-contact-title {
font-size: 1.75rem;
font-weight: 900;
line-height: 1.2;
color: #0b1b2f;
margin-bottom: 0.75rem;
letter-spacing: -0.02em;
}
.uk-contact-subtitle {
font-size: 0.9rem;
line-height: 1.6;
color: #64748b;
margin: 0;
}
.uk-contact-address-box {
display: flex;
gap: 0.85rem;
align-items: flex-start;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.7rem;
padding: 0.9rem 1rem;
margin-bottom: 1.5rem;
}
.uk-contact-address-icon {
width: 36px;
height: 36px;
border-radius: 0.5rem;
background: #fff;
color: #1e3a8a;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
flex-shrink: 0;
border: 1px solid #e2e8f0;
}
.uk-contact-address-title {
font-size: 0.8rem;
font-weight: 800;
color: #0b1b2f;
margin-bottom: 0.15rem;
}
.uk-contact-address-text {
font-size: 0.8rem;
color: #64748b;
line-height: 1.5;
}
.uk-contact-form { display: flex; flex-direction: column; gap: 1rem; }
.uk-contact-field { display: flex; flex-direction: column; gap: 0.4rem; }
.uk-contact-label {
font-size: 0.78rem;
font-weight: 700;
color: #334155;
}
.uk-contact-input,
.uk-contact-textarea {
width: 100%;
padding: 0.7rem 0.9rem;
border: 1.5px solid #e2e8f0;
border-radius: 0.55rem;
font-size: 0.875rem;
color: #0b1b2f;
background: #fff;
outline: none;
transition: all 0.15s;
font-family: inherit;
box-sizing: border-box;
}
.uk-contact-input::placeholder,
.uk-contact-textarea::placeholder { color: #cbd5e1; }
.uk-contact-input:focus,
.uk-contact-textarea:focus {
border-color: #1e3a8a;
box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
}
.uk-contact-textarea { resize: vertical; min-height: 110px; }
.uk-contact-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
color: #fff;
border: none;
border-radius: 0.55rem;
padding: 0.85rem 1.25rem;
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
box-shadow: 0 4px 14px rgba(30,58,138,0.25);
margin-top: 0.25rem;
}
.uk-contact-submit:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(30,58,138,0.35);
}
.uk-contact-submit i { font-size: 0.8rem; }
/* Map */
.uk-contact-map {
position: relative;
background: #e2e8f0;
min-height: 400px;
}
.uk-contact-map iframe {
display: block;
width: 100%;
height: 100%;
filter: saturate(0.85);
}
.uk-contact-map-overlay {
position: absolute;
bottom: 1.5rem;
left: 1.5rem;
right: 1.5rem;
pointer-events: none;
}
.uk-contact-map-card {
background: #fff;
border-radius: 0.75rem;
padding: 1rem;
display: flex;
align-items: center;
gap: 0.85rem;
box-shadow: 0 12px 32px rgba(30,58,138,0.18);
pointer-events: auto;
}
.uk-contact-map-card-icon {
width: 40px;
height: 40px;
border-radius: 0.5rem;
background: #eff6ff;
color: #1e3a8a;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
flex-shrink: 0;
}
.uk-contact-map-card-body { flex: 1; }
.uk-contact-map-card-title {
font-size: 0.85rem;
font-weight: 800;
color: #0b1b2f;
margin-bottom: 0.1rem;
}
.uk-contact-map-card-desc {
font-size: 0.75rem;
color: #64748b;
}
.uk-contact-map-card-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: #1e3a8a;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
text-decoration: none;
transition: all 0.15s;
flex-shrink: 0;
}
.uk-contact-map-card-btn:hover {
background: #1d4ed8;
transform: translateX(2px);
}
@media (max-width: 860px) {
.uk-contact-map-split { grid-template-columns: 1fr; }
.uk-contact-map-form { padding: 2.5rem 1.5rem; }
.uk-contact-map { min-height: 320px; }
.uk-contact-map-overlay { bottom: 1rem; left: 1rem; right: 1rem; }
}
</style>
Compact Split Contact
Need help?
We're here.
Our team typically responds in under 4 business hours. Send us a message and we'll be in touch.
<div class="uk-contact-compact">
<div class="uk-contact-compact-info">
<div class="uk-contact-compact-badge"><i class="fas fa-headset"></i></div>
<h2 class="uk-contact-compact-title">Need help?<br>We're here.</h2>
<p class="uk-contact-compact-desc">Our team typically responds in under 4 business hours...</p>
<div class="uk-contact-compact-links">
<a href="mailto:[email protected]" class="uk-contact-compact-link">
<i class="fas fa-envelope"></i> [email protected]
</a>
<a href="tel:+15551234567" class="uk-contact-compact-link">
<i class="fas fa-phone"></i> +1 (555) 123-4567
</a>
</div>
</div>
<div class="uk-contact-compact-form-wrap">
<form class="uk-contact-form">
<div class="uk-contact-row">
<div class="uk-contact-field">
<label class="uk-contact-label">Name</label>
<input type="text" class="uk-contact-input" placeholder="Jane Cooper">
</div>
<div class="uk-contact-field">
<label class="uk-contact-label">Email</label>
<input type="email" class="uk-contact-input" placeholder="[email protected]">
</div>
</div>
<div class="uk-contact-field">
<label class="uk-contact-label">Message</label>
<textarea class="uk-contact-textarea" rows="4" placeholder="How can we help?"></textarea>
</div>
<button type="submit" class="uk-contact-submit">
Send message <i class="fas fa-paper-plane"></i>
</button>
</form>
</div>
</div>
<style>
.uk-contact-compact {
display: grid;
grid-template-columns: 1fr 1.4fr;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
overflow: hidden;
text-align: left;
}
.uk-contact-compact-info {
background: linear-gradient(145deg, #0b1b2f 0%, #1e3a8a 100%);
color: #fff;
padding: 2.5rem 2rem;
display: flex;
flex-direction: column;
}
.uk-contact-compact-badge {
width: 48px;
height: 48px;
border-radius: 0.75rem;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: #93c5fd;
margin-bottom: 1.5rem;
}
.uk-contact-compact-title {
font-size: 1.6rem;
font-weight: 900;
line-height: 1.15;
margin-bottom: 0.75rem;
color: #fff;
letter-spacing: -0.02em;
}
.uk-contact-compact-desc {
font-size: 0.85rem;
line-height: 1.6;
color: #94a3b8;
margin-bottom: 2rem;
}
.uk-contact-compact-links {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: auto;
}
.uk-contact-compact-link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.85rem;
font-weight: 600;
color: #e2e8f0;
text-decoration: none;
transition: color 0.15s;
}
.uk-contact-compact-link:hover { color: #fff; }
.uk-contact-compact-link i {
width: 28px;
height: 28px;
border-radius: 0.4rem;
background: rgba(255,255,255,0.1);
color: #93c5fd;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
}
.uk-contact-compact-form-wrap {
padding: 2.5rem 2rem;
}
.uk-contact-form { display: flex; flex-direction: column; gap: 1rem; }
.uk-contact-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
}
.uk-contact-field { display: flex; flex-direction: column; gap: 0.4rem; }
.uk-contact-label {
font-size: 0.78rem;
font-weight: 700;
color: #334155;
}
.uk-contact-input,
.uk-contact-textarea {
width: 100%;
padding: 0.7rem 0.9rem;
border: 1.5px solid #e2e8f0;
border-radius: 0.55rem;
font-size: 0.875rem;
color: #0b1b2f;
background: #fff;
outline: none;
transition: all 0.15s;
font-family: inherit;
box-sizing: border-box;
}
.uk-contact-input::placeholder,
.uk-contact-textarea::placeholder { color: #cbd5e1; }
.uk-contact-input:focus,
.uk-contact-textarea:focus {
border-color: #1e3a8a;
box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
}
.uk-contact-textarea { resize: vertical; min-height: 110px; }
.uk-contact-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
color: #fff;
border: none;
border-radius: 0.55rem;
padding: 0.8rem 1.25rem;
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
box-shadow: 0 4px 14px rgba(30,58,138,0.25);
margin-top: 0.25rem;
}
.uk-contact-submit:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(30,58,138,0.35);
}
.uk-contact-submit i { font-size: 0.8rem; }
@media (max-width: 860px) {
.uk-contact-compact { grid-template-columns: 1fr; }
.uk-contact-compact-info { padding: 2rem 1.5rem; }
.uk-contact-compact-form-wrap { padding: 2rem 1.5rem; }
}
@media (max-width: 480px) {
.uk-contact-row { grid-template-columns: 1fr; }
.uk-contact-compact-title { font-size: 1.35rem; }
}
</style>