Shopify Forms - Show only on specific pages

[CMcAleenan]

The Shopify Forms App allows for its pop-up forms to either show on all pages or be restricted to showing only on specific page types (e.g. Home, Products, Collections etc).

I'd like to limit a specific Shopify Form popup to show only on particular pages (not types), with the end goal of having several pop-up forms each customised to its associated page showing on several different pages.  This would allow for different emails to be sent depending on which product you were looking at and which form you submitted.

For example Product Page 1 might have a popup that states 'Join our newsletter and get more info on Product 1', while Product Page 2 has a popup that states 'Join our newsletter and get more info on Product 2'.  Those entering their details on the Product Page 1 form would receive emails about Product 1 and those entering their details on the Product Page 2 form would receive emails about Product 2.

I was hoping one solution would be to locate the script responsible for showing the popup and then wrap the popup initialization code in a conditional statement that checks if the current page is the one I want the popup to appear on.

Would this work and does anyone know where the relevant script is?  I'm using Dawn.

In addition, can the conditional statement be structured to be Form ID specific?  Not only must a pop-up only show on a specific page, but it must also only display the relevant form.

Alternatively, is there a better solution?

Any help, much appreciated.

[BSSCommerce-B2B]

Hi @CMcAleenan,

I hope you are doing well. I tested and it seems to work. (I have 2 forms apply to all pages). Here my scripts add to theme.liquid. I use when/case to specify form id if match specific url

{% if true %}
      <script>
        (() => {
          const interval = setInterval(() => {
              let formId = null;
              {% case request.path %}
                {% when 'CHANGE-YOUR-SPECIFICS-URL-HERE' %}
                formId = 'CHANGE-YOU-FORM-ID-WANT-TO-SHOW-FOR-THIS-URL';
                {% when '/products/14k-dangling-obsidian-earrings' %}
                formId = '152251';
                {% when '/products/14k-dangling-pendant-earrings-1' %}
                formId = '159831';
              {% endcase %}
              const formsToHide = document.querySelectorAll(`form-embed:not([id="app-embed-container-${formId}"])`);
              if (formsToHide.length) {
                formsToHide.forEach(item => item.style.display="none");
              }
              const formToShow = document.querySelector(`form-embed[id="app-embed-container-${formId}"]`);
                if (formToShow) {
                  formToShow.style.display="block";
                }
          }, 100);
          setTimeout(() => {
            clearInterval(interval);
          }, 10000);
        })();
      </script>
    {% endif %}

I hope this is useful to you 🤗