How can I define fallback-content for a Klaviyo embedded form?

We are currently using Klaviyo with Shopify and noticed that in certain constellations, embedded forms fail to load. This is mostly related due to consent manager restrictions.

Now we want to define a fallback that is displayed if the Klaviyo form fails. Is there a way to achieve this?

This would be an example code:

<div class="klaviyo-form-XXXXX">
<div class="hide-on-success">
<form method="POST" action="//manage.kmail-lists.com/subscriptions/subscribe" id="email_signup">
  <input value="XXXXX" name="g" type="hidden">
  <input placeholder="Your email" id="k_id_email" name="email" value="" type="email">
  <button type="submit">Subscribe</button>
</form>
</div>
</div>

The idea is, that initially the static form is shown. Then, after Klaviyo loads, it hides the “.hide-on-success” area and displays the embedded code instead. Is this possible? Does Klaviyo have any mechanisms for this, like my hypothetical “hide-on-success”?

Page 1 / 1

OK… after some experimenting, I’ll answer the question myself :-)

After successfully loading the Klaviyo-form, a class named ‘klaviyo-form’ is added to the parent element.

So you can just add some CSS to hide content, when the form loaded:

.klaviyo-form .hide-on-success {
  display:none;
}

The complete example would look like this:

<div class="klaviyo-form-XXXXX">
<div class="hide-on-success">
<form method="POST" action="//manage.kmail-lists.com/subscriptions/subscribe" id="email_signup">
  <input value="XXXXX" name="g" type="hidden">
  <input placeholder="Your email" id="k_id_email" name="email" value="" type="email">
  <button type="submit">Subscribe</button>
</form>
</div>
</div>
<style>
.klaviyo-form .hide-on-success {
  display:none;
}
</style>

Hope this helps others, who also need a fallback.

Reply

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials

Scanning file for viruses.

This file cannot be downloaded