Add Form to Product Page

Adding forms to product pages allows customers to inquire about products, request customizations, or submit pre-order information. This guide shows you how to add forms specifically to product pages.

Why Add Forms to Product Pages?

Use Case	Benefit
Product Inquiries	Answer customer questions before purchase
Customization Requests	Collect custom order details
Pre-Orders	Gather information for upcoming products
Warranty Registration	Register products after purchase
Product Reviews	Collect feedback on specific products
Bulk Order Requests	Handle wholesale inquiries

Method 1: Theme Editor (Easiest)

Step 1: Open Theme Editor

1. Go to Online Store > Themes
2. Click Customize on your theme

Step 2: Navigate to Product Page

1. Use the page selector at the top
2. Choose Products > Select a product
3. Or select “Default product” for all products

Step 3: Add Form Block

1. Click on the product section or a block within it
2. Click Add block
3. Find Qivra Form Builder under Apps
4. Select it to add to your product page

Step 4: Configure the Form

1. In the block settings, select your form
2. Position the form where desired
3. Adjust layout settings
4. Save changes

Applying to All Products

To show the form on all product pages:

1. Edit “Default product” template
2. Add the form block
3. It will appear on all products using this template

Method 2: Product Template Edit

For more control, edit the product template directly.

Step 1: Edit Theme Code

1. Go to Online Store > Themes
2. Click … > Edit code
3. Find sections/main-product.liquid or similar

Step 2: Add Embed Code

Insert where you want the form:

<div class="product-form-section">
  <h3>Have Questions?</h3>
  {% render 'qivra-form-builder', form_id: 'YOUR_FORM_ID' %}
</div>

Step 3: Save and Test

1. Save the file
2. Visit a product page to verify

Method 3: Product-Specific Forms

Show different forms for different products.

Using Product Tags

{%- if product.tags contains 'customizable' -%}
  {% render 'qivra-form-builder', form_id: 'CUSTOMIZATION_FORM' %}
{%- elsif product.tags contains 'preorder' -%}
  {% render 'qivra-form-builder', form_id: 'PREORDER_FORM' %}
{%- endif -%}

Using Product Type

{%- case product.type -%}
  {%- when 'Electronics' -%}
    {% render 'qivra-form-builder', form_id: 'ELECTRONICS_FORM' %}
  {%- when 'Clothing' -%}
    {% render 'qivra-form-builder', form_id: 'CLOTHING_FORM' %}
{%- endcase -%}

Using Metafields

{%- if product.metafields.custom.show_form == true -%}
  {% render 'qivra-form-builder',
     form_id: product.metafields.custom.form_id
  %}
{%- endif -%}

Method 4: Tabbed Forms

Add forms in product page tabs.

Creating a Tab

1. Edit your product template
2. Add tab structure:

<div class="product-tabs">
  <div class="tab-buttons">
    <button class="tab-btn active" data-tab="description">Description</button>
    <button class="tab-btn" data-tab="questions">Ask a Question</button>
  </div>

  <div class="tab-content">
    <div id="description" class="tab-panel active">
      {{ product.description }}
    </div>
    <div id="questions" class="tab-panel">
      {% render 'qivra-form-builder', form_id: 'PRODUCT_INQUIRY_FORM' %}
    </div>
  </div>
</div>

Method 5: Floating Button

Add a floating “Ask Question” button.

Setup in Form Settings

1. Open your form
2. Set Trigger Type to BUTTON
3. Set Button Position to Floating
4. Set button text to “Ask a Question”

Result

• Floating button appears on product pages
• Clicking opens form in popup
• Doesn’t interfere with product content

Product Selector Field

When creating forms for product pages, use the Product Selector field.

What It Does

• Shows a searchable product dropdown
• Includes product images
• Pre-selects current product (optional)

Setting Up

1. In Form Builder, click Add Elements
2. Select Product Selector
3. Configure settings:

Setting	Description
Auto-select current product	Pre-fill with product on page
Allow multiple	Select multiple products
Show images	Display product thumbnails

Auto-Select Current Product

When enabled:

• Form automatically selects the product customer is viewing
• Customer doesn’t need to search
• Submission includes product context

Form Placement Best Practices

Recommended Positions

Position	Pros	Cons
Below description	Natural flow, high visibility	Pushes other content down
In accordion/tab	Clean layout, optional	Extra click to access
Sidebar	Doesn’t disrupt main content	May be missed on mobile
Floating button	Always accessible, no space used	Popup may annoy some users

Avoid

• Above the Add to Cart button (hurts conversion)
• Replacing product information
• Large forms that push content far down

Styling Product Page Forms

Match Product Page Style

.product-form-section {
  margin-top: 30px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.product-form-section h3 {
  margin-bottom: 15px;
}

Compact Style

For forms in limited space:

.product-form-compact .form-field {
  margin-bottom: 10px;
}

.product-form-compact .submit-button {
  width: 100%;
}

Tracking Product Form Performance

What to Track

Metric	Description
Submission rate	% of visitors who submit
By product	Which products get most inquiries
Conversion	Inquiries that lead to sales

Using Submission Data

• Identify products with common questions
• Update product descriptions to address FAQs
• Train support team on common issues

Troubleshooting

Form Not Showing

1. Check if form is enabled
2. Verify correct placement in template
3. Clear cache and test

Product Not Auto-Selecting

1. Enable “Auto-select current product” in field settings
2. Ensure Product Selector field is added
3. Check for JavaScript errors

Mobile Issues

1. Test on actual mobile devices
2. Ensure form is responsive
3. Consider button trigger for mobile

Video Tutorial

Play

Related Docs

• Add Form via Theme Editor
• Form Trigger Options
• Field Types Reference