Solved

Embedded Mobile Form isn't diplaying

  • 13 June 2022
  • 3 replies
  • 655 views

Userlevel 1
Badge +3

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

  1. I haven’t puiblished the theme yet
  2. I’m previewing mobile view on a desktop
  3. 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>

desktop view
mobile view
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. 

icon

Best answer by Omar 13 June 2022, 23:10

View original

3 replies

Userlevel 7
Badge +43

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

  1. Make sure both forms are selected to display for only desktop or mobile
  2. For the Mobile view make sure you've changed the settings and test with 100% width
  3. 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)
  4. Make sure you're adding the code in the html view of the editor
  5. 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

Userlevel 7
Badge +60

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 

Userlevel 1
Badge +3

@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.

Reply