🔥 Support Genix Lifetime Deal — 100 sites, forever · Now $199 $699 Save $500 · Limited-Time Offer

left
See the Offer →

Contact Section 2026

The Contact Section 2026 widget is a full contact-page builder with five built-in design styles and three layout variants — section header, a connectable contact form (via your favorite form plugin), contact info cards, working hours, social links, a trust/response stat, and an embeddable map, all in one section. Works identically in Elementor and the WordPress block editor.

Overview

Instead of piecing together a contact page from a heading widget, a shortcode widget, and a Google Maps embed, Contact Section 2026 gives you one widget that ties everything together — a section header, a form panel that plugs into whichever form plugin you already use, a repeater of contact-info cards (address/phone/email/hours/website/custom), a working-hours mini card with an “Open now” badge, social link icons, a trust/response-time stat card, and a responsive map embed.

Every part of it is restyled instantly by switching the Design Style dropdown — no custom CSS required.

5 Design Styles

  • Bento Grid — crisp white cards, sharp grid alignment, confident typography. The clean SaaS-product look.
  • Glassmorphism — frosted-glass translucent panels over a dark, gradient-blurred backdrop. Premium fintech/crypto feel.
  • Dark Minimal — near-black canvas, a single lime accent color, high contrast. Dev-tools/AI-native feel.
  • Aurora — soft gradient-mesh backgrounds, rounded corners, warm color blends. Modern AI/tech branding feel.
  • Neo-Brutalist — hard 2px borders, flat solid colors, offset drop-shadows, no gradients. Bold agency energy.

3 Layouts

  • Split (Form + Info) — the contact form on one side, the info/hours/social/map/trust column on the other.
  • Centered (Form only) — just the form, centered on the page, with the map (if enabled) spanning full-width below it.
  • Info Cards (no form) — no form panel at all; contact info, working hours, social links, map, and trust block render as a card layout.

The Contact Form section only appears on the Split and Centered layouts. The Contact Info, Working Hours, Social Links, and Trust Block sections only appear on the Split and Info Cards layouts — Centered shows the form (and optional map) only.

Content Settings

SectionSettingWhat it does
Design StyleStyle PresetBento Grid / Glassmorphism / Dark Minimal / Aurora / Neo-Brutalist
Design StyleLayoutSplit (Form + Info) / Centered (Form only) / Info Cards (no form)
Section HeaderShow Section LabelToggles the small eyebrow label above the headline
Section HeaderLabel TextText shown in the eyebrow label, e.g. “Get In Touch”
Section HeaderHeadlineMain heading text
Section HeaderHeadline HighlightExact word(s) from the headline to style with the accent color/gradient
Section HeaderHeadline TagH1 / H2 / H3 / H4 — the actual heading tag rendered
Section HeaderDescriptionSupporting paragraph under the headline
Contact FormForm Title / Form SubtitleHeading and supporting line shown above the form panel
Contact FormForm PluginChoose which installed form plugin powers the form — HT Contact Form, Contact Form 7, WPForms, Fluent Forms, Gravity Forms, or Ninja Forms
Contact FormSelect FormDropdown of your published forms from the chosen plugin
Contact FormCustom CSS ClassOptional extra class added to the form wrapper div
Contact Form(no plugin installed)Shows an install/activate prompt for HT Contact Form instead of the form controls
Contact InfoInfo Items (repeater)Icon Type (Address / Phone / Email / Hours / Website / Custom Icon), Label, Value (supports line breaks), and an optional Link URL per item
MapShow MapToggles the embedded map
MapMap Embed URLThe src URL from a Google Maps or OpenStreetMap embed code
Working HoursShow Working HoursToggles the working-hours mini card
Working HoursTitleHeading text for the hours card
Working HoursHours Rows (repeater)Day(s) and Time pairs, e.g. “Mon – Fri” / “9:00 – 18:00”
Working HoursShow “Open now” BadgeToggles a small status badge on the hours card
Working HoursBadge TextText shown inside the badge, e.g. “Open now”
Social LinksShow Social LinksToggles the social-icons mini card
Social LinksTitleHeading text for the social card, e.g. “Follow Us”
Social LinksSocial Items (repeater)Network (Facebook / X-Twitter / LinkedIn / Instagram / YouTube / GitHub) plus its URL
Trust BlockShow Trust BlockToggles the response-time stat card
Trust BlockLabelSmall heading above the stat, e.g. “Why teams choose us”
Trust BlockHighlight StatThe big number/stat, e.g. “< 1 hr”
Trust BlockStat DescriptionOne line describing the stat, e.g. “Average first response time”
Trust BlockShow Star RatingToggles a 5-star rating line
Trust BlockFooter TextClosing trust line, e.g. “Rated 4.9/5 by 2,400+ customers”

Style Settings

Every content element above has a matching Style-tab section:

  • Section — background and padding.
  • Card / Tile (shared) — background, border, corner radius, box shadow, and tile label styling, shared across the info, hours, social, and trust cards.
  • Section Label — typography, color, background, corner radius, and padding.
  • Headline — color, plus a separate solid or gradient color for the highlighted word(s).
  • Description — typography and color.
  • Form Tile — background, corner radius, and title and subtitle typography.
  • Form Fields — background, text color, border, focus border, placeholder color, and label color and typography, all applied through CSS variables so it works with any connected form plugin.
  • Submit Button — background or gradient, text color, corner radius, padding, and typography, plus a separate hover background and text color.
  • Contact Info — icon background, color, and size, plus label and value typography and color.
  • Working Hours — row typography and color, plus typography and colors for the “Open now” badge.
  • Social Links — icon size and corner radius, with separate normal and hover color, background, and border.
  • Trust Block — tile background, stat number and description typography and color, star color, and footer typography and color.
  • Map — height and corner radius.

All colors accept either a solid color or a gradient.

Frequently Asked Questions

Do I need Elementor Pro to use this?

No — Contact Section 2026 works with the free version of Elementor, plus the WordPress block editor. No Pro upgrade required.

Can I use a different layout for each design style?

Yes — Design Style and Layout are independent settings. Any of the 5 styles can be paired with any of the 3 layouts.

Where does the form actually submit to, and is there spam protection?

The widget doesn’t process form submissions itself — the Contact Form section connects to a form plugin you choose (HT Contact Form, Contact Form 7, WPForms, Fluent Forms, Gravity Forms, or Ninja Forms) and renders that plugin’s own form via shortcode. Submission handling, storage, email notifications, and spam protection (reCAPTCHA, honeypot, etc.) are all managed by whichever form plugin you select. If no supported plugin is active yet, the widget shows a prompt to install or activate HT Contact Form.

Is this widget accessible?

Yes — WCAG 2.1 AA, with a labeled contact-information landmark, proper focus states on interactive elements, and semantic heading tags (choose H1–H4 to match your page’s outline).

How to Add This Section

  1. Elementor: search “Contact” in the widget panel under the HT Mega 2026 category, drag it onto your page.
  2. WordPress Block Editor: click the block inserter (+), search “Contact Section 2026” under the HT Mega category, insert it, then edit the settings in the block sidebar.
Last updated on July 12, 2026

Was this article helpful?

PREVIOUS

CTA Section 2026

NEXT

Blog / Posts Section 2026

Powered by Support Genix
Scroll to Top