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.