Skip to main content
Solved

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

  • August 13, 2024
  • 1 reply
  • 56 views

Forum|alt.badge.img

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”?

Best answer by PatrickHeck

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.

View original
Did this topic or the replies in the thread help you find an answer to your question?

1 reply

Forum|alt.badge.img
  • Author
  • Contributor I
  • 2 replies
  • Answer
  • August 15, 2024

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.