Form With Map Mockup

About this block

Form With Map Mockup pairs a contact form with a sense of place. The left column is a heading, a follow the sun line, and a compact form built from the ui primitives. The right column is a bordered panel holding an abstract map: a fine grid of muted dots with three primary pins haloed and labeled by city, closed by a caption describing the support handoff. No map tiles, no geography assets, the dot field just reads as world.

The pins are one array of city and percentage position, so moving offices is a coordinate edit. The dot grid is generated markup and the halo is a tinted ring, everything inverts with the theme. The map is decorative by design, the caption carries the actual claim.

When to use

Reach for this block when global coverage is the reason to write in, international support, distributed teams, or any product sold across time zones. The map answers will anyone be awake without a single timetable, where offices-grid answers it with hours. Use contact-split-form when geography is not part of the pitch, the dots earn their space only when the caption is true.

A natural flow around it on a Marketing Pro page:

Before

• Stats with the countries and coverage numbers the map dramatizes

After

• Offices grid for visitors who need the actual addresses
• Footers closing the page

What you can display

One strong use is follow the sun support behind a general contact form. Other maps:

• Data regions. Pins on cloud regions with the caption naming residency options.
• Customer spread. Pins on representative customer cities for a social proof flavored contact page.
• Event tour. Pins on upcoming tour stops with the form capturing city requests.

Tip: keep three to five pins, a sparse map with named cities reads as honest while a peppered one reads as decoration.