Mobile Safari is cutting off submit button

  • Profile Image
    Sean_McGown
    Asked on January 06, 2022 at 08:01 AM

    Researched this behavior and it seems that mobile safari is still cutting off the bottom of the iframe when embedding. If there is a solution to this, please let me know. To see the behavior, visit:

    https://www.luxoffices.com/cancel-services/

    on mobile Safari.

    Things I've tried:

    • Removing JS from iframe embed
    • Just using the script embed method
    • Embedding the entire source code (errored on GoDaddy)
    • Declaring a fixed height in the iframe style

    Any help is appreciated. Otherwise, I'm also recreating this in Contact Form 7 right now and we can go that route.

    Sean

  • Profile Image
    Amos_W
    Answered on January 06, 2022 at 08:37 AM

    Hey there,

    I've tried to access that form on my iPhone and I couldn't replicate the issue

    1641476044_61d6efcc2f61d_

    Although I think I see what you mean,

    When you try to scroll while filling a field, the screen sort of bounce back,

    Is that the issue that you're experiencing?

    Please let us know

    Thank you

  • Profile Image
    Sean_McGown
    Answered on January 06, 2022 at 08:40 AM

    No, that's not what I'm getting. If you view it in Safari, the submit button is cut off. Viewing in any other browser is fine. The behavior is only in mobile safari.

  • Profile Image
    Sean_McGown
    Answered on January 06, 2022 at 08:42 AM

    1641476546_61d6f1c2e205c_IMG_2199.jpeg

  • Profile Image
    ashwin_d
    Answered on January 06, 2022 at 09:02 AM

    Please inject the following custom CSS code in your form and see if that solves your issue in mobile view:

    @media only screen and (max-device-width: 480px) {
    .form-line {
      margin-top: 2px !important;
      margin-bottom: 2px !important;
      padding-top: 5px !important;
      padding-bottom: 5px !important;
    }
    }

    The following guide should help you how to inject custom CSS code in form: https://www.jotform.com/help/117-how-to-inject-custom-css-codes/

    Hope this helps.

    Do get back to us if you have any questions.

  • Profile Image
    Sean_McGown
    Answered on January 06, 2022 at 10:31 AM

    Worked brilliantly! Thanks for the tip on that code.