How to open a Klaviyo Sign Up Pop Up on Click on Link <a href="..."...><a>

[paulson1]

Hi,

I need to open a Klaviyo Sign Up Pop Up on a click even on link <a href......> ..<a>

Could you please let me what is the best option to do it?

Thanks

[rajweb]

Hey @paulson1 ,

To trigger a Klaviyo sign-up pop-up when a user clicks a link (,<a href="..."), follow these steps:

1.Create or Select a Sign-Up Form:

-In Klaviyo, create a new sign-up form or select an existing one.

-Ensure the form type is set to Popup, Flyout or Full Page. Embedded forms cannot be triggered by a click event.

2. Configure the Form's Display Settings:

-Navigate to the form's Targeting & Behaviors tab.

-Under Timming, select Only show on custom trigger. This setting ensures the form appears only when explicitly triggered.

3. Add the Trigger Code to Your Website:

Insert the following JavaScript code into your website's HTML, replacing  'YOUR_FORM_ID' with your Klaviyo form's unique ID:

<a href="#" onclick="KlaviyoSubscribe.attachToModalForm('#YOUR_FORM_ID', {delay_seconds: 0.01, hide_form_on_success: true}); return false;">Click Here</a>

This code binds the click event of the link to the Klaviyo form, ensuring the pop-up appears when the link is clicked.

Important Considerations:

1. Form ID:You can find your form's ID in the embed code provided by Klaviyo. It's typically in the format #klaviyo-form-xxxx.

2.JavaScript Loading:Ensure that Klaviyo's JavaScript library is loaded on your website. This is usually included when you integrate Klaviyo with your site.

3. Testing:After implementing the code, test the functionality across different browsers and devices to ensure compatibility.

4. By following these steps, you can effectively trigger a Klaviyo sign-up pop-up when users click a specific link on your website

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[paulson1]

Hi @rajweb 

Thank you for your reply.

Is it possible to achieve it using Shopify Forms instead of Klaviyo?

Thansks

[rajweb]

Hey @paulson1 ,

Yes, you can also achieve this using Shopify Forms instead of Klaviyo. Shopify Forms can be customized to trigger on specific actions like a button or link click, though it requires a few steps to ensure the form is shown only when the user clicks the link. Here's how:

Follow These Steps:

1. Create or Select a Shopify Form:

-In your Shopify admin, go to Marketing > Shopify Form and either create a new form or select an existing one.

-Ensure the form is set up as a  popup rather than an embedded form.

2. Set Display Option:

-Configure the form's display rules to show only on custom triggers or actions, if available.

-Some themes or apps might offer the ability to restrict the form to show only when manually triggered.

3. Insert JavaScript for the Trigger:

-To trigger the form via a click on a specific link, you’ll need to use a custom JavaScript snippet in your theme. Add the following code to your theme, usually in the theme.liquid or a JavaScript file that’s globally loaded on your site.

-Here’s a sample code snippet:

<a href="#" id="show-shopify-form">Click here to sign up!</a>

<script>
  document.getElementById('show-shopify-form').addEventListener('click', function(event) {
    event.preventDefault();
    // Trigger the Shopify form popup, replace `form_id` with your form's specific ID or method
    Shopify.designMode && window.Shopify.Form.Popup.open('form_id'); // example, adapt based on form method
  });
</script>

4. Finding the Form's ID or Method:

-Shopify Forms doesn’t always expose a simple form ID. Depending on your form setup, you may need to inspect the form’s code to find the right trigger method.

-If your theme or form app provides a custom trigger function (like Shopify.Form.popup.open() ), use that to open the form on demand. This approach may vary depending on the specific theme and form integration.

-Preview your changes on the storefront and test the form popup on the link click. Confirm it displays only when triggered by the link.

Thanks

[paulson1]

Hi @rajweb 

It will not work on the Shopify Forms the available Trigger is - Display on: First Page view, Second page view and Third Page view.

Thanks

[rajweb · Accepted solution]

Hey @paulson1 ,

You're correct—Shopify Forms currently only supports automatic display triggers like "First Page View," "Second Page View," and "Third Page View," and does not natively support custom triggers like a button or link click.

To work around this limitation, you can consider the following alternatives:

Alternative 1: Use a Different Form App with Custom Trigger Option:

Several Shopify apps allow more flexible form triggers, including click-based popups. Here are some popular options:

- Privy: Allows triggering popups with custom JavaScript, giving more control over when the form displays.

- Popup apps like Popyin Justuno, or POWR Pops Ups: These apps generally support custom triggers and more advanced display rules.

Each app has a different setup process, so refer to their documentation for implementing a click-triggered popup.

Alternative 2 : Create a Custom Form with Liquid and Javascript&colon;

If you need more control, consider creating a custom form directly in your theme. This approach requires more coding, but it gives you complete flexibility to trigger the form on a click event.

Steps to Create a Custom Popup Form in Shopify:

1. Create a New Template for the Form:

-In your Shopify admin, go to Online Store > Themes > Edit Code.

-Add a new snippet for your custom form, e.g., popup-form.liquid.

2. Add HTML and CSS for the Form:

-Add the form’s HTML structure and necessary CSS styles in popup-form.liquid.

-Include basic HTML form elements (like name, email) and a close button for the popup.

3. Add JavaScript for the Popup Logic:

-Include JavaScript to toggle the form's visibility on click. Here’s an example:

<!-- Your custom form in popup-form.liquid -->
<div id="custom-popup-form" style="display: none;">
  <div class="popup-overlay">
    <div class="popup-content">
      <button id="close-popup">X</button>
      <form action="/contact" method="post">
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" required>
        <button type="submit">Sign Up</button>
      </form>
    </div>
  </div>
</div>

<style>
  /* Basic CSS for popup styling */
  .popup-overlay { /* styles for the overlay */ }
  .popup-content { /* styles for popup content box */ }
</style>

<script>
  document.getElementById('show-popup-link').addEventListener('click', function(event) {
    event.preventDefault();
    document.getElementById('custom-popup-form').style.display = 'block';
  });
  document.getElementById('close-popup').addEventListener('click', function() {
    document.getElementById('custom-popup-form').style.display = 'none';
  });
</script>

4. Trigger the Popup on a Link Click:

Add a link to trigger the popup wherever you need it on your site:

<a href="#" id="show-popup-link">Click here to sign up!</a>

Altenative 3: Use Klaviyo or another Third-Party Tool Temporarily:

If immediate implementation is important, consider using Klaviyo temporarily if you already have it set up. This way, you can implement a clickable-trigger popup quickly until Shopify Forms potentially adds more trigger flexibility.

Thanks

[rajweb]

Thank you for your reply! I’m glad to hear that the solution worked well for you. If you need any further assistance, please don’t hesitate to reach out via email—I’d be happy to help. If you found this information helpful, a Like would be greatly appreciated!