Publish and Embed Forms

Formpify makes it incredibly simple to save your creative work and seamlessly publish your dynamic forms directly into any Shopify Page, Product, or Blog context using the native Shopify Theme App Block integration. Follow the step-by-step guide below to go from your finished form design to a live, fully embedded form on your storefront.

Part 1: Save & Publish from Formpify

Step 1. Save Your Form

Once you are satisfied with your form layout in the Visual Builder, click the blue Save Changes button located in the top-right corner of the header. This commits your entire form configuration — fields, styling, validation rules, and conditional logic — to the cloud. You'll see a brief saving indicator, followed by a confirmation that your changes are saved.

Step 2. Click the Publish Button

Right next to the Save button, you will find the green Publish button. Click it to open the Publish Modal. Publishing makes your form available for embedding — it does not affect your store until you place the block in the Theme Editor.

Step 3. Generate Embed Code

The Publish Modal will display multiple integration options. Click the Generate Embed Code button. Formpify will instantly produce a unique Shopify Form ID tied to your specific form version. This ID is the bridge between your Formpify design and your Shopify theme.

Step 4. Copy the Form ID

Your unique Shopify Form ID will appear in a clearly highlighted field. Click the copy icon or manually select and copy the ID string. Keep this ID ready — you'll paste it into the Shopify Theme Editor in the next steps.

Part 2: Embed in Shopify Theme Editor

Step 5. Open the Theme Editor & Add a Block

Navigate to your Shopify Admin Dashboard → Online Store → Themes → Customize. In the Theme Editor, go to the page or section where you want the form to appear. Click the Add block or Add section button in the left sidebar.

Step 6. Switch to the Apps Tab

When the block picker appears, you will see two tabs at the top: Sections and Apps. Switch to the Apps tab. This is where all installed Shopify app blocks are listed, including Formpify.

Step 7. Select the Formpify Form Block

From the Apps list, find and click the Formpify Form app block. This will inject an empty Formpify container directly into your page layout. You should see a placeholder block appear in the theme preview area.

Step 8. Paste Your Form ID

With the Formpify block selected, a settings panel will appear in the right sidebar. Locate the Form ID input field (marked with a red asterisk as required). Paste your copied Form ID directly into this field.

Step 9. Watch Your Form Connect in Real-Time

The moment you paste the ID, Formpify's headless rendering engine kicks in. You will see a brief loading spinner, followed by your complete form appearing pixel-perfectly within the theme preview. The form inherits your theme's typography and spacing, ensuring a seamless, native look.

Step 10. Save & Go Live

Your beautiful form is now natively embedded and ready to collect submissions. Click the Save button in the Shopify Theme Editor to publish your changes. The form is now live on your storefront — fully responsive, SEO-friendly, and submission-ready with zero layout shifts.

Tips & Best Practices

• Multiple Forms: You can add multiple Formpify blocks to different pages. Each block uses a unique Form ID.
• Re-publishing: If you update your form design in the Visual Builder, simply Save and re-Publish. The embedded form will update automatically — no need to change the Form ID.
• Theme Compatibility: Formpify App Blocks work with all Shopify Online Store 2.0 compatible themes.
• Performance: Forms are loaded asynchronously, so they won't slow down your page load speed.