Embed Form via Shortcode

For advanced users who want more control over form placement, you can embed forms directly into your theme code using shortcodes.

What is a Shortcode?

A shortcode is a simple HTML snippet that you can place in your theme files to display a form. It tells Qivra Form Builder where to render your form on the storefront.

Prerequisites

Before embedding, make sure the Qivra Form App Embed is enabled in your theme:

1. Go to Online Store > Themes
2. Click Customize on your active theme
3. In the theme editor, go to App embeds in the sidebar
4. Enable Qivra Form Builder
5. Save the changes

⚠️ Important: Forms will not display if the App Embed is disabled.

Getting Your Embed Code

Step 1: Go to Form List

1. Open Qivra Form Builder from your Shopify Admin
2. Navigate to Forms section
3. You will see a list of all your forms

Step 2: Get Embed Code

1. Find the form you want to embed
2. Click the code icon (</>) in the Actions column
3. A modal will appear with your embed code
4. The code is automatically copied to your clipboard!

What You’ll See

The embed code looks like this:

<!-- Qivra Form Builder - Form: Contact Us -->
<div id="qivra-form-builder-block-abc123" class="qivra-form-builder-block"></div>

The modal also shows:

• Block ID: A unique identifier for this form instance
• Copy button: To copy the code again if needed

Embedding Methods

Method 1: Theme Liquid Files (Recommended)

Add forms directly to your theme’s .liquid files for permanent placement.

Step-by-Step:

1. Go to Online Store > Themes
2. Click … next to your theme and select Edit code
3. Navigate to the file where you want the form (see Common Locations below)
4. Paste the embed code where you want the form to appear
5. Click Save

Common Locations:

Location	File	Best For
All pages	theme.liquid (Layout folder)	Global forms like newsletter, chat
Product pages	main-product.liquid (Sections folder)	Product inquiry, customization forms
Cart page	main-cart.liquid (Sections folder)	Gift wrap, special instructions
Blog posts	article.liquid (Sections folder)	Feedback, comments forms
Collection pages	collection.liquid (Sections folder)	Category-specific forms
Contact page	page.contact.liquid (Templates folder)	Contact forms

Example: Add to Product Page

1. Open sections/main-product.liquid
2. Find where you want the form (e.g., after product description)
3. Paste your embed code:

<div class="product-form-wrapper">
  <!-- Your existing product content -->

  <!-- Qivra Form Builder - Form: Product Inquiry -->
  <div id="qivra-form-builder-block-abc123" class="qivra-form-builder-block"></div>
</div>

Example: Add to All Pages (Global)

1. Open layout/theme.liquid
2. Find the closing </body> tag
3. Paste your embed code just before it:

  <!-- Qivra Form Builder - Form: Newsletter -->
  <div id="qivra-form-builder-block-xyz789" class="qivra-form-builder-block"></div>
</body>
</html>

Method 2: Conditional Display

Show forms only on specific conditions using Liquid:

Show on Specific Product Type

{%- if product.type == 'Custom Product' -%}
  <!-- Qivra Form Builder - Form: Custom Order -->
  <div id="qivra-form-builder-block-abc123" class="qivra-form-builder-block"></div>
{%- endif -%}

Show on Specific Page

{%- if page.handle == 'contact' -%}
  <!-- Qivra Form Builder - Form: Contact -->
  <div id="qivra-form-builder-block-def456" class="qivra-form-builder-block"></div>
{%- endif -%}

Show Based on Product Tag

{%- if product.tags contains 'preorder' -%}
  <!-- Qivra Form Builder - Form: Pre-order -->
  <div id="qivra-form-builder-block-ghi789" class="qivra-form-builder-block"></div>
{%- endif -%}

Method 3: Multiple Forms

Display different forms based on conditions:

{%- case product.type -%}
  {%- when 'Electronics' -%}
    <!-- Qivra Form Builder - Form: Electronics Inquiry -->
    <div id="qivra-form-builder-block-elec123" class="qivra-form-builder-block"></div>
  {%- when 'Clothing' -%}
    <!-- Qivra Form Builder - Form: Size Guide -->
    <div id="qivra-form-builder-block-size456" class="qivra-form-builder-block"></div>
  {%- else -%}
    <!-- Qivra Form Builder - Form: General Inquiry -->
    <div id="qivra-form-builder-block-gen789" class="qivra-form-builder-block"></div>
{%- endcase -%}

Styling Embedded Forms

Custom CSS

Add custom styles to match your theme:

/* In your theme's CSS file or inside <style> tags */

.qivra-form-builder-block {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
}

/* Form container styling */
.qivra-form-builder-block form {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 24px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .qivra-form-builder-block {
    padding: 15px;
    margin: 10px;
  }
}

Inline Styling

You can also add inline styles to the wrapper:

<div
  id="qivra-form-builder-block-abc123"
  class="qivra-form-builder-block"
  style="max-width: 500px; margin: 20px auto;"
></div>

Troubleshooting

Form Not Appearing

1. Check App Embed: Ensure Qivra Form App Embed is enabled in Theme Editor
2. Verify code placement: Make sure the embed code is in the correct file
3. Clear cache: Clear your browser and Shopify cache
4. Check form status: The form must be enabled in the app
5. Check block ID: Ensure the block ID matches what was generated

Form Shows but Doesn’t Work

1. Check browser console for JavaScript errors
2. Ensure no conflicts with other apps
3. Verify the form is properly configured in the app

Styling Issues

1. Theme CSS may override form styles
2. Use more specific CSS selectors
3. Add !important if necessary to override theme styles

Best Practices

Performance

• Don’t embed too many forms on one page
• Place forms strategically to avoid cluttering

Maintainability

• Add comments above embed codes for clarity
• Keep track of which forms are embedded where
• Document any custom modifications

User Experience

• Test forms on both desktop and mobile
• Ensure forms are accessible
• Place forms in logical locations

Video Tutorial

Play

Related Docs

• Add Form via Theme Editor
• Form Trigger Options
• Form Styling
• Enable App Embed