Question

Content behind an email wall (sign up forms)

  • 23 April 2024
  • 7 replies
  • 30 views

Badge

Hi, we have an outlet within our Shopify store and I want to capture emails before users enter the outlet by triggering a pop up that acts like a wall - so user has to enter email details before entry. 

I have followed the very helpful step by step process to create a custom trigger (sign up form) and pasted the code onto the relevant Shopify page but the form is not showing up. Here’s the code:

<button class="klaviyo_form_trigger">Click here</button>
<script type="text/javascript">
    document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
        window._klOnsite = window._klOnsite || []; 
        window._klOnsite.push(['openForm', 'VwTBSM']);

I have pasted it into custom liquid heading within Shopify. 

Does anyone know what I am missing as I am sure I am close to doing this. 

 


7 replies

Userlevel 7
Badge +37

Welcome to the community @VVN88 

I notice that your are missing the closing parts of the Javascript (in bold below). 

<script type="text/javascript">
    document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
        window._klOnsite = window._klOnsite || []; 
        window._klOnsite.push(['openForm', 'your form code']);
});
</script>

 
Hope that helps.

Regards

Andy

Badge

Oh thank you. That is super useful although I had included it, I just carelessly didn’t include it all in the above. Hopefully there is something else I’ve missed that someone can point out to me too. 

Userlevel 7
Badge +37

Hi @VVN88 

Have you run through this also https://help.klaviyo.com/hc/en-us/articles/115005080407 specifically the part about onsite tracking? That is required for Klaviyo tracking and forms to work.

Regards

Andy

Badge

Hi, I have thank you Andy. I’m all integrated and I can create a pop up click button but for this, I’m not looking for a new button to be created but for the pop up to appear in when a user clicks on a particular page link so like a log in. Thanks

Userlevel 7
Badge +37

Hi @VVN88 

How about a form that appears immediatly just on that url?

Regards

Andy

 

Badge

Oh yes that is a better description, yes. Klaviyo help directed me to create a custom trigger (sign up form) but if you know of some better direction that would be perfect. The guide I followed works but creates an additional button on the page rather than popping up over the page. 

Userlevel 7
Badge +37

Hi @VVN88 

OK. Here are the steps from what I understand your use-case to be.

  • Create your form as a ‘full page’
  • Under ‘targeting & behavior’’ » ‘Display’ set to ‘immediatlely’. Also ‘Click outside form to close’ and disable ‘on desktop’ and ‘on mobile’ just to be safe (that it can’t be closed)
  • Click the close icon on your form and in it’s config. set to size 0; set X color to your background colour; set X thickness to 0px; set ‘border color’ and ‘background color’ to your background color. That should mean the X close button is not visible. 
  • Under ‘targeting & behavior’’ » ‘Targeting’ set ‘Only show on certain URLs’ to the url you want this form to appear. I don’t know if you want it to appear to all visitors so review the ‘Visitors’ drop down to select your condition.
  • On the success set of your form, the ‘thank you for subscribing’ (this step has to be there - Klaviyo restriction) add a button with an action of ‘close form’. This is necessary as the x to close is not visible so they won’t be able to clear the success step without it.
  • You may want to enable ‘Don’t show again if form was submitted or if go to URL button was clicked’ under  ‘targeting & behavior’’ » ‘Display’ so that contact who submits doesn’t see the form again on a subsquent visit (though they will if they visit again ingognito or from a different uncookied device).

So, you should end up with a full-screen form that appears immediately on that target url and that can’t be closed. When they enter their details and submit, the form closes and they see your success (thank you) form content which they close to see the target url content. Test this first though!

Let me know how you get on.

Regards

Andy

Reply