React contact section components
A contact section has to take a message and still name a person. These blocks put the form, the inbox, and the phone number in the same band so the visitor is never left with a dead submit button.
Built with the stack you already ship
Contact form blocks you can copy
Each block is one file covering the intro, the form, and the human paths beside it. Preview it live, then copy the source into your project.
Contact Section With Help Form QuoteHelp contact section with a mint headline, stacked name email and message fields, a send pill, and a quote card with vendor mark, carousel arrows, and a client logo. Teal corner glow. Follows light and dark.
Contact Section With Dashed Grid FormDashed frame contact form with pill name and email fields, topic and team dropdowns, a desk portrait beside the message box, a docs link, and a yellow send action. Follows light and dark.
Contact Section With Split Support GridSplit contact section with Book a call and Send us a message as matched columns, plus Discord, docs, and X cards. Follows light and dark.
Contact Section With Three Column FormContact section with intro copy on the left, a centered underline form card, and stacked sales, office, and phone links. Follows light and dark.
Contact Section With Map PreviewVisit contact section with studio address and hours, a short note form, and a 2D map mockup with streets, a pin, and fake zoom chrome. Follows light and dark.
Surfaces that sit beside a contact form
FAQ and product proof from the same library, for the page that has already answered the objection and now has to take the message.
FAQ Section With Illustration AccordionSplit FAQ accordion with a question mark illustration, isolated question cards, chevron toggles, and a partner questions list. Follows light and dark.
FAQ Section With Split Headline AccordionLeft-aligned two-line headline over a hairline FAQ accordion. Plus rotates to a close mark and the answer unfolds in height. Follows light and dark.
FAQ Section With Photo Consult PanelCentered FAQ badge and heading over a blurred photo panel, with a consult card on the left and numbered question cards on the right. Follows light and dark.
FAQ Section With Numbered Support CardNumbered FAQ accordion with an inverted open row, a blue still have questions card, overlapping faces, and a talk to our team action. Follows light and dark.
FAQ Section With Dashed Grid PillsCentered FAQ accordion with a dashed layout grid, charcoal question pills, a portrait beside the open answer, and contact actions. Follows light and dark.
FAQ Section With Accordion Call CardSplit FAQ accordion with a sidebar book-a-call card, stacked question rows, plus and close icons, and a peach glow behind the answers. Follows light and dark.
How to choose a contact section
A contact section is not a second footer. By the time someone reaches it they have already seen the product. The job is to take a named message and leave a path to a person if the form is the wrong tool. If the only action is Submit, and Submit goes nowhere, the block is a brochure.
Contact Section With Three Column Form is for a page that wants the form as the object, not a thin strip under the footer. The left column holds the ask. The middle is a white card with underline fields for name, email, industry, subject, and a longer message. Headphones sit beside We're listening. Submit is a black pill. Sales, the office, and a phone number sit against the card.
Wire the form to a real endpoint before you ship. The demo prevents the default submit so the preview does not POST. Your handler, your spam rules, your confirmation. An empty onSubmit that only toasts Success is worse than a mailto on the right.
Keep the three human paths honest. Talk to sales belongs here only if that inbox is staffed. The Howard Street address is demo copy. The (555) number is a placeholder. Replace every href. A tel link that rings a disconnected line is worse than no Call us block.
The next section should be the footer, or a map if the office is a place people actually visit. Contact Section With Map Preview is a 2D street mockup with a pin, not a live maps embed. Keep Google Maps out of the file. A second form titled still have questions usually means the first list of fields was not edited.
The shipped demo uses rune.codes mailboxes and a Howard Street office. Replace the heading, the placeholders, the address, and the emails before this goes to production. Keep the underlines. Boxed inputs turn the card into a generic form, which is not why this layout exists.
