Skip to main content

How do I add an embedded form to my store?

How to embed a Spoks form directly into a page on your Shopify store using the Spoks Embedded Form block.

Written by Peter

An embedded form appears directly inline on a page of your Shopify store, rather than as a popup overlay. Setting one up takes three steps: creating the embedded form, enabling the Spoks Onsite Javascript, and adding the Spoks Embedded Form block to your theme.

Requirements

  • Embedded forms are available for Shopify stores only.

  • Your store must be using an Online Store 2.0 theme. Older themes (sometimes called "vintage" themes) don't support inline app blocks like the Spoks Embedded Form, so the block won't be available to add.

Step 1: Create the embedded form

Create a new form in Spoks and choose Embedded form as the type. Configure it like any other form — basic information, questions, appearance, and form settings. Embedded forms also have two embed-specific settings: URL rules and form margin.

For details on configuring forms, see Creating or editing a form or poll.

Step 2: Enable the Spoks Onsite Javascript

Embedded forms only appear on your store when the Spoks Onsite Javascript is enabled in your Shopify theme. This is a one-time setup that applies to all popup and embedded forms.

When you save the embedded form, the How to use this form dialog appears with an Enable Javascript button that takes you to the Shopify theme editor and pre-enables the setup. Save your theme, and the JavaScript is active.

For full instructions, see Enabling Spoks Onsite Javascript on your store.

Step 3: Add the Spoks Embedded Form block to your theme

This is where you choose where the form appears on your store.

  1. Copy the form's Form ID. You'll find a Copy form ID button in the How to use this form dialog (shown after saving, or reopened with the info icon on the form overview).

  2. Open the Shopify theme editor. The How to use this form dialog's Edit theme button takes you there.

  3. In the theme editor, add or open the section where you want the form to appear.

  4. Add a new block and choose Spoks Embedded Form.

  5. Paste your Form ID into the block's settings.

  6. Save your theme.

The form will appear wherever you added the block. You can add the block in as many places as you like.

Making sure the form appears

For an embedded form to show on your store:

  • The Spoks Onsite Javascript must be enabled (Step 2).

  • The form's status must be LIVE. A DRAFT embed form doesn't render at all.

Did this answer your question?