Bold Restaurant Reservation Contact Layout for Divi 5

Contact Restaurant Bold

A bold, fire-lit Divi 5 contact layout for restaurants — reservation form, private events inquiry, hours, and location in a dark, high-impact design.

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

This is a single-section contact block that runs edge-to-edge on a deep #0f0f0f canvas with 140px of vertical padding on desktop, tapering to 96px on tablet and 80px on phone. Everything sits inside a 1200px-max row with 32px side gutters, stacked in one centered column — eyebrow, headline, intro paragraph, form card, address panel — so the eye reads top-to-bottom without a competing hero image or sidebar to fight against.

The type hierarchy is deliberate and does most of the design work. A small orange (#ff5a1f) eyebrow reading Reservations · Private Events · Chef's Table uses Outfit at 14px with 5px letter-spacing to preview the three ways the venue takes bookings. Below it, an Outfit 800 H2 at 72px on desktop (52px tablet / 38px phone) delivers the fireside promise in cream #f5f0e6 across an 860px column, and a muted #c9c3b8 body paragraph at 19px sits underneath inside a tighter 700px column, so the intro copy reads as commentary rather than competing with the headline.

The Contact Form module is the workhorse. Five native Divi 5 fields — Full Name, Email, Phone Number and Party Size (all set to 12_24 half-width on desktop, full-width on phone) plus a full-width Message textarea for preferred date, time and dietary notes — sit inside an 820px card with #161616 field fills, subtle rgba(245,240,230,0.14) borders, an 8px field radius and a 16px card radius, lifted off the dark backdrop by a preset3 box shadow. The orange Request Reservation button flips to cream on hover. Directly under the form, a three-block address / phone / service-hours panel uses tiny orange uppercase labels to echo the eyebrow, closing the loop on the palette and giving walk-in guests the info they need without another click.

What’s inside

Dark restaurant contact section on a #0f0f0f canvas with 140/96/80px vertical padding across desktop, tablet and phone
Orange #ff5a1f eyebrow tagline set in Outfit 14px with 5px letter-spacing for a *Reservations · Private Events · Chef's Table* pre-headline
Oversized Outfit 800 H2 that steps from 72px → 52px → 38px so the headline stays commanding on every screen
Native Divi 5 Contact Form module with five pre-configured fields — Full Name, Email, Phone, Party Size, and a free-text Message area for date, time and dietary notes
Two-column half-width (12_24) field layout on desktop that collapses to full-width on phone, with the Message textarea always full-width
Custom form card treatment: #161616 field fills, subtle 14% cream borders, 8px field radius, 16px card radius, and a preset3 drop shadow for depth
Orange *Request Reservation* CTA with an inverted cream/black hover state, uppercase 14px Outfit label and 20×48px padding
Three-block info panel below the form (address, phone, service hours) with orange uppercase labels that echo the eyebrow

Who it’s for

Restaurants, chophouses, steakhouses and smoke-and-fire concept kitchens where dark, tactile, adult branding is on-brand. Because the form doubles as reservation intake and private-event lead capture — the Party Size field plus the open-ended preferred date, time and any dietary or occasion notes textarea — it also fits catering outfits, wine bars, tasting rooms, cocktail lounges and speakeasies where every booking is bespoke. The centered, single-column composition works equally well as a section on a longer landing page for pop-ups, chef's-table series or supper clubs. It's less appropriate for QSR, bright brunch cafés or pastel-forward brands: the black-and-ember palette carries a serious, evening tone that would fight a cheerful daytime identity.

Customization tips

The whole palette lives on five hex values — background #0f0f0f, accent #ff5a1f, cream #f5f0e6, muted body #c9c3b8, field fill #161616. Swap the accent to any warm brand color (deep red, brass, olive, mustard) and update it in exactly three places: the eyebrow text, the submit-button background and the three orange info-block labels. The rest of the palette carries.

Keep the H2 under about 35 characters per line — the phone size (38px) inside the 860px column will start to break awkwardly beyond that. The intro paragraph reads best at 25–45 words; longer copy will breach the 700px reading column and dilute the CTA below. Field labels can be relabeled inline (e.g. Party Size → Number of guests), but keep the Message textarea at 24_24 so the two-column rhythm above it stays clean.

Before publishing, open the Contact Form settings and change the receiver email — it currently points at reservations@emberandash.com. There are no images to swap; the warmth comes from type and color, not photography.

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 Restaurant Reservation Contact Layout for Divi 5

Is the reservation form responsive?

Yes. On desktop the Full Name, Email, Phone and Party Size fields sit as two-per-row using Divi's 12_24 flex sizing; on phone they stack full-width. Section padding also tapers from 140px on desktop to 96px on tablet and 80px on phone, so the form has room to breathe on small screens without feeling cramped.

Which Divi 5 modules does this layout actually use?

Four native ones: Text (for the eyebrow, intro paragraph and the address / phone / hours block), Heading (for the H2), Contact Form and Contact Field. No third-party plugins, no code modules — everything renders straight out of the Divi 5 builder.

What should I edit first after importing?

Open the Contact Form module and change the receiver email (currently `reservations@emberandash.com`) to your host stand's inbox. Then rewrite the H2, the intro paragraph, and the three orange-labeled blocks under the form — address, phone number, and service hours — with your real venue details.

Are there any images or icons to replace?

No. The layout is entirely type-driven on a solid dark canvas — the warmth comes from the orange accent, the Outfit typography and the field-card shadow. If you want photography, drop an image module above the H2 or set a section background image behind the row.

Can I turn this into a full contact page instead of a section?

Yes. Duplicate the row and add a Map or Google Maps embed above or below the form, or drop a second row for a private-events / buyouts CTA. The 1200px row width and centered column mean anything you add will align cleanly with the existing hierarchy.

Will the orange still work if I recolor to my brand?

Yes, and it's a fast swap — `#ff5a1f` is only used in three places: the eyebrow text, the submit button background (with its cream hover), and the three uppercase labels under the form. Change those three and the cream/black canvas continues to carry the mood.

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.