Contact Components

Contact form and contact section wireframes with sensible field groupings, ready to duplicate into Figma, Framer, or Webflow.

Layout
Elements
Platform
Contact 017
Copy
Contact 017
1 May 2023
Contact 016
Copy
Contact 016
1 May 2023
Contact 015
Copy
Contact 015
1 May 2023
Contact 014
Copy
Contact 014
1 May 2023
Contact 013
Copy
Contact 013
1 May 2023
Contact 012
Copy
Contact 012
1 May 2023
Contact 011
Copy
Contact 011
1 May 2023
Contact 010
Copy
Contact 010
1 May 2023
Contact 009
Copy
Contact 009
1 May 2023
Contact 008
Copy
Contact 008
1 May 2023
Contact 007
Copy
Contact 007
1 May 2023
Contact 006
Copy
Contact 006
1 May 2023
Contact 005
Copy
Contact 005
1 May 2023
Contact 004
Copy
Contact 004
1 May 2023
Contact 003
Copy
Contact 003
1 May 2023
Contact 002
Copy
Contact 002
1 May 2023
Contact 001
Copy
Contact 001
1 May 2023

Contact section patterns that get replies

A contact section earns replies by removing friction: fewer form fields, a visible email address for people who hate forms, and a line about response time. Adding a map, an office photo, or a real person's name raises trust and completion rates more than any styling change.

Browse the contact wireframes above and copy any of them to Figma, Framer, or Webflow. The layouts cover split form-plus-details, centred minimal forms, and multi-office grids, each with sensible field groupings you can trim down to only what you actually need to ask.

One practical rule: every field you add costs submissions. Name, email, and message cover most sites. If sales needs more qualification, ask for it in the reply, not the form, and route support and sales to different inboxes so nothing sits unanswered.