Form Embed
Embed a Canvas form anywhere on the site by selecting its Form ID. It is shown in the block inserter as Form Embed and registered as canvas-core/form-embed.
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:
Form
FormDefault- Select a form -
Choose the Canvas form to embed. Manage forms under the Forms menu.
Choices- Select a form -Contact FormContact Form (hCaptcha)Contact Form (Modal)Contact Form (Overlay)Contact Form (reCAPTCHA v3)Contact Form (Stacked)Form #1Job ApplicationNewsletter SubscribeNewsletter Subscribe (LargeDanger)Newsletter Subscribe (Large)and 2 more
Form by Slug (portable)DefaultEmpty
Names the form by slug rather than by a site-specific ID, so a pattern or template that ships as a file still finds it after an import. Every shipped pattern uses this, which is why the Form list above can read as unset while a form is embedded. A form chosen above wins over this.
ChoicesNot set (empty)Contact FormContact Form (hCaptcha)Contact Form (Modal)Contact Form (Overlay)Contact Form (reCAPTCHA v3)Contact Form (Stacked)Form #1Job ApplicationNewsletter SubscribeNewsletter Subscribe (LargeDanger)Newsletter Subscribe (Large)and 2 more
Form Element Extra ClassesDefaultEmpty
Style classes on the form element itself. The classes field in the Advanced panel styles the block around it instead.
Form Element IDDefaultEmpty
Optional id attribute for the form element itself (design systems that style the form by id). Empty = the default generated id.
Form Accessible NameDefaultEmpty
What a screen reader announces this form as. Name it on any page that carries more than one form, so the two can be told apart. Empty leaves the form unnamed.
Form Element Inline CSSDefaultEmpty
Styling written straight onto the form element, such as a maximum width. It has to go on the form rather than the block around it, because a form laid out in columns arranges those columns on the form itself.
Form Shell Extra ClassesDefaultEmpty
Classes appended to the element that wraps the form and its result panel: the design's own form box.
Form Element NameDefaultEmpty
Optional name attribute on the form element, for a design or script that addresses the form by name.
Result Panel PositionDefaultAfter the fields
Where the success / error message appears.
ChoicesAfter the fieldsAbove the form
Result Panel Extra ClassesDefaultEmpty
Style classes on the panel that carries the success or error message once the form is sent.
Overlay ProcessorDefaultOff
Cover the form with a spinner while it is being submitted, instead of only re-labelling the button.
Settings
Form Shell ElementDefaultDivision (default)
Drops the shell the form engine wraps around the result panel and the form, for a design whose own column already surrounds them. Kept anyway when the shell carries classes or the overlay processor, which are positioned against it.
ChoicesDivision (default)None - result panel and form are plain siblings
No Wrapper ElementDefaultOff
Emits the form on its own, with no block around it, for a design whose own container already surrounds it. It is ignored while the block carries classes, an ID, custom styling or custom attributes, since each of those needs an element to sit on.
Style tab
Accent Color
A style control in the Form group of the Style tab.
Field Spacing
A style control in the Form group of the Style tab.
Field Radius
A style control in the Form 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 Field, Form Submit Button, Quick Contact.