Website: Style The Contact Form

19. Style The Contact Form

May our network grow and connect us.

Mentor Seraphina

Seraphina leans over your code with a grin and raises an eyebrow.
“So this is what it looks like in HTML. Completely unremarkable – so let’s turn it into something.” She snaps her fingers, and for a moment, you could swear the code shifted before your eyes. You’ve got the structure – now it needs style, rotation, and a touch of drama. Bring the cards to life.”

Your task

This container holds all input fields side by side or stacked.

You want the fields to wrap on smaller screens – so use a property that allows line breaks in a flex layout.

Each section (name, color, message, etc.) should have a minimum width of 18rem but also be able to grow.

Use a flex property that allows both a minimum size and flexibility.

This is the border around the form.

Add inner padding (–spacing-large)
Set a thin border in secondary color
Slightly round the corners (use –border-small)
Use the headline font you’ve already defined

This is the form title

Add a small inner padding (–spacing-small)
Use title font size (–font-size-title)
Set the color to the secondary color

Each field group (e.g. name + input, label + select) should be readable and well spaced.

Add small vertical margin on top and bottom
Use flex with a layout where one element is aligned left, the other right

When an input field is focused, the background should change to the highlight color.
This helps users see where they’re typing.

For input[type=”text”], input[type=”date”], textarea, and select, apply a unified style:

Use the –headline font
Font size: 1rem
Text color: –primary
Width: 55% (to leave room for the label)
Remove the border entirely
Add a bottom border only in secondary color
Don’t forget inner padding
Set background to transparent
Smooth transitions with transition: 0.3s

This field needs an additional full border in secondary color (unlike the others, which only have a bottom line)

textarea:focus, select:focus, input[type=”text”]:focus, input[type=”date”]:focus

Background changes to –highlight
Text color stays –primary
Remove the border completely (for a more modern look)

Browsers show a default blue focus ring – but you don’t want that.

Use the appropriate property to remove the outline when the field is focused.

This section holds the button.

Center the content using a suitable flex alignment
Add a large margin on top (–spacing-large) so the button doesn’t stick to the last input field

Solve the task here in the console [–> Open in a new tab]

CSS

.contact-container {
   flex-wrap: wrap;
}

.contact-container>div {
   flex: 1 1 18rem;
}

fieldset {
   padding: var(--spacing-large);
   border: 1px solid var(--secondary);
   border-radius: var(--border-small);
   font-family: var(--headline);
}

legend {
   padding: var(--spacing-small);
   font-size: var(--font-size-title);
   color: var(--secondary);
}

fieldset>div {
   margin: var(--spacing-small) 0;
   display: flex;
   justify-content: space-between;
}

input:focus {
   background-color: var(--highlight);
}

input[type="text"],
input[type="date"],
textarea,
select {
   font-family: var(--headline);
   font-size: 1rem;
   color: var(--primary);
   width: 55%;
   border: none;
   border-bottom: 1px solid var(--secondary);
   padding: var(--spacing-small);
   background-color: transparent;
   transition: 0.3s;
}

textarea {
   border: 1px solid var(--secondary);
}

textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="date"]:focus {
   background-color: var(--highlight);
   color: var(--primary);
   border: none;
}

input,
textarea {
   outline: none;
}

.submit {
   justify-content: center;
   margin-top: var(--spacing-large);
}