Elementor widgets (Pro)
With LocalForm Pro active, two widgets show up in Elementor's General category:
- LocalForm Form - renders one form, exactly as the shortcode and the Gutenberg block do.
- LocalForm Events - lists the site's events, with one register link per date pointing at that event's form with the date preselected.
The Events widget
Controls, all in the Events section:
| Control | What it does |
|---|---|
| Number of events | How many events to list (1-100, default 10). |
| Filter by tag | Limit the list to forms carrying one of the selected tags. Empty lists every event. |
| Include events that have already taken place | Off by default, so only upcoming dates show. |
| Show description | Prints the form's description under the title. |
| Button label | Wording of the register link. Defaults to "Register". |
When registration is closed for an event (limit reached, or the date has passed), the button is replaced by a non-clickable label explaining why.
Price lines come from the form: one line per rate when the form uses
multiple event prices - Adults - 45.00, or
Adults - 45.00 - includes lunch when that rate has details - and a single
unlabelled amount otherwise.
How the card styling works
Each event renders as a card. The markup is:
<div class="localform-pro-events">
<article class="localform-pro-event">
<div class="localform-pro-event-body">
<h3 class="localform-pro-event-title">…</h3>
<div class="localform-pro-event-description">…</div>
<p class="localform-pro-event-meta"><svg class="localform-pro-event-icon">…</svg> Adults - 45.00 - includes lunch</p>
<p class="localform-pro-event-meta"><svg class="localform-pro-event-icon">…</svg> Deurne</p>
</div>
<div class="localform-pro-event-dates">
<div class="localform-pro-event-date">
<span class="localform-pro-event-date-label">Tue 3 March, 19:00</span>
<a class="localform-pro-event-button" href="…">Register</a>
</div>
</div>
</article>
</div>
The widget prints its stylesheet inline, once per page, no matter how many
Events widgets the page holds. The layout is a two-column flex row - the
description and meta rows on the left, the date buttons on the right - that
wraps to a single column below roughly 600px. The card itself is a frosted-glass
panel: a translucent white background, a hairline border, a soft drop shadow and
a backdrop-filter blur, so it picks up whatever gradient or image the section
behind it uses.
Overriding the look
Every value worth changing is a CSS custom property on the
.localform-pro-events wrapper, so one rule re-skins the whole list - no need
to match the widget's selectors or fight specificity.
| Property | Default | Controls |
|---|---|---|
--lf-event-gap | 24px | Space between cards, and between the two card columns. |
--lf-event-padding | 24px | Inner padding of a card. |
--lf-event-bg | rgba(255,255,255,.63) | Card background. |
--lf-event-border | 1px solid rgba(255,255,255,.63) | Card border (full shorthand). |
--lf-event-radius | 16px | Card corner radius. |
--lf-event-shadow | 0 4px 30px rgba(0,0,0,.1) | Card drop shadow. |
--lf-event-blur | 18px | Backdrop blur radius. |
--lf-event-accent | #117fc2 | Price and location icons. |
--lf-event-muted | #6b7280 | Date labels and the closed-registration button. |
--lf-event-button-bg | #08a664 | Register button background. |
--lf-event-button-color | #fff | Register button text. |
--lf-event-button-radius | 10px | Register button corner radius. |
Put the override in the widget's Advanced → Custom CSS box (Elementor Pro) or in Appearance → Customize → Additional CSS:
.localform-pro-events {
--lf-event-bg: #fff;
--lf-event-blur: 0px;
--lf-event-accent: var(--e-global-color-primary);
--lf-event-button-bg: var(--e-global-color-accent);
--lf-event-radius: 8px;
}
Pointing the accent and button colours at Elementor's global colour variables, as above, is the quickest way to make the list match the rest of the site.
Change the variables, not the selectors. Elementor kits style bare links with a
rule like .elementor-kit-9 a { color: … }, which outranks a plain
.localform-pro-event-button { … } - that is why the register button would
otherwise come out in the kit's link colour, usually with unreadable text. The
widget's own button rules are anchored on a.localform-pro-event-button inside
.localform-pro-events so they win, and a custom rule of yours would have to
match that weight. Setting --lf-event-button-bg and --lf-event-button-color
sidesteps the whole contest: custom properties inherit, so they apply no matter
which selector eventually wins.
Typography is deliberately left alone - titles, descriptions and meta text inherit from the theme, so they already match their surroundings. Only the date label (12px, muted) and the button (600 weight) set their own.
Flat cards
The frosted-glass effect needs something behind it to be worth having. On a flat background, turn it off:
.localform-pro-events {
--lf-event-bg: #fff;
--lf-event-border: 1px solid rgba(0, 0, 0, .08);
--lf-event-blur: 0px;
--lf-event-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
Dark themes
The defaults assume a light background. For a dark one:
.localform-pro-events {
--lf-event-bg: rgba(255, 255, 255, .06);
--lf-event-border: 1px solid rgba(255, 255, 255, .12);
--lf-event-muted: #9ca3af;
--lf-event-shadow: 0 4px 30px rgba(0, 0, 0, .4);
}
The Form widget
One control: pick the form. The widget hands off to LocalForm's own renderer, so the form on an Elementor page is byte-for-byte the form the shortcode renders, including per-form colours - see Embedding forms. Its styles are also printed inline while you are in the Elementor editor, so a form dropped on the canvas is styled immediately instead of only after a reload.