Issue with IOS not seeing button class with a HTML embed

[Andrew_Nalder]

As you can see below there are 2 images taken from my Iphone. The class for the button is the same but the the add to cart button is in a html embed as I am using Foxycart the code is, input class=“cta-button” type=“submit” value=“Add To Cart”
As you can see it loses the class on a IOS device but it is fine on my mac browsing in crome.
here is the site flowerpop.webflow.io
Its driving me nuts trying to fix this!!
Any thoughts any one?
Thanks in advance
Andrew

[bart (Bartosz Kustra)]

Hey @Andrew_Nalder

I’ve been looking into this one for quite a while now trying to understand what is going on in the background… iOS Safari DevTools are showing that there is no other class nor style attached to the button:

The only thing that forces me to think this is a Design issue rather than a bug is that you have an <input> field inside of an anchor <a> which is not a good thing to have. Instead of your current embed, please try the following:

<a href="..." class="testbutton">Add to cart</a>

This should still work as a link for your cart. Make sure to style it properly after that - give it display: inline-block; and you should be good to go

You can see how I did that on the video: http://quick.as/r7yual7v

Let me know if that works for you!
Bart

[Andrew_Nalder]

Thanks Bart,
That did the trick on the short version of the button, thanks sooooo much for that it was driving me nuts :-). I tried to remove the input part of the button with all the radio buttons and I couldn’t get the button to work then. Here is the link to a page with the radio buttons. http://flowerpop.webflow.io/products/raspberry-ripple Thanks heaps for your help I am looking to go live end of play Friday so we are almost there

[foxy (Foxy.io)]

Hi @Andrew_Nalder.
For products that don’t have options, you could conditionally show an html embed that just uses a product link rather than a form. Like this:

<a class="cta-button" href="https://flowerpopfinal.foxycart.com/cart?name=Turkish Delight Trio&price=90" style="display: inline-block; margin-top;30px">Add to cart</a>

Very similar to what you have now, but the conditional html embed won’t need any form html. Just the link. Let me know if you run into any other issues.

Thanks,
Josh

[Andrew_Nalder]

Thanks Bart, That worked on all of the buttons that were the short form version of the add to cart.
My problem now is this long version I have which is held in a form, if I remove the input part the button will not work. Any ideas how to resolve.
Thanks heaps

Andrew Nalder
ajnalder@gmail.com