Embed Forms On WooCommerce

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

  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 WooCommerce, 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 WooCommerce

Simply copy and paste this code into the desired location on your WooCommerce website. Steps below
    1.  Log in to WordPress and select your site.
    2. In the left-side navigation bar, go to Pages or Products.


    3. Edit an existing page/product, or create a New Page (for example, "Warranty Page").


    4. In the editor, click on the + Add Block button and choose Custom HTML


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


    6.  Click Update or Publish to save your changes.



    Your embedded form is now active on your WooCommerce site!



    FAQ

    1. Can I embed the form on any page of my WooCommerce website?

    Yes, you can embed the form on any page or product page by adding a Custom HTML block and pasting the iFrame code.

    2. Will the form work on both desktop and mobile devices?

    Yes, the iFrame is responsive and will automatically adjust to fit mobile, tablet, and desktop screens.

    3. Do I need any plugin to embed the form?

    No plugin is required. WooCommerce/WordPress already supports embedding custom HTML through the block editor.

    4. What should I do if the form is not visible on the page?

    Ensure that:

    • The embed URL is correct.

    • The HTML block is properly saved.

    • There are no page caching issues (you may need to clear cache).

    5. Can I change the height of the form?

    Yes, you can adjust the iFrame height by modifying the height="800px" value in the embed code.

    6. Will the form work if my website has a password or is not live?

    Yes, the form will load as long as the iFrame URL is correct and accessible.

    7. Can I track form submissions?

    Yes, all submissions are saved in your Dyrect Client Portal under Form Entries or Warranty Registrations.

      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 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 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 ...