Display Form on Your Store

After creating your form, you need to display it on your Shopify store so customers can see and use it. This guide covers all the ways to add forms to your storefront.

Method 1: Theme Editor (Recommended)

The easiest way to add a form is through Shopify’s Theme Editor.

Step 1: Open Theme Editor

1. Go to Online Store > Themes in your Shopify admin
2. Click Customize on your active theme

Step 2: Navigate to Target Page

Navigate to the page where you want to display your form:

• Homepage
• Product pages
• Collection pages
• Cart page
• Custom pages

Step 3: Add the Form Block

1. Click Add section or click on an existing section
2. Look for Qivra Form Builder in the apps section
3. Click to add it to your page

Step 4: Select Your Form

1. In the block settings, find the Form dropdown
2. Select the form you want to display
3. Adjust any additional settings (padding, margin, etc.)

Step 5: Save and Publish

1. Click Save in the top right
2. Your form is now live on your store

Method 2: Embed via Shortcode

For more flexibility, you can embed forms directly in your theme code or page content.

Using in Theme Files

Add this code to any .liquid file in your theme:

{% render 'qivra-form-builder', form_id: 'YOUR_FORM_ID' %}

Replace YOUR_FORM_ID with your actual form ID (found in the form URL when editing).

Using in Page Content

You can also add forms to regular pages:

1. Go to Online Store > Pages
2. Edit an existing page or create a new one
3. Switch to HTML view in the content editor
4. Add the embed code

Method 3: Product Page Forms

To add a form specifically to product pages:

Option A: Via Theme Editor

1. Open Theme Editor
2. Navigate to a product page
3. Add Qivra Form Builder block to the product section
4. Select your form and save

Option B: Via Theme Code

Add to your main-product.liquid or similar file:

{% render 'qivra-form-builder', form_id: 'YOUR_FORM_ID' %}

This is useful for:

• Product inquiry forms
• Customization requests
• Pre-order forms
• Warranty registration

Method 4: Dedicated Contact Page

To create a dedicated contact page with a form:

1. Go to Online Store > Pages > Add page
2. Title it “Contact Us” or similar
3. Open Theme Editor
4. Navigate to your new page
5. Add Qivra Form Builder block
6. Select your contact form
7. Save and publish

Form Trigger Options

Forms can be displayed in different ways:

Trigger Type	Description
AUTO	Form displays automatically when the page loads
BUTTON	Form appears in a popup when clicking a button
EMBEDDING	Form is embedded directly in the page content

Button Trigger Setup

1. In Form Settings, set Trigger to BUTTON
2. Customize the button text
3. When customers click the button, a popup form appears

This is great for:

• Contact forms that shouldn’t take up page space
• Forms that should appear on multiple pages
• Reducing visual clutter

Previewing Your Form

Before going live, preview how your form looks:

In Form Builder

• Use the Desktop/Mobile toggle in the builder
• Click Preview to see the full form

In Theme Editor

• Forms show a preview in the editor
• Make sure to test on both desktop and mobile views

Troubleshooting

Form Not Appearing?

1. Check form status: Make sure the form is enabled in the Forms list
2. Verify selection: Ensure the correct form is selected in Theme Editor
3. Clear cache: Sometimes browser cache prevents updates from showing
4. Check plan limits: Some forms may be locked based on your subscription

Form Looks Different Than Preview?

• Theme CSS might override form styles
• Check for conflicting styles in your theme
• Try adjusting form styling settings

Video Tutorial

Play

Related Docs

• Create Your First Form
• Form Styling
• Add Form to Product Page
• Create Contact Page