Form Submit Button

The submit button for a Canvas form. Supports style variants, size, full-width mode, and an icon. It is shown in the block inserter as Form Submit Button and registered as canvas-core/form-submit.

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

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

• Button TextDefaultSubmit

  The wording a visitor reads on the button. Naming the action, as in Send Enquiry, reads better than Submit.

• Loading TextDefaultSending...

  Displayed while the form is being submitted.

• IconDefaultEmpty

  Optional icon shown alongside the button text.

• Icon PositionDefaultAfter the text

  Whether the icon sits before the wording or after it.

  ChoicesAfter the textBefore the textShown when Icon is set

Style

• Icon Inline StyleDefaultEmpty

  One-off styling for the icon itself, for a design that sets the gap between the icon and the label to a value no class carries.

  Shown when Icon is set

• Button ShapeDefaultRounded

  The corners of the button: a slight curve, a full pill, or the square corners the theme uses elsewhere.

  ChoicesRoundedPillSquare (theme default)Shown when Button Style is "Default (Solid)" or "3D" or "Border / Outline" or "Dark"

• Button SizeDefaultEmpty

  How large the button is drawn. A form that matters deserves a large button.

  ChoicesDefault (empty)MiniSmallLargeExtra Large

• Button ValueDefaultEmpty

  The submit button's value attribute: what is posted under its name when this button is the one pressed.

• Full WidthDefaultOff

  Stretches the button across the whole width of the form, which is the usual treatment on a phone.

• Button NameDefaultEmpty

  The button element's name attribute: only the pressed submit is posted, which is how a form tells two submit buttons apart.

• Unwrapped Button (control only)DefaultOff

  With the Plain style, render only the submit button: drop the surrounding wrapper. Needed when the button must be a DIRECT child of a Bootstrap input-group so its join and radius rules apply.

• Label ClassesDefaultEmpty

  Wraps the Plain-style button label in a span carrying these classes, for designs whose button splits its icon and label into separate boxes. Empty leaves the label as bare text.

  Shown when Button Style is "Plain (Additional CSS Classes only)"

• Button StyleDefaultDefault (Solid)

  How much weight the button carries. Choose Plain when your own classes supply the whole appearance.

  ChoicesDefault (Solid)3DBorder / OutlineDarkPlain (Additional CSS Classes only)

Settings

• Wrapper ClassesDefaultEmpty

  Extra classes on the .cnvs-form-submit wrapper, so the button can sit in a grid column.

Style tab

• Button Text Color

  A style control in the Button group of the Style tab. It has a hover state as well as a resting one.

• Button Background

  A style control in the Button group of the Style tab. It has a hover state as well as a resting one.

• Button Radius

  A style control in the Button group of the Style tab.

• Button Padding

  A style control in the Button group of the Style tab.

• Button Typography

  A style control in the Button group of the Style tab.

Related

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

Other blocks in Forms: Form, Form Embed, Form Field, Quick Contact.