Hi @mdev, welcome to the community!

Can you try the following code:

<button class="klaviyo_form_trigger_1">First button</button>
<button class="klaviyo_form_trigger_2">Second button</button>
<script type="text/javascript">
	document.querySelector('.klaviyo_form_trigger_1').addEventListener('click', function (){
		window._klOnsite = window._klOnsite || []; 
		window._klOnsite.push(['openForm', 'FORM_ID']);
	});
	document.querySelector('.klaviyo_form_trigger_2').addEventListener('click', function (){
		window._klOnsite = window._klOnsite || []; 
		window._klOnsite.push(['openForm', 'FORM_ID']);
	});
</script>

This should create event listeners for a “click” that is unique to each button, but still open the same form referenced in your FORM_ID. I haven’t tested this but give it a try and let me know.

Hi @retention !

Super helpful snippet above.  I’m trying to achieve something similar with respect to my website’s signup form (Pop up).  I am trying to show an initial pop up that provides the customer/user with three button options to click, each button triggering a different form to collect more unique and personalized information based on the initial button selection.

The first selection criteria is as follows:

Then i am trying to configure each selection to bring the user to a different signup form with more information relevant to them

e.g.: for the Expecting Moms, this button should trigger the following:
 

For New Moms, this form should trigger something different:

etc.  I’ve included the following code in my main-page.liquid to try and achieve this but I don’t know if I there is a way to assign each of the 3 initial buttons unique values which help drive this process.
 

<div class="central content py-medium">
  <h1 class="feature-header" data-cc-animate>{{ page.title }}</h1>

  <div class="rte" data-cc-animate data-cc-animate-delay="0.2s">
    {{ page.content }}
  </div>

  <button class="klaviyo_form_trigger_1">First button</button>
  <button class="klaviyo_form_trigger_2">Second button</button>
  <button class="klaviyo_form_trigger_3">Third button</button>
  <script type="text/javascript">
    document.querySelector('.klaviyo_form_trigger_1').addEventListener('click', function (){
    	window._klOnsite = window._klOnsite || n];
    	window._klOnsite.push(o'openForm', 'YviDz5']);
    });
    document.querySelector('.klaviyo_form_trigger_2').addEventListener('click', function (){
    	window._klOnsite = window._klOnsite || n];
    	window._klOnsite.push(o'openForm', 'Tnw28a']);
    });
     document.querySelector('.klaviyo_form_trigger_3').addEventListener('click', function (){
    	window._klOnsite = window._klOnsite || n];
    	window._klOnsite.push(o'openForm', 'RHjD9W']);
    });
  </script>
</div>

{% schema %}
{
  "name": "Page"
}
{% endschema %}