Embed Forms on Shopify

Embed Forms on Shopify



Embedding forms in your Shopify store can enhance customer interaction by collecting feedback, generating leads, and offering support. Here’s a step-by-step guide to embedding forms in your Shopify store.

1. Generate Form URL

  1. Login to your Dyrect Client portal
  2. In the sidebar, click on Form -> Configurations 
  3. Choose Product Registration Form
  4. Modify Form Fields and Content
  5. Click on Publish

  6. Copy embed URL

Now your form is created and you can embed it in shopify.

2. Generate iFrame

To embed your form in Shopify, you need to generate an embed code. You can use the following code or generate the embed code through any iframe generator. Sample below

  1. <iframe src="https://eudemo.dev.dyrect.co/beta/user/forms/warranty_registration?brand_id=66585f1356947b63aae30615" style="border: 0px #ffffff none;" name="myIframe" height="800px" width="100%" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" allowfullscreen=""></iframe>.

Info
Steps to generate iframe embed URL:

  1. Replace [Form Embed URL] with the URL of the form you have created
  2. Copy the modified code and embed it in your Shopify site.

3. Embed on your Shopify store

Simply copy and paste this code into the desired location on your Shopify site. Steps below
  1. Log in to Shopify and select your store.
  2. In the leftside navigation bar, Go to Online Store > Pages
  3. Edit existing page or create a New Page like "Register your Product" . 
  4. Under Content Section, click the Show HTML button within the page editor.












5. Paste in your embed code in the location where you’d like it to appear on the page.













6. Click Save -> Click on View page, to view the page on your Live Site (custom HTML is not visible in the page editor

Sample Embed:

Your embedded form is now active on your Shopify site (Password - hello123)


FAQ

1. Will the form automatically adjust to different screen sizes?

Yes, the iFrame is responsive because the width is set to 100%, so it will adjust according to the device screen.

2. Can I change the height of the embedded form?

Yes, you can modify the height="800px" value in the iFrame code to increase or decrease the height based on your form length.

3. Do I need any Shopify app to embed the form?

No, you can embed the form directly using the iFrame code—no additional app is required.

4. Can I embed the form on multiple pages?

Yes, the same iFrame code can be used across multiple pages within the same store.

5. What if the form is not loading on Shopify?

Ensure that:

  • The Form URL is correct

  • The form is published in the Dyrect portal

  • The iFrame code is pasted in the HTML mode of the Shopify editor

6. Can I style the embedded form?

Basic styling like height, width, border, and scrolling can be adjusted through iFrame attributes. For advanced design changes, updates must be done inside the Dyrect Form Builder.

7. Will changes made in Dyrect automatically update on Shopify?

Yes. Any modification you make to the form fields or content in your Dyrect portal will automatically reflect on the embedded form in Shopify.

8. Can customers submit the form without leaving the website?

Absolutely. The iFrame loads the full form inside your Shopify page, so customers complete and submit the form without redirecting to another site.

    Need Assistance?

    If you require Dyrect to assist you with an integration, you can do so by following these steps:

    1. Create a support ticket by submitting a form here or email us at support@dyrect.co
      1. A support will reach out to you to request access to your Shopify store.


      Schedule a Personalize Demo

      Book your 30 minutes Personalised Demo with our Onboarding and Solutions Expert

        • Related Articles

        • Embed Forms On WooCommerce

          Embedding forms in your Shopify store can enhance customer interaction by collecting feedback, generating leads, and offering support. Here’s a step-by-step guide to embedding forms in your Shopify store 1. Generate Form URL Login to your Dyrect ...

        • Installation Guide - Shopify

          In this section we'll review what steps we need to take to get started with our Shopify integration ? Download our Shopify App here! https://apps.shopify.com/dyrect-warranty-registrations Overview In this guide we will review what to expect during ...

        • Shopify Store Setup Using Dyrect – Installation & Account Setup Guide

          Overview This document provides a clear and concise overview of how to install the Dyrect – Warranty Registration & Claims app on a Shopify store and complete the initial account setup. It is intended for merchants who want to enable warranty ...