Active Contributor I

Solved

Embedded Mobile Form isn't diplaying

Forum|Forum|4 years ago
June 13, 2022
3 replies
1266 views

Hi

I’ve created an embedded sign up form for my Shopify site.

The desktop view is fine but doesn’t look good on mobile as the boxes are too small.

So I created another form for mobile view, and stacked the boxes. I’ve copied both codes into my html box, but when I preview in mobile, the desktop form is showing.

Is this because

I haven’t puiblished the theme yet
I’m previewing mobile view on a desktop
I’ve done something wrong

This is my custom html

<p>Enter your email to go into our monthly draw.</p>
<p>Don't worry, our dogs don't get spam and neither will you</p>
<p></p><div class="klaviyo-form-Wr5QWY"></div><p></p><p></p><div class="klaviyo-form-R4iziZ"></div><p></p>

mobile form in Klaviyo (ignore the image behind, also using on landing page which is also not displaying stacked on mobile

Thank you for any help - given nearly 80% of my traffic is on mobile, the form needs to render correctly - it seems crazy that we have to even create separate mobile forms now.

This topic has been closed for replies.

Best answer by Omar

@Bonza Dog Treats Not sure if this helps but some troubleshooting things I'd probably look at

Make sure both forms are selected to display for only desktop or mobile
For the Mobile view make sure you've changed the settings and test with 100% width
For troubleshooting purposes I'd recommend only try testing with the mobile form html codes first making sure it's displaying before adding the desktop version. (make sure you targetting is mobile only - see screenshot below)
Make sure you're adding the code in the html view of the editor
Use developer tools (if you're handy) to check if nothing is overruling the styling

As for the HTML i'd remove all the <p></p> so this:

<p></p><div class="klaviyo-form-Wr5QWY"></div><p></p><p></p><div class="klaviyo-form-R4iziZ"></div><p></p>

Should become this:

<div class="klaviyo-form-Wr5QWY"></div>
<div class="klaviyo-form-R4iziZ"></div>

I hope this helps

Omar Lovert

Polaris Growth

OmarAnswer

2025 Champion

@Bonza Dog Treats Not sure if this helps but some troubleshooting things I'd probably look at

Make sure both forms are selected to display for only desktop or mobile
For the Mobile view make sure you've changed the settings and test with 100% width
For troubleshooting purposes I'd recommend only try testing with the mobile form html codes first making sure it's displaying before adding the desktop version. (make sure you targetting is mobile only - see screenshot below)
Make sure you're adding the code in the html view of the editor
Use developer tools (if you're handy) to check if nothing is overruling the styling

As for the HTML i'd remove all the <p></p> so this:

<p></p><div class="klaviyo-form-Wr5QWY"></div><p></p><p></p><div class="klaviyo-form-R4iziZ"></div><p></p>

Should become this:

<div class="klaviyo-form-Wr5QWY"></div>
<div class="klaviyo-form-R4iziZ"></div>

I hope this helps

Omar Lovert

Polaris Growth

Helping E-commerce brands maximize Lifetime Value & Profits with Klaviyo, CRO & CVO - Get your free Audit - https://link.polarisgrowth.com/free-audit

Taylor Tarpley

Community Manager

Hi @Bonza Dog Treats,

Thanks for sharing your question with us! Love your website!

Definitely understand wanting to fix this error if 80% of your business’s traffic is on mobile. While we can’t troubleshoot custom coding, I would recommend orienting your mobile view form to the left, and stacking only box on top of each other in one column to help with the display. Additionally, it’s typically best practice to only use an embed form for email signups. You could additionally ask for this added information in a popup or flyout form that wouldn’t have the issue or width or room and are the options more users use to collect additional properties about a user like their dog’s name and birthday. You could also ask for this additional information in an email vs a form.

However, if you still want to obtain this data in an embed from through custom coding, I would reach out to an awesome Klaviyo Partner who would be more than happy to help work with you to find a solution!

Thanks for participating in the Community!

-Taylor

B

Bonza Dog TreatsAuthor

Active Contributor I

@Omar

Thanks for your help - I did have the devices set up correctly. Maybe the extra code in the html was a problem. I’ve just tested it on my live site and now stacking correctly on mobile. Hopefully when I publish the new theme it will also render correctly there. Appreciate your help.

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials