Skip to main content
Solved

Pop-up form not looking the same as designed on the editor

  • June 8, 2022
  • 1 reply
  • 153 views

Forum|alt.badge.img+3

Hi everyone,

 

I’ve designed a pop-up form on Klaviyo as per below (screen shoot is desktop version)

designed pop-up on desktop (klaviyo editor)

here’s the mobile version:

designed pop-up on mobile (klaviyo editor)

However, here’s what is looks like on my website:

actual pop-up on my website

Has someone an idea about what I’ve missed here?

 

Thank you

Best answer by Dov

Hi @JackDeli,

Thanks for sharing this question with us.

Typically, when a form is demonstrating different styling on your site, it means that there is CSS in the site code that is overriding the values from the form. 

You can use Google chrome's inspect tool to try to identify the line(s) of CSS that is causing this override. I’d keep an eye out for !important tags which essentially say to prioritize a certain line of CSS over another.

If you have access to a developer, I'd recommend relaying this information to them so they can look into the CSS on your site and make the necessary adjustments so it no longer impacts the integrity of the form.

If you’re still having trouble, you can contact our support team to try to locate the source of the code on your page. Just keep in mind they won’t be able to actually change any code on your site.

I hope that’s helpful.

 

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

1 reply

Dov
Forum|alt.badge.img+61
  • Klaviyo Alum
  • 1493 replies
  • Answer
  • June 8, 2022

Hi @JackDeli,

Thanks for sharing this question with us.

Typically, when a form is demonstrating different styling on your site, it means that there is CSS in the site code that is overriding the values from the form. 

You can use Google chrome's inspect tool to try to identify the line(s) of CSS that is causing this override. I’d keep an eye out for !important tags which essentially say to prioritize a certain line of CSS over another.

If you have access to a developer, I'd recommend relaying this information to them so they can look into the CSS on your site and make the necessary adjustments so it no longer impacts the integrity of the form.

If you’re still having trouble, you can contact our support team to try to locate the source of the code on your page. Just keep in mind they won’t be able to actually change any code on your site.

I hope that’s helpful.