Canvas Docs

Quick Contact

A compact "Quick Quotation" contact form widget (name / email / message), styled with the Canvas form CSS. It is shown in the block inserter as Canvas Quick Contact and registered as canvas-core/quick-contact.

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

The Quick Contact 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

  • TitleDefaultQuick Quotation Form

    Heading shown above the form. Leave empty for a form with no heading.

  • Name PlaceholderDefaultFull Name

    Grey prompt inside the name box before the visitor types.

  • Email PlaceholderDefaultEmail Address

    Grey prompt inside the email box before the visitor types.

  • Message PlaceholderDefaultMessage

    Grey prompt inside the message box. Use it to tell the visitor what to include.

  • Button TextDefaultSend Message

    Wording on the button that sends the form.

Settings

  • Form Action URLDefault#

    Endpoint the form posts to (leave as # for a placeholder / front-end-handled form).

  • Title ClassesDefaultEmpty

    Class names on the heading, for a size, weight or letter spacing that differs from the theme default.

  • Spam Honeypot FieldDefaultOff

    Adds a hidden decoy field. Automated submissions fill it in and are rejected; a person never sees it.

  • Field LayoutDefaultPlain Inputs

    Input Group puts the Name and Email fields inside a bordered group led by an icon.

    ChoicesPlain InputsInput Group with Icons

  • Name Field IconDefaultuil uil-user

    Icon shown in the tab beside the name box.

    Shown when Field Layout is "Input Group with Icons"

  • Email Field IconDefaultbi-envelope-plus

    Icon shown in the tab beside the email box.

    Shown when Field Layout is "Input Group with Icons"

  • Use the Canvas Button ClassDefaultOn

    Prefixes the submit button with the theme's "button" class. Turn off to style the button purely from the classes below (e.g. a Bootstrap "btn btn-danger").

  • Message RowsDefault4

    How many lines tall the message box is. Lower it for a narrow sidebar.

  • Button ClassesDefaultbutton-3d button-block m-0

    Modifier classes on the submit button, added after the base "button" class: e.g. "button-small button-3d m-0" for a compact sidebar widget.

  • Form IDDefaultquick-contact-form

    Namespaces the form and every field id/name. Give a second widget on the same page its own id so the two forms stay independent.

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, Form Submit Button.

Was this page helpful?