Contact Form Grid With Details
A two-column contact section with a 3D tilted world map on the left and a full contact form on the right. Includes animated location pins and a subtle grid background.
Contact us
We are always looking for ways to improve our products and services. Contact us and let us know how we can help you.
The left column displays a mail icon in a styled container, heading, description, and contact details (email, phone, support email). Below that, a world map SVG renders with CSS perspective transform at 45 degrees, creating a tilted 3D effect. An animated Pin component marks a location on the map.
The right column contains the contact form with a dotted grid background pattern. Form fields include name, email, company, budget dropdown, and message textarea. Each input uses focus ring styling and the form has a gradient background from gray-100 to gray-200 in light mode.
The grid pattern is generated using a reusable Grid component that creates an SVG with circular dots. The component accepts a size prop to control dot spacing.
Useful for SaaS companies, consulting firms, agencies, and any business with a global presence that wants to communicate geographic reach.
More from Contact Sections
Included with All-Access
One payment unlocks the code for this block and every other block, template and page.
Get All-AccessExplore more
About this block
The left column displays a mail icon in a styled container, heading, description, and contact details (email, phone, support email). Below that, a world map SVG renders with CSS perspective transform at 45 degrees, creating a tilted 3D effect. An animated Pin component marks a location on the map.
The right column contains the contact form with a dotted grid background pattern. Form fields include name, email, company, budget dropdown, and message textarea. Each input uses focus ring styling and the form has a gradient background from gray-100 to gray-200 in light mode.
The grid pattern is generated using a reusable Grid component that creates an SVG with circular dots. The component accepts a size prop to control dot spacing.
Useful for SaaS companies, consulting firms, agencies, and any business with a global presence that wants to communicate geographic reach.