I am using a 2-Step form currently. On Step 1 you must put in your name and email address, then you put the actually payment information on Step 2.
On mobile devices, when you go to type in your opt-in information on Step 1, it zooms in to make the edges of the text boxes (where you write) to match with the width of your phone screen.
The problem is, once you move on to Step 2 it REMAINS zoomed in and this makes the section where you put in your payment information look messed up - UNLESS you manually zoom out using your two fingers on the screen.
This is severely negatively impacting my conversion rate as it just appears “scammy” to potential customers.
I have tried everything to fix this including playing with the margins.
You can add the following code into your Funnel > Settings > Custom Codes > HEAD or Page Editor > Custom Codes > Head HTML:
<meta meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Drawback; is it disables zooming completely and iOS Safari ignores that code completely.
Font size of 16px minimum
The better solution is to make sure your input fields have a font-size of 16px at least. This will prevent most or all browsers from zooming into the inputs, allowing a better experience overall.
Ideally, I think we should have some sort of feature to zoom out a page back into its normal size once you switch to step 2.