I’m using the Klaviyo Wordpress plugin to connect our website to our Klaviyo account. We have a Klaviyo sign up form embedded in the footer via Elementor Pro which works fine. I’m now trying to design a newsletter popup form with Elementor Pro popups however the form isn’t displaying inside the popup. I can see the element inside the DOM but if I give it height using CSS, nothing more appears, just empty space. I’m using Firefox on MacOS. Please help!
Best answer by Brian Turcotte
View original
+36
Hi
This is likely being caused by conflicting CSS between the Klaviyo form and the Elementor form. Also, may I ask if by “Klaviyo-Wordpress plugin”, you mean WooCommerce?
Although Klaviyo integrates with WooCommerce, Elementor is an additional third-party plugin and may interfere with the integration in a way that cannot be remedied via Klaviyo.
That said, I think it could be more efficient to re-create this entire popup form in Klaviyo, which could be more effective than embedding a Klaviyo form within an Elementor popup. The style and format of the form you shared could likely be replicated near-exactly with Klaviyo’s sign-up form builder, and that would likely eliminate the conflicting CSS. Here are some helpful links and documentation, should you choose to go that route:
I hope this helps, and thanks for using the Community!
- Brian
Thank you so much for your speedy reply.
By Klaviyo Wordpress plugin I mean this one. We’re not using Woocommerce, just Elementor Pro.
As for the form, I did actually create this inside of our Klaviyo account. The form is then embedded into the Elementor popup via the form ID. See screenshot attached.
Is there an alternative way to do this in Wordpress? I tried pasting the HTML directly but this doesn’t appear either. Since the element doesn’t appear in the DOM, this seems like more than a CSS issue to me?
+36
Hi
May I ask if there’s a reason why you are opting to embed a Klaviyo form in an Elementor pop-up, rather than just creating a single Klaviyo pop-up form (that won’t require two forms and an embed)? The pop-up action will still work the same, and you won’t have to manage two different forms on different platforms.
Additionally, this would allow you to eliminate the Elementor form’s CSS as the potential cause of the issue.
In the meantime, here is our official Help Center article about troubleshooting sign-up forms, so as a next step I’d recommend to follow the steps mentioned here:
Best,
Brian
Hi
I am trying to embed the Klaviyo form into the popup I designed with Elementor Pro. This is so I can control the design of the popup in great detail and make sure it looks on brand. This popup is just an Elementor component that pops out according to the conditions I set with Elementor. The popup works, it’s just the form that doesn’t.
We have another Klaviyo form embed in the footer of the site that displays fine.
I’m not sure how “the pop-up action will still work the same” since I’ve only designed a form in Klaviyo, not a popup. And currenly I don’t have to “manage two different forms on different platforms”, it’s just one form (two if you include the footer) on Klaviyo, and an embed (via API) on Elementor. If I need to change the form, I do it on Klaviyo.
Is there another way to do this without using Elementor Pro? Bear in mind our whole site is designed with Elementor.
+36
Hi
My apologies if I misunderstood! I only meant to suggest that, if you wanted to, you could create a Klaviyo popup form instead of an embed form, and control both the form and the popup rules all within one place in Klaviyo - eliminating the extra steps of creating a popup in Elementor and embedding the form in that.
The reason I suggest this is because Elementor does not natively integrate with Klaviyo, and is considered a third-party app. Third-party apps often interfere with integrations in ways that are not visible from Klaviyo’s side, and the issue you describe is likely due to the fact that Elementor’s popup code is interfering with the Klaviyo form.
This other Community member had a similar experience and decided to use Klaviyo’s form builder instead:
In short, this issue is not able to be remedied from Klaviyo’s side since there is no native integration with Elementor, and it’s effects on embed forms are independent of the Klaviyo integration with WordPress. I was able to find Elementor’s support site here, if you’re interested:
I hope this helps to clarify, and thanks for using the Community!
Best,
Brian
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.
