Form Expertby ShipMyFormInstall on Shopify
All guides

Build

Adding a form to your theme

App block, app embed, hosted page, pop-ups, scheduling and the floating button.

Form Expert gives you three ways to show a form. Pick the one that matches your theme.

1. App block

For Online Store 2.0 themes (Dawn, Sense, Craft and most themes from 2021 on).

  1. Publish the form in Forms.
  2. Click Add to theme, or open Online Store, Themes, Customize.
  3. Open the page template you want, for example Pages, Contact. Select a section, or Add section, Apps.
  4. Add block, Apps, Form Expert form, then pick the form in the Form dropdown. Only published forms are listed; a single published form is selected automatically.
  5. Adjust alignment, spacing, font, colours, corner radius and the button under Layout and Style. Add your own rules under Advanced, Custom CSS; selectors start with .formex, for example .formex__btn { border-radius: 0 }.
  6. Save.

If the theme editor says "Liquid templates don't support sections and blocks", the page uses a legacy .liquid template. Use option 2 or 3.

2. App embed

For legacy themes (Debut, Brooklyn, Minimal, Supply, Venture and older custom themes) and page or blog content.

  1. Online Store, Themes, Customize, App embeds (the puzzle-piece icon). Turn on Form Expert embed and save.
  2. Paste this where the form should appear, in a page or blog post (use the HTML view of the editor):
<div data-formex-form="YOUR_FORM_ID"></div>

The form ID is shown in the editor next to the Live badge and in the Forms list.

3. Hosted page

Every published form has a page at https://<app>/f/<FORM_ID> that you can link from menus, emails or social posts. No theme changes are needed.

Which one

  • Themes with JSON templates: app block. Fastest render, no extra request.
  • Legacy themes or blog posts: app embed.
  • Anything else: hosted page.

To check your theme type: Online Store, Themes, your theme, Edit code, templates. page.json means Online Store 2.0; page.liquid means legacy.

Pop-ups

Online Store 2.0 themes only.

  1. In the theme editor open the template where the pop-up should appear.
  2. Pick a section, Add block, Apps, Form Expert pop-up. Choose the form.
  3. Set When to show: after a delay, after scrolling, on exit intent, immediately, or only when clicked.
  4. Choose how often it returns after being closed: every page view, next visit, after 1 day, after 7 days, or never. It never shows again to someone who submitted.
  5. Optional: a teaser tab that stays on screen after the pop-up is closed.

To open the pop-up from your own button or link, use the address #formex-open, or add data-formex-open to any element. The pop-up is keyboard-accessible, closes with Esc or a click outside, and returns focus to where the visitor was.

The pop-up stays open in the theme editor while you style it. Untick Keep open in the theme editor to see it behave normally.

Floating button

On the pop-up block, set Show to Floating button. A small button with your label sits in the bottom left or right corner and opens the form when clicked. It never opens on its own.

Scheduling

Both blocks have Schedule settings: Show from and Hide after (YYYY-MM-DD). Outside the window the block renders nothing on the storefront, while staying visible in the theme editor.

Signed-in customers only

In the editor's Form tab, tick Only signed-in customers can see and submit this form. Guests see a sign-in prompt that returns them to the same page afterwards, and the server refuses submissions without a customer session.

Something missing? Submit a ticket.