Workflow FormsWorkflow Forms
On your storefrontAdd a form to your theme

Add a form to your theme

Copy page

Place a form on any page with the Workflow Forms Form block in the theme editor, and what each block setting does.

The Form block shows a form inline on a page of your theme: a contact page, a product page, the footer of your home page, or anywhere your theme accepts app blocks.

Add the block

  1. In the form editor, set Show on your store as to Inline and open the Display tab. Copy the Form handle shown there.
  2. Select Open theme editor, or go to Online Store > Themes > Customize yourself.
  3. Open the page or template the form should be on, select Add block in a section and choose Form under the Workflow Forms app.
  4. Paste the handle into the block's Form handle setting.
  5. Save the theme.

The form must be live (Form is live on the General tab) to show. If you change a form's handle later, update the block too; a block with the old handle shows nothing.

You can add the block as often as you like, with the same or different forms.

Block settings

Setting Notes
Form handle Which form to show, for example contact
Show form title On by default. Turn it off when the page already has a heading

Layout

Setting Notes
Maximum width 320 to 1200 px, 640 px by default
Alignment Left, Center or Right
Top padding, Bottom padding 0 to 100 px

Colors

Text, Labels, Field background, Field text, Field border, and Errors and required marks.

A color you fill in here wins for this block. Leave it empty to use the form's branding, then the branding from the Workflow Forms app, then your theme.

Button

Button style:

  • From the app (form or branding) - the default: the button follows the form's or your shop's branding.
  • Theme button - your theme's own button.
  • Custom - uses the block's Button background and Button text colors.

Shape and spacing

Override shape and spacing is off by default: spacing, corner radius and border width come from the form's branding or the branding in the Workflow Forms app. Turn it on and the four sliders apply to this block: Space between fields, Field corner radius, Field border width and Button corner radius.

See Branding for how the levels work together.

Good to know

  • The form is shown in the visitor's storefront language when you added it. See Languages.
  • The block works in themes that support app blocks (Online Store 2.0 themes).
  • The first submission completes the "Add the form to your theme" step of the setup guide on the app's home page.

Not showing?

  • The handle in the block must match the form's handle exactly.
  • Form is live must be on, and the form must be saved.
  • Check that you saved the theme, and that you are looking at the template the block was added to.

Next steps