Bold Fitness Contact Layout for Divi 5 — Gym & Coaching Intro Form

Contact Fitness Bold

High-impact Divi 5 contact section for gyms, personal trainers, and fitness studios. Dark UI, orange accents, intro-session form, and click-to-call info cards.

Rate this element

Be the first to rate

Download this section — free

Divi 5 JSON — import in seconds
Commercial license included
No account needed

Click to view the full page

Overview

The layout opens with a single 960px-wide row centered on a jet-black canvas (#0a0a0a) with 120px of vertical breathing room. An orange eyebrow — BUILT IN CHICAGO SINCE 2014 in Outfit 700 at 14px with 4px letter-spacing — pins the brand's story before the H2 lands. The headline runs 64px on desktop, scaling to 46px on tablet and 36px on phone, so Ready to push your limits? stays punchy across viewports without wrapping awkwardly. Below it, a 720px-max supporting paragraph in muted grey (#b3b3b3) sets expectations for the 24-hour reply promise.

The middle row is a three-up grid of contact cards, capped at 1200px total width with 24px gaps between them. Every card sits on a slightly-lifted #141414 surface with a 16px radius, a 1px translucent white border, and a preset box-shadow that shifts to an orange glow on hover — the border itself transitions to 50%-opacity #ff4d00 at the same time. Cards are organised as label → primary detail → context line (EMAIL / CALL THE GYM / WALK IN), giving prospects three distinct paths to reach out at a glance. On phone, the row switches to flexDirection: column and the cards stack full-width.

The final row is the heavy-hitter: a dark card (#141414, 24px radius, 56px inline padding, dropped to 32px on tablet) that hosts the Divi contact form. Above the form, an H3 at 34px (26px on phone) and a 640px paragraph frame the free 45-minute intro session, no sales pitch promise. The form itself uses five fields — Name, Email, Phone, and Goal arranged two-per-row, plus a full-width Message textarea — with dark #1e1e1e inputs, translucent borders that flip to orange on hover, and a pill-shaped (999px radius) uppercase submit button in the accent orange with a matching orange glow shadow that inverts to white on hover.

What’s inside

Centered intro row: orange eyebrow tag, responsive H2 (64 / 46 / 36px across breakpoints), and a 720px-capped supporting paragraph in Outfit
Three-column contact info grid (EMAIL / CALL THE GYM / WALK IN) with 16px rounded dark cards, translucent borders, and hover states that shift border + shadow to orange
Native Divi contact form module with five fields — Name, Email, Phone, and Goal on a two-column grid, plus a full-width Message textarea
Enclosed 960px form panel with 24px rounded corners, a lifted `#141414` surface, and a 34px H3 that scales to 26px on phone
Pill-shaped submit button (999px radius) in accent orange with a soft orange glow, hover state that inverts background to white
Dark `#1e1e1e` form inputs with translucent 1px borders that switch to accent orange on hover for clear focus affordance
Preconfigured receiver email on the Divi contact form — a single field swap redirects submissions to your inbox
Full mobile stacking via `flexDirection: column` on phones — info cards and form field pairs collapse cleanly to single-column

Who it’s for

Independent gyms, CrossFit boxes, and personal trainers who want a come-see-the-space contact page that matches a bold, gritty brand. The pattern also fits martial arts and boxing studios, cycling and rowing studios, athletic performance labs, physical therapy and sports rehab clinics, and one-to-one coaches selling assessments, intro sessions, or programming reviews. The three-card top row lets multi-location businesses swap the WALK IN card for a second address, and the free intro session framing works for any service-based fitness brand where a free consult is the natural first step. If your brand leans light, minimal, or wellness-spa, the black-and-orange palette will fight you — pick something else or plan for a full palette rework.

Customization tips

Change the accent by swapping the shade of orange (#ff4d00 appears on the eyebrow, hover borders, button, and glow) — a single find-and-replace in the section keeps the whole layout coherent. The dark surface uses two layers, #0a0a0a for the section and #141414 for the cards and form panel; keep that ~4% brightness gap to preserve the lifted card feel. The Outfit family runs everything at 700–800 weight — if you switch fonts, pick something with equally strong bold weights or the headlines will feel soft. Cap the H2 at ~40 characters so it stays on two lines at 36px on phones, and keep each info-card detail line (email, phone, address) under 22 characters or the H4 will wrap awkwardly. The layout ships with zero images or icons, so there are no aspect ratios to worry about — if you want to add a background image on the section, drop it in behind #0a0a0a at around 15% opacity so the copy stays legible.

How to install this layout

Download the layout JSON file from this page.
Open the target page in the Divi 5 builder.
Open the portability panel (up/down arrows icon) and choose the Import tab.
Upload the JSON. Tick “replace existing content” only for full-page imports.
Check the page at desktop and mobile widths, then swap in your copy and images.

Full walkthrough with troubleshooting: How to Import a Divi 5 Layout.

Questions about Bold Fitness Contact Layout for Divi 5 — Gym & Coaching Intro Form

What fields does the contact form include?

Five: Name, Email, Phone, and *Primary training goal* are arranged two-per-row at half-width on desktop, followed by a full-width Message textarea prompting *Tell us about your training background and what you want to work on*. All five are built from Divi's native contact-field module, so you can rename, reorder, add, or remove them in the form settings without touching code.

Does the layout include an embedded map, or just the address?

Just the address. The WALK IN card holds the street line, city/ZIP, and a parking note — no Google Map iframe. If you want a map, drop Divi's Map module into a new row below the three-card grid, or replace the WALK IN card contents with an embedded map at the same 16px radius so it reads as part of the set.

How does the three-card row behave on mobile?

The row has `flexDirection: column` set at the phone breakpoint, so the three cards stack full-width in the order EMAIL → CALL THE GYM → WALK IN. Padding stays at 40px vertical / 32px horizontal, so each card still reads as its own tile rather than a flat list. Reorder the columns in the Divi editor if a different priority makes more sense for your funnel.

Where do form submissions go by default, and how do I change it?

The contact form's receiver is preset to `coach@ironforge.fit` — a placeholder. Open the form module, go to Email → Message Pattern, and swap the receiver address to your own before publishing. If you skip this step, submissions will bounce.

Can I add a fourth info card, or drop one?

Yes on both. The middle row uses `justifyContent: center` with a 24px gap, so three cards center as a row and four will wrap 3+1 on desktop — cleaner if you go to four columns instead. To drop one, delete the column and the remaining two will re-center automatically. Keep the card padding and radius consistent so the set still reads as a unit.

What should I edit first after installing?

The receiver email on the form, then the three info cards (email address, phone number, street address, and their supporting lines), then the H2 and its 720px paragraph. Everything else — the eyebrow tag, the *Book your free intro session* heading, and the button label *BOOK MY INTRO SESSION* — is short enough to rewrite in one pass once the concrete details are in place.

Which Divi version does this layout need?

Divi 5. The layout is generated natively for Divi 5 and validated against its real module structure before publication, so it imports clean into the current builder.

Can I use this layout on client websites?

Yes. Every download includes a commercial license covering unlimited sites you own or build for clients. Only reselling or redistributing the layout file itself is prohibited.