Publishing your forms

#Publishing your forms

Once you've built a form in the form builder, the next step is getting it in front of your customers. Publishing makes your form live on your Shopify storefront — whether that's your homepage, a product page, or any other page in your store.

This guide walks you through everything you need to know about publishing, display modes, and managing where your forms appear.

#How publishing works

Form Builder uses Shopify's built-in theme extension system to display forms on your storefront. When you publish a form, the app syncs your form data to your Shopify store as a metafield. The theme extension then reads that data and renders your form on the correct page — no manual code editing required.

Here's the basic flow:

1. You build your form in the form builder.
2. You choose where to publish (homepage, product page, or a specific page).
3. The app syncs your form data to Shopify.
4. The theme extension picks up the form and displays it on the right page.

Auto-create on publish: If you haven't saved your form yet and click "Publish," the app will automatically save (create) your form first and then publish it. You don't need to save separately — publishing handles it all in one step.

#Where you can publish

You can publish a form to three types of locations:

When you click the Publish button in the form builder, you'll see a list of available pages and products from your store. Select the location you want, and the app takes care of the rest.

#One form per page

To keep your storefront clean and avoid conflicts, Form Builder enforces a one-form-per-page rule. If you try to publish a form to a page that already has a form assigned, the app will let you know there's a conflict and block the duplicate.

If you want to change which form appears on a page, unpublish the existing form first, then publish the new one.

#Unpublishing forms

When you unpublish a form, the app removes the metafield from Shopify and the form disappears from your storefront immediately. The form itself isn't deleted — it's still saved in your account and can be republished at any time.

You can unpublish a form from the form builder by toggling its publish status or from the forms list.

#Display modes

Form Builder gives you three ways to display your forms on the storefront. You can choose the display mode in the Appearance tab of the form builder.

Default (inline)

The form renders directly on the page, inline with your other content. This is the standard option for contact forms, order forms, surveys, and most use cases.

• The form sits in the normal page flow.
• It's visible as soon as the page loads.
• Best for: Contact pages, landing pages, product feedback forms.

Float (floating button)

A small floating button appears on the page. When a customer clicks it (or a trigger condition is met), a form panel slides in from the side.

• The button stays fixed on screen as the customer scrolls.
• You can set the position of the button (see position settings below).
• Trigger conditions can auto-open the form panel.
• Best for: Feedback widgets, quick surveys, lead capture without interrupting browsing.

Popup (modal)

The form appears as a centered modal overlay on top of the page content. The popup can be triggered automatically based on conditions you set, or the customer can trigger it manually.

• A backdrop dims the rest of the page.
• The form is front and center — hard to miss.
• Trigger conditions control when the popup appears.
• Best for: Exit-intent offers, timed promotions, newsletter signups, discount code captures.

#Trigger conditions for Float and Popup

When you use the Float or Popup display mode, you can configure automatic trigger conditions that control when the form appears. These conditions let you target the right moment in your customer's browsing session.

Scroll depth

The form appears after the customer scrolls a certain percentage down the page. For example, if you set scroll depth to 50%, the form triggers once the customer reaches the halfway point.

This is great for catching engaged visitors who are actively reading your content.

Time delay

The form appears after the customer has been on the page for a set number of seconds. For instance, a 5-second delay gives visitors a moment to orient themselves before showing a form.

Use this for welcome offers, newsletter signups, or any form that shouldn't appear the instant someone lands on the page.

Exit intent

The form appears when the customer's mouse moves toward the browser's close button or address bar — a signal they may be about to leave the page. This only works on desktop browsers.

Exit intent is ideal for last-chance offers, discount codes, or feedback requests ("Before you go, tell us why you're leaving").

#Position settings

For Float and Popup display modes, you can choose where the form (or its trigger button) appears on screen. There are 9 position options arranged in a grid:

For Float mode, the position controls where the floating button sits on the page. For Popup mode, the position affects where the modal appears on screen.

Choose a position that works with your store's design and doesn't cover important content like navigation or the cart button.

#Theme extension and metafield sync

Behind the scenes, Form Builder uses Shopify's theme app extension to render forms. Here's what happens technically:

• When you publish a form, the app stores the complete form configuration as a metafield under the cruxtabFormBuilder namespace.
• The theme extension (a Liquid block) reads all your published forms from these metafields.
• It checks the current page context (homepage, product page, or specific page) and renders only the matching form.
• All styling, field types, multi-page navigation, and conditional logic are handled by the theme extension automatically.

You don't need to edit your theme code. The extension integrates seamlessly with your existing Shopify theme.

#Tips for publishing

• Preview before publishing. Use the live preview in the form builder to see exactly how your form will look before it goes live.
• Check your display mode. If your form isn't showing up, make sure you've selected the right display mode and position for your use case.
• One form per page. Remember the conflict rule — unpublish an existing form before assigning a new one to the same page.
• Test trigger conditions. If you're using Float or Popup mode, visit your storefront to test that scroll depth, time delay, or exit intent triggers work the way you expect.
• Unpublish to pause. If you need to temporarily remove a form from your storefront, unpublish it rather than deleting it. You can always republish later.