Canvas Docs

Login Form

Renders a WordPress login form with Canvas styling. Shows a welcome message to logged-in users. It is shown in the block inserter as Login Form and registered as canvas-core/login-form.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Login Form settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

  • Form HeadingDefaultLogin

    Title shown above the form. Leave it empty for no heading.

  • Submit Button TextDefaultLog In

    Wording on the login button.

  • Redirect URLDefaultEmpty

    Where to send the user after a successful login. Defaults to the current page.

Options

  • Show "Remember Me" CheckboxDefaultOn

    Offer a Remember Me checkbox so the visitor stays signed in on their next visit.

  • Show Register LinkDefaultOn

    Only visible when the site allows user registration (Settings > General).

Layout

  • Form LayoutDefaultWordPress Default

    WordPress Default uses the login form built into WordPress. Bootstrap Grid renders the row and column markup this block builds itself.

    ChoicesWordPress DefaultBootstrap Grid

  • Form ClassesDefaultrow mb-0

    Classes on the form element.

    Shown when Form Layout is "Bootstrap Grid"

  • Heading Extra ClassesDefaultEmpty

    Extra classes on the heading above the form.

  • Username LabelDefaultUsername:

    Wording of the username label.

    Shown when Form Layout is "Bootstrap Grid"

  • Password LabelDefaultPassword:

    Wording of the password label.

    Shown when Form Layout is "Bootstrap Grid"

  • Label ClassesDefaultEmpty

    Classes on both field labels.

    Shown when Form Layout is "Bootstrap Grid"

  • Input ClassesDefaultform-control

    Classes on the username and password inputs.

    Shown when Form Layout is "Bootstrap Grid"

  • Button ClassesDefaultbutton m-0

    Classes on the login button.

    Shown when Form Layout is "Bootstrap Grid"

  • Show Lost Password LinkDefaultOff

    Add a link to the password reset page.

    Shown when Form Layout is "Bootstrap Grid"

  • Lost Password TextDefaultForgot Password?

    Wording of the lost password link.

    Shown when Show Lost Password Link is on

  • Form IDDefaultEmpty

    HTML id on the element itself.

    Shown when Form Layout is "Bootstrap Grid"

  • Field ID PrefixDefaultEmpty

    Prefix for the username and password field ids. Empty generates a unique prefix.

    Shown when Form Layout is "Bootstrap Grid"

  • Form NameDefaultEmpty

    The name attribute on the element. Empty emits none.

    Shown when Form Layout is "Bootstrap Grid"

  • Show Field LabelsDefaultOn

    Turn off for a placeholder-only card. The placeholders then carry the accessible name.

    Shown when Form Layout is "Bootstrap Grid"

  • Username PlaceholderDefaultEmpty

    Hint text inside the username field. With labels turned off it also becomes the accessible name for the field.

    Shown when Form Layout is "Bootstrap Grid"

  • Password PlaceholderDefaultEmpty

    Hint text inside the password field. With labels turned off it also becomes the accessible name for the field.

    Shown when Form Layout is "Bootstrap Grid"

  • Username Row ClassesDefaultcol-12 form-group

    Classes on the row wrapping the username label and input.

    Shown when Form Layout is "Bootstrap Grid"

  • Password Row ClassesDefaultcol-12 form-group

    Classes on the row wrapping the password label and input.

    Shown when Form Layout is "Bootstrap Grid"

  • Password Input Wrapper ClassesDefaultEmpty

    Classes on an extra element wrapping the password input alone: a design that groups it with a reveal button needs one. Empty emits no wrapper.

    Shown when Form Layout is "Bootstrap Grid"

  • "Remember Me" LayoutDefaultCheckbox inside its label

    The side-by-side layout emits the checkbox and its label as siblings, which is what a Bootstrap form-check expects.

    ChoicesCheckbox inside its labelCheckbox and label side by sideShown when Show "Remember Me" Checkbox is on

  • "Remember Me" TextDefaultEmpty

    Wording beside the Remember Me checkbox. Empty reads Remember Me.

    Shown when Show "Remember Me" Checkbox is on

  • "Remember Me" Row ClassesDefaultcol-12 form-group

    Classes on the row holding the Remember Me checkbox.

    Shown when Show "Remember Me" Checkbox is on

  • "Remember Me" Group ClassesDefaultEmpty

    Classes on an element wrapping the checkbox and its label together, inside the row.

    Shown when "Remember Me" Layout is "Checkbox and label side by side"

  • "Remember Me" Checkbox ClassesDefaultEmpty

    Classes on the Remember Me checkbox itself.

    Shown when "Remember Me" Layout is "Checkbox and label side by side"

  • "Remember Me" Label ClassesDefaultEmpty

    Classes on the Remember Me label.

    Shown when "Remember Me" Layout is "Checkbox and label side by side"

  • "Remember Me" Checkbox IDDefaultEmpty

    Needed to tie the label to the checkbox when they are siblings.

    Shown when "Remember Me" Layout is "Checkbox and label side by side"

  • Lost Password beside "Remember Me"DefaultOff

    Put the lost-password link in the "Remember Me" row instead of the submit row: the layout a design gets with justify-content-between.

    Shown when Show Lost Password Link is on

  • Lost Password on its Own RowDefaultOff

    Put the lost-password link above the submit button instead of beside it.

    Shown when Show Lost Password Link is on

  • Lost Password Row ClassesDefaultcol-12 form-group

    Classes on the row holding the lost password link.

    Shown when Lost Password on its Own Row is on

  • Lost Password Link ClassesDefaultEmpty

    Classes on the lost password link.

    Shown when Show Lost Password Link is on

  • Submit Row ClassesDefaultcol-12 form-group

    Classes on the row holding the login button.

    Shown when Form Layout is "Bootstrap Grid"

  • Submit Inner Row ClassesDefaultd-flex justify-content-between

    The flex row holding the button and the lost-password link. Enter "none" to drop it.

    Shown when Form Layout is "Bootstrap Grid"

  • Submit Button IDDefaultEmpty

    Identifier placed on the login button, for a design or a script that targets it.

    Shown when Form Layout is "Bootstrap Grid"

  • Submit Button NameDefaultEmpty

    Name submitted with the login button when the form is sent.

    Shown when Form Layout is "Bootstrap Grid"

  • Submit Button TypeDefaultSubmit (explicit)

    A button inside a form submits by default, so a design that omits the attribute behaves identically.

    ChoicesSubmit (explicit)Omit the attributeShown when Form Layout is "Bootstrap Grid"

  • Submit Button ValueDefaultEmpty

    Value submitted with the login button when the form is sent.

    Shown when Form Layout is "Bootstrap Grid"

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Canvas: Alerts, Buttons, Code Highlight, Counters, Dividers, Dropcaps.

Was this page helpful?