Forms module

Login Form block

Log in, register and reset a password on your own page — without reloading, and with WordPress’s standard login as a fallback.

Overview

The Login Form puts WordPress log-in, registration and lost-password forms on any page, styled like your site. Visitors switch between the three forms without leaving the page, and errors show in place. It uses WordPress’s own login functions, so security plugins, login limiters and captcha plugins that hook into the standard login keep working. If something unexpected happens (for example a two-factor step), it falls back to the standard WordPress login page.

At a glance

Block name: wpbb/login-form
Module: Forms
Find it by searching: Login Form
Loads JavaScript on the site: Yes, a small script, only on pages that use this block

When and why to use it

A branded /login page for members, customers or students.
Registration on a community site.
A sidebar login box.

Example scenarios

Membership site: a /login page with the Login Form (Card style), redirecting to a “Members” page after login.

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Login Form in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Login Form in the results. The block appears with a preview of the log-in form.
Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

Settings panel: Form

Show first

What it does: Which form visitors see when the page loads.
What to enter or choose: One of: Log in, Register, Lost password.
Default: Log in
How to use it: Click one of the buttons in the group.
When to use it: Always optional.
Example: Register on a sign-up page.
Result: Visitors can still switch forms with the links.
Good to know: If registration is off (Settings → General → Membership), the editor warns: “Registration is turned off for this site, so the register form is not shown.”

“Remember me” checkbox

What it does: Keeps visitors logged in longer.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Usually.
Example: On.
Result: A checkbox under the password.

“Forgot your password?” link

What it does: Links to the lost-password form.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Usually.
Example: On.
Result: The link switches forms in place.

“Create an account” link

What it does: Links to the registration form.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: When registration is open.
Example: On.
Result: Shown only when registration is open.

Titles

What it does: Shows “Log in”, “Register”… headings above each form.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Optional.
Example: Off when the page already has a heading.
Result: Headings appear or hide.

Settings panel: Behavior

Submit without reloading the page

What it does: Sends the form in the background and shows errors in place.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Keep on; turn off if a security plugin needs the classic flow.
Example: On.
Result: Off: the forms post to WordPress’s login screens as usual.

After logging in, go to

What it does: Where visitors land after logging in.
What to enter or choose: One of: The same page, The home page, A page on this site….
Default: The same page
How to use it: Open the dropdown and pick an option.
When to use it: Always optional.
Example: A page on this site… → /members/.
Result: WordPress’s login_redirect filter still applies.

URLShown when After logging in is “A page on this site…”

What it does: The page to go to.
What to enter or choose: An address on this site.
Default: Empty
How to use it: Paste a full address, including https://.
When to use it: With the custom option.
Example: /members/.
Result: Links to other sites are ignored for safety.

Logged-in visitors see

What it does: What the block shows to people already logged in.
What to enter or choose: One of: “Logged in as …” with a log-out link, Nothing.
Default: “Logged in as …” with a log-out link
How to use it: Open the dropdown and pick an option.
When to use it: Always optional.
Example: Nothing in a sidebar.
Result: Editors still see the form in the editor.

Settings panel: Appearance

Style

What it does: A bordered card or no box.
What to enter or choose: One of: Card, Plain.
Default: Card
How to use it: Click one of the buttons in the group.
When to use it: Always optional.
Example: Card on a plain page.
Result: The box changes.

Fields

What it does: The look of the input fields.
What to enter or choose: One of: Outline, Filled, Underline.
Default: Outline
How to use it: Click one of the buttons in the group.
When to use it: Outline for most sites; Filled on white backgrounds; Underline for minimal designs.
Example: Filled.
Result: All fields change style. Focus states are built in.

Full-width button

What it does: Stretches the submit button.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Usually on.
Example: On.
Result: The button fills the form.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Login Form offers.

Element: Fields selected first

The inputs. Focus state.

Styles-tab controls for “Fields”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Focus
Colors	Text	—	Normal, Focus
Background	Type	—	Normal, Focus
	Color / Gradient	—	Normal, Focus
	Image	—	Normal
Border	Border type	—	Normal, Focus
	Border	—	Normal, Focus
	Radius	Yes	Normal
	Focus indicator	—	Focus
Box Shadow	Remove shadow	—	Normal, Focus
Box Shadow	Shadow layers	—	Normal, Focus
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Focus

States for this part:

Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.

Element: Block

The card.

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Transform	Move X / Move Y	—	Normal
	Scale X / Scale Y	—	Normal
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal
	Skew X (°) / Skew Y (°)	—	Normal
Effects	Opacity (%)	Yes	Normal
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Title

Form titles.

Styles-tab controls for “Title”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Labels

Field labels.

Styles-tab controls for “Labels”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Button

Submit buttons. Hover and Focus.

Styles-tab controls for “Button”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover, Focus
Colors	Text	—	Normal, Hover, Focus
Background	Type	—	Normal, Hover, Focus
	Color / Gradient	—	Normal, Hover, Focus
	Image	—	Normal
Border	Border type	—	Normal, Hover, Focus
	Border	—	Normal, Hover, Focus
	Radius	Yes	Normal
	Focus indicator	—	Focus
Box Shadow	Remove shadow	—	Normal, Hover, Focus
Box Shadow	Shadow layers	—	Normal, Hover, Focus
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover, Focus

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.

Element: Links

The switch links. Hover.

Styles-tab controls for “Links”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover
Colors	Text	—	Normal, Hover

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Font size, Line height, Letter spacing, Alignment, Radius, Padding, Width, Max width, Height, Min width / Min height / Max height, Opacity (%), Margin, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.

How it works on your site

Standard HTML forms posting to WordPress’s login screens — so they work without JavaScript. With JavaScript (and the setting on) they submit in the background through the plugin’s REST endpoints, which call the same WordPress functions (wp_signon(), register_new_user(), retrieve_password()) and hooks as wp-login.php. Every request is protected with a nonce.

Accessibility

Every field has a visible label; errors are announced to screen readers.
Switching forms moves focus to the new form.

Tips and best practices

Point the User Profile block’s “Login page URL” to the page with this block.

Limitations and notes

Registration only works when “Anyone can register” is on in Settings → General.
This block shows different content to each visitor. If you use a page-cache plugin, exclude pages with this block from the cache for logged-in users (most caching plugins do this automatically).

Troubleshooting

The register form is missing.

Turn on Settings → General → Membership → Anyone can register.

Something needed the standard screen (for example two-factor authentication). This is the built-in fallback.

Overview

At a glance

When and why to use it

Example scenarios

How to add the Login Form block

Content settings

Settings panel: Form

Show first

“Remember me” checkbox

“Forgot your password?” link

“Create an account” link

Titles

Settings panel: Behavior

Submit without reloading the page

After logging in, go to

URLShown when After logging in is “A page on this site…”

Logged-in visitors see

Settings panel: Appearance

Style

Fields

Full-width button

Design & styling

Element: Fields selected first

Element: Block

Element: Title

Element: Labels

Element: Button

Element: Links

Responsive settings

Advanced options

How it works on your site

Accessibility

Tips and best practices

Limitations and notes

Troubleshooting