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>
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.
Best answer by OmarView original
As for the HTML i'd remove all the <p></p> so this:
Should become this:
I hope this helps
@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!
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.