This contact form section HTML CSS tutorial shows you how to build a dark two-column layout with a large editorial heading on the left and a sticky form on the right. The heading uses the Fraunces serif font with mixed font weights so one word reads lighter than the rest.
The form fields use a minimal underline-only style that blends into the dark background, and the submit button is styled as a text link with a circular SVG arrow that turns lime green on hover.
Final output:
Let’s make
something
worth
remembering.
Step-by-step guide for Contact Form Section HTML CSS:
1. First, link the Instrument Sans and Fraunces fonts from Google Fonts in the head.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap"
rel="stylesheet">Let’s start with a section element with the class contact-section. Inside it, add a .contact-section-left and a .contact-section-right div.
<section class="contact-section">
<div class="contact-section-left"></div>
<div class="contact-section-right"></div>
</section>Then reset margins, set Instrument Sans as the font family, and give the section a near-black background with white text. Use a two-column grid so the heading and contact details sit on the left while the form stays on the right. Use clamp() on both the padding and the gap so they scale smoothly with the screen. On tablet and below, collapse to a single column.
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Instrument Sans", sans-serif;
}
.contact-section {
padding: clamp(3.5rem, calc(1rem + 7.78vw), 8rem) clamp(2.5rem, calc(1rem + 4.44vw), 5rem);
background-color: hsl(0, 0%, 4%);
color: hsl(0, 0%, 100%);
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: 2.5rem 4rem;
position: relative;
}
@media screen and (max-width: 992px) {
.contact-section {
grid-template-columns: 1fr;
}
}2. Fill in .contact-section-left with the heading and a .contact-details-wrapper div containing three .contact-detail divs.
<div class="contact-section-left">
<h2 class="contact-heading">Let's make <br>
<span>something</span><br>
worth<br>
remembering.
</h2>
<div class="contact-details-wrapper">
<div class="contact-detail">
<span>Email</span>
<a href="#">hello@studio.co</a>
</div>
<div class="contact-detail">
<span>Based in</span>
<span>New York, EST</span>
</div>
<div class="contact-detail">
<span>Response time</span>
<span>Within 48 hours</span>
</div>
</div>
</div>Output:
Let’s make
something
worth
remembering.
3. Style the heading with the Fraunces font at a very large size using clamp() so it scales with the screen. Set the line height property to 0.9 and a tight letter spacing to make the display text feel compact and editorial. The span inside gets a lighter font weight and a lower opacity so the word “something” reads as a softer contrast against the bold lines around it.
.contact-section .contact-heading {
font-family: "Fraunces", serif;
font-weight: 700;
font-size: clamp(2.5rem, calc(1rem + 6.67vw), 7rem);
line-height: .9;
letter-spacing: -0.03em;
color: hsl(42, 25%, 92%);
margin-bottom: 3.5rem;
}
.contact-section .contact-heading span {
font-weight: 300;
color: hsla(42, 25%, 92%, 0.6);
}Style each .contact-detail with some bottom margin to space them out. And style the label span with a small uppercase font in a muted gray, since it acts as a category tag above the value. Style the value and link with a larger font size and a warm cream color. Add a subtle underline on the email link with a slightly lighter underline color and a custom offset so it feels refined rather than the default browser underline.
.contact-section .contact-detail {
margin-bottom: 2rem;
}
.contact-section .contact-detail span:first-child {
font-size: .75rem;
line-height: 1.25;
letter-spacing: 1.8px;
text-transform: uppercase;
color: hsl(0, 0%, 33%);
margin-bottom: 0.375rem;
display: block;
}
.contact-section .contact-detail span:last-child,
.contact-section .contact-detail a {
font-size: 1.125rem;
line-height: 1.5;
color: hsl(42, 25%, 92%);
}
.contact-section .contact-detail a {
text-decoration: underline;
text-decoration-color: hsl(0, 0%, 25%);
text-underline-offset: 4px;
}Output:
Let’s make
something
worth
remembering.
4. Fill in .contact-section-right with the contact form. Each field goes inside a .form-field div with a label and an input or textarea. The submit button uses a Fraunces serif font and a circular arrow SVG icon rather than a regular button style, so it feels like a design element rather than a standard form button.
<div class="contact-section-right">
<div class="contact-form-wrapper">
<form action="" method="get" class="contact-form">
<div class="form-field">
<label for="name">Full name</label>
<input type="text" name="name" id="name" placeholder="Ada Lovelace" required />
</div>
<div class="form-field">
<label for="email">Email address</label>
<input type="email" name="email" id="email" placeholder="ada@example.com" required />
</div>
<div class="form-field">
<label for="message">What are you working on?</label>
<textarea name="message" rows="5" id="message" placeholder="Tell us about the project scope, timeline, ambitions." required></textarea>
</div>
<button type="submit">Send message
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="currentColor" />
<path d="M15 20H25M21 24L25 20L21 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</form>
</div>
</div>Set the position property to sticky and the top property to match the section’s top padding on .contact-section-right so the form stays in view as the user scrolls through the longer left column. Set the align self property to start so it doesn’t stretch to the full height of the grid row.
.contact-section .contact-section-right {
position: sticky;
top: clamp(3.5rem, calc(1rem + 7.78vw), 8rem);
align-self: start;
}Output:
Let’s make
something
worth
remembering.
5. Style each .form-field with some bottom margin to space the fields out. And style the label with the same small uppercase font as the contact detail labels on the left, so both sides feel visually consistent. Style the input and textarea with a transparent background and only a bottom border so they blend into the dark background. On focus, change the border color to the warm cream so the active field is clearly indicated.
.contact-section .form-field {
margin-bottom: 2.5rem;
}
.contact-section .form-field label {
font-size: .75rem;
line-height: 1.25;
letter-spacing: 1.8px;
text-transform: uppercase;
color: hsl(0, 0%, 33%);
display: block;
margin-bottom: 0.875rem;
}
.contact-section .form-field input,
.contact-section .form-field textarea {
width: 100%;
color: hsl(42, 25%, 92%);
background-color: transparent;
padding-bottom: 0.938rem;
border: none;
border-bottom: 1px solid hsl(0, 0%, 20%);
}
.contact-section .form-field input::placeholder,
.contact-section .form-field textarea::placeholder {
font-size: 1rem;
color: hsl(0, 0%, 25%);
}
.contact-section .form-field input:focus,
.contact-section .form-field textarea:focus {
box-shadow: none;
outline: none;
border-color: hsl(42, 25%, 92%);
}Output:
Let’s make
something
worth
remembering.
6. Style the submit button. Remove the default border and background so it reads as a text link with an icon rather than a standard button. Use the Fraunces font at a large size to match the editorial tone of the heading. Use flexbox with the align items property set to center to keep the text and circle arrow icon on the same line. On hover, change the color to a bright lime green, and since the SVG uses currentColor, the icon color updates automatically without needing a separate rule.
.contact-section .contact-form button {
background: transparent;
border: none;
color: hsl(42, 25%, 92%);
font-family: "Fraunces", serif;
font-weight: 700;
font-size: 1.5rem;
line-height: 1;
letter-spacing: -0.51px;
display: flex;
align-items: center;
gap: 1rem;
transition: color .3s;
cursor: pointer;
}
.contact-section .contact-form button svg {
color: hsl(0, 0%, 40%);
transition: color .3s;
}
.contact-section .contact-form button:hover {
color: hsl(79, 100%, 65%);
}
.contact-section .contact-form button:hover svg {
color: inherit;
}Output:
Let’s make
something
worth
remembering.
Final Output Code for Responsive Contact Form Section HTML CSS:
HTML
<section class="contact-section">
<div class="contact-section-left">
<h2 class="contact-heading">Let's make <br>
<span>something</span><br>
worth<br>
remembering.
</h2>
<div class="contact-details-wrapper">
<div class="contact-detail">
<span>Email</span>
<a href="#">hello@studio.co</a>
</div>
<div class="contact-detail">
<span>Based in</span>
<span>New York, EST</span>
</div>
<div class="contact-detail">
<span>Response time</span>
<span>Within 48 hours</span>
</div>
</div>
</div>
<div class="contact-section-right">
<div class="contact-form-wrapper">
<form action="" method="get" class="contact-form">
<div class="form-field">
<label for="name">Full name</label>
<input type="text" name="name" id="name" placeholder="Ada Lovelace" required />
</div>
<div class="form-field">
<label for="email">Email address</label>
<input type="email" name="email" id="email" placeholder="ada@example.com" required />
</div>
<div class="form-field">
<label for="message">What are you working on?</label>
<textarea name="message" rows="5" id="message"
placeholder="Tell us about the project scope, timeline, ambitions." required></textarea>
</div>
<button type="submit">Send message
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="currentColor" />
<path d="M15 20H25M21 24L25 20L21 16" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</form>
</div>
</div>
</section>CSS
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Instrument Sans", sans-serif;
}
.contact-section {
padding: clamp(3.5rem, calc(1rem + 7.78vw), 8rem) clamp(2.5rem, calc(1rem + 4.44vw), 5rem);
background-color: hsl(0, 0%, 4%);
color: hsl(0, 0%, 100%);
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: 2.5rem 4rem;
position: relative;
}
@media screen and (max-width: 992px) {
.contact-section {
grid-template-columns: 1fr;
}
}
.contact-section .contact-heading {
font-family: "Fraunces", serif;
font-weight: 700;
font-size: clamp(2.5rem, calc(1rem + 6.67vw), 7rem);
line-height: .9;
letter-spacing: -0.03em;
color: hsl(42, 25%, 92%);
margin-bottom: 3.5rem;
}
.contact-section .contact-heading span {
font-weight: 300;
color: hsla(42, 25%, 92%, 0.6);
}
.contact-section .contact-detail {
margin-bottom: 2rem;
}
.contact-section .contact-detail span:first-child {
font-size: .75rem;
line-height: 1.25;
letter-spacing: 1.8px;
text-transform: uppercase;
color: hsl(0, 0%, 33%);
margin-bottom: 0.375rem;
display: block;
}
.contact-section .contact-detail span:last-child,
.contact-section .contact-detail a {
font-size: 1.125rem;
line-height: 1.5;
color: hsl(42, 25%, 92%);
}
.contact-section .contact-detail a {
text-decoration: underline;
text-decoration-color: hsl(0, 0%, 25%);
text-underline-offset: 4px;
}
.contact-section .contact-section-right {
position: sticky;
top: clamp(3.5rem, calc(1rem + 7.78vw), 8rem);
align-self: start;
}
.contact-section .form-field {
margin-bottom: 2.5rem;
}
.contact-section .form-field label {
font-size: .75rem;
line-height: 1.25;
letter-spacing: 1.8px;
text-transform: uppercase;
color: hsl(0, 0%, 33%);
display: block;
margin-bottom: 0.875rem;
}
.contact-section .form-field input,
.contact-section .form-field textarea {
width: 100%;
color: hsl(42, 25%, 92%);
background-color: transparent;
padding-bottom: 0.938rem;
border: none;
border-bottom: 1px solid hsl(0, 0%, 20%);
}
.contact-section .form-field input::placeholder,
.contact-section .form-field textarea::placeholder {
font-size: 1rem;
color: hsl(0, 0%, 25%);
}
.contact-section .form-field input:focus,
.contact-section .form-field textarea:focus {
box-shadow: none;
outline: none;
border-color: hsl(42, 25%, 92%);
}
.contact-section .contact-form button {
background: transparent;
border: none;
color: hsl(42, 25%, 92%);
font-family: "Fraunces", serif;
font-weight: 700;
font-size: 1.5rem;
line-height: 1;
letter-spacing: -0.51px;
display: flex;
align-items: center;
gap: 1rem;
transition: color .3s;
cursor: pointer;
}
.contact-section .contact-form button svg {
color: hsl(0, 0%, 40%);
transition: color .3s;
}
.contact-section .contact-form button:hover {
color: hsl(79, 100%, 65%);
}
.contact-section .contact-form button:hover svg {
color: inherit;
}If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.
