Problem with forms on iPhone, testing with ios 11.2.2

Would you happen to be able to help with a form issue & ios iPhone?
http://www.northtexasoralsurgery.com/
If you click the "what to expect" link in the top video area or schedule a consult button at the bottom (both same popup form) it opens a form in a popup / modal. Had someone also from the forum here test with there iPhone and we get strange results on the form, it moves or closes and a cursor in a field that is not in focus.

That was a plugin "layered popups". So I tried using formcraft with its pop form thinking it was the plugin.
http://www.northtexasoralsurgery.com/test but also get the same behavior? Could it be the theme? Do you have any way to test? I will duplicate my site and try a default theme and see if that works. Any other suggestions or have you seen anything similar before?
thanks for any advice!
-George

  • Predrag Dubajic

    Hey George,

    Hope you're doing well.

    I don't have an iPhone myself but I asked my colleagues to check this out and the popups are indeed behaving strangely in both Safari and Chrome.
    It does work fine on my android phone so it's definitely something iOS specific.

    These things are sometimes hard to debug and trying with default WP theme would be a proper next step.
    If that doesn't help you can also try with your plugins disabled as well, leave active only the one that is handling the popup.

    If you want us to have a look at your staging site just let us know once it's finished and grant us support access.
    To enable support access you can follow this guide here:
    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5

    Best regards,
    Predrag

  • George

    Hi, I have disabled plugins except for my 2 form plugins and activated one of the default themes. Would you be able to check again with someones iPhone please? I was using the flatsome theme originally.

    I also created a page that has 2 links to open the forms with a brief description and you can find it here:
    http://newteethmarketing.com/osant/test/

    I have also enabled support with the wpmudev dashboard.

    thanks!!!
    -George

  • Predrag Dubajic

    Hi George,

    I have tested your new page on iPhone 6 and 7 and also used BrowserStack and tested with 6s there.
    On 6 and 7 it does look better, it doesn't jump like before when input fields are selected but the text marker is misplaced on the first form, like this:

    In browserstack however it still does jump like before but that's an emulator so it could be related to that.

    The second form does work properly though and I didn't see any weird behavior with it now.

    Best regards,
    Predrag

  • George

    So the first form still has an issue so it has to be the plugin since the theme & all other plugins are deactivated but the developer claims there is no issue.

    So how can I repair this or how can I implement a form that pops up in a modal that WILL work for iPhones? Any ideas :slight_smile: I will try disabling the plugin that creates the first form (layered popups) and leave the second form which is formcraft and re-activate my original theme. Could you then test again and see if the second form is still working if you have time please?

    If that works I can replace the "layered popups" form with the "formcraft" form on my homepage.

    http://newteethmarketing.com/osant/test/

    Thanks!

  • Predrag Dubajic

    Hi George,

    So the first form still has an issue so it has to be the plugin since the theme & all other plugins are deactivated but the developer claims there is no issue.

    That's strange, are they claiming that they can't see the issue on your site or that it's not an issue with the plugin in general?

    The other form looks good, only the close button is bit misplaced, but you should be able to sort that out with some CSS like this:

    @media (max-width: 480px) {
        html .formcraft-css .fc-form .form-page-content {
            padding: 60px 5px 5px 20px;
        }
    
        html body .fc-form-modal.fc_modal .fc_modal-dialog .fc_close {
            top: -5px;
        }
    }

    WordPress offers Custom CSS field inside Appearance > Customizer but if your theme disables this and it doesn't have its own CSS field you may wish to use a child theme or a plugin like this one for this additional CSS. That way you're protected when you come to upgrade.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.