Koala UI

Contact

Contact and lead-capture sections that pair a marketing message with a way to reach you: a split lead capture over an interior photo, a channel list beside a form, a centered lede, and a department directory.

Variant 1

Variant 2

Pro

Variant 3

Pro

Variant 4

Pro

Built from#

Every variant leads with the SectionHeader lede and composes a block from the ContactForm family. Variant 1 floats the LeadForm as a card over a bleeding Hero photo; Variants 2 and 3 place the ContactForm card beside a channel list or under a centered lede; and Variant 4 swaps the form for a grid of Card tiles rendered as mailto links. Swap the copy, channels, and form for your own.

Responsive#

Every variant folds cleanly on a narrow frame: the splits (1, 2) stack to a single column, the centered form (3) keeps its lede and card intact, and the directory grid (4) steps from three columns to two to one. The forms' own name and email rows collapse to one column on narrow frames. Step any preview through Mobile, Tablet, and Desktop to confirm the rhythm holds and nothing overflows.

FAQ#

Variant 2 (the split with a channel list) is the safe default for a standalone contact page. Variant 3 (centered) is the leanest drop-in when you just need a form under a heading. Variant 1 (the photo split) suits a warmer, lifestyle brand. Variant 4 (the directory) fits when different messages should reach different teams, so people route themselves instead of filling one catch-all form.