Submit button is getting cut off on mobile devices

  • Profile Image
    Charity Kirk 
    Asked on August 02, 2019 at 06:16 PM

    Go to this page https://www.mrpickles.com/contact/ and select "General Inquiries" on the right side.  Shrink your screen down or use a mobile phone.

    You will see on a small width the submit button is cut off.  I've adjusted the heights of the containing elements on my end but the height of the jotform iframe is being set by your javascript I believe.  Also, being this isn't a problem on larger widths I think the jotform js mobile calculations are off. And it's an issue with a number of other forms you can select on that page.

  • Profile Image
    VincentJay
    Answered on August 02, 2019 at 06:43 PM

    I checked the website where the form is embedded using a mobile device and I cannot see the Submit button. 

    Please re-embed the form using the iFrame Method. Here's a guide: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    After that, let us know if the issue still persists. Thank you.

  • Profile Image
    Charity Kirk 
    Answered on August 19, 2019 at 04:43 PM
    Hi, I'm following up about the suggestion for using the iframe method due
    to the submit button being cut off at small widths.
    I've update the "Restaurant Feedback" form on the dev site and...
    The iframe is worse (http://mrpicklesdev.wpengine.com/contact/) than using
    just the jotform script: https://www.mrpickles.com/contact/
    The height issue (where the submit button is cut off due to the script
    setting the height) only appears when the iframe width gets below 480px
    Charity
    ...
  • Profile Image
    zuritapia
    Answered on August 19, 2019 at 06:08 PM

    Hi Charity!

    I was able to replicate the issue on my end as seen in the screencast below:

    1566252464iframe%20issue.gif

    To further test your form can you please provide us with the URL to your form? 

  • Profile Image
    Charity Kirk 
    Answered on August 19, 2019 at 06:43 PM
    https://form.jotform.com/90338480029154
    ...
  • Profile Image
    VincentJay
    Answered on August 19, 2019 at 07:10 PM

    Could you please try re-embedding the form again using the code below?

    <iframe

    id="JotFormIFrame-90338480029154"

    title="Customer Comments"

    onload="window.parent.scrollTo(0,0)"

    allowtransparency="true"

    allowfullscreen="true"

    allow="geolocation; microphone; camera"

    src="https://form.jotform.com/90338480029154"

    frameborder="0"

    style="width: 1px;

    min-width: 100%;

    height:539px;

    border:none;"

    scrolling="no">

    </iframe>

    Please try adjusting the height to fix the height issue of the embedded form. 

    Let us know how it goes. Thank you.

  • Profile Image
    Charity Kirk 
    Answered on August 20, 2019 at 03:43 PM
    Clunky because the height is different at different screen widths. I've
    had to custom code something up but I've solved my problem in a less than
    elegant way, but the best way possible I think under the circumstances.
    It would be nice if this was fixed so you might want to pass it long to
    your developer people.
    Thanks,
    Charity
    ...
  • Profile Image
    EltonCris
    Answered on August 20, 2019 at 05:05 PM

    There's a CSS code injected in your form that sets a negative top margin of the form. I think that causes the cut-off because the height calculation script deducts the negative margin from the total length of the form. Try to remove it and see if this fixes the cut-off.


    If your purpose is to remove the top spacing of the form, replace that CSS code with this.

    .jotform-form,

    .form-all {

        padding-top: 0;

    }

    Expected result:

    Let us know how this goes. Thanks.

  • Profile Image
    Charity Kirk 
    Answered on August 20, 2019 at 05:43 PM
    The form injection (along with the css you mention) is coming from your
    servers so I can't touch it, that's why I've contacted support after trying
    to figure out myself.
    ...
  • Profile Image
    zuritapia
    Answered on August 20, 2019 at 06:58 PM

    Hi Charity! 

    I have gone ahead and updated the CSS Code my colleague had suggested can you please check on your end if you are able to see the Submit button now.


  • Profile Image
    Charity Kirk 
    Answered on August 20, 2019 at 07:43 PM
    Hi,
    The change has cut off the top of the form - cut off the headline. I have
    the jotform script code installed on my dev site without my iframe
    changes. You are welcome to test things there:
    http://mrpicklesdev.wpengine.com/contact/
    Charity
    ...
  • Profile Image
    EltonCris
    Answered on August 20, 2019 at 09:01 PM

    The cut-off stays because the negative top margin CSS is still present. This must be removed. Anyway, I've removed this for you both on dev and on the live form. Please check it again.

    The form injection (along with the css you mention) is coming from your servers so I can't touch it.

    These are manually injected CSS codes and are user-defined. If you've cloned this form from somewhere then they were probably added there on the first. Anyway, injected CSS codes can be edited.

  • Profile Image
    Charity Kirk 
    Answered on August 21, 2019 at 11:43 AM
    Can you tell me where to edit the manually injected css in your system?
    Charity
    ...
  • Profile Image
    Charity Kirk 
    Answered on August 21, 2019 at 11:43 AM
    Additionally, whatever you did to the Restaurant Feedback and General
    Inquiry forms has now completely broken the script from working so can you
    please reverse whatever you did. You can see on the dev website that has
    the script http://mrpicklesdev.wpengine.com/contact/ that those two forms
    now calculate a height of zero.
    Charity
    ...
  • Profile Image
    zuritapia
    Answered on August 21, 2019 at 01:20 PM

    You can follow the guide below to assist you with Injecting CSS Code.

    How-to-Inject-Custom-CSS-Codes

    To get the form back to how it looked before the CSS Code was added please check the Revision History or you can also remove this code:

    .jotform-form,

    .form-all {

        padding-top: 0;


    }

  • Profile Image
    Charity Kirk 
    Answered on August 21, 2019 at 01:43 PM
    Great thanks.
    As jotform support is the one that has now made it so the script calculates
    a 0 height, can you revert it back to where it was before you started
    editing the code?
    Charity
    ...
  • Profile Image
    zuritapia
    Answered on August 21, 2019 at 02:49 PM

    I have now reverted back to the way the form was set before the CSS Code was inserted. 

  • Profile Image
    Charity Kirk 
    Answered on August 21, 2019 at 03:43 PM
    Great thanks!
    ...
  • Profile Image
    Charity Kirk 
    Answered on August 21, 2019 at 04:43 PM
    Is there a cache to purge on your end? When I try to view the "Restaurant
    Feedback" form on my dev site http://mrpicklesdev.wpengine.com/contact/ I
    still do not see the form - the script is still setting the height to zero.
    Charity
    ...
  • Profile Image
    EltonCris
    Answered on August 21, 2019 at 06:08 PM

    Hi Charity,

    The 0 height issue on your dev site isn't an issue with the injected CSS code so we still suggest using the CSS code we provided instead of the previous code with negative margin. This will work better.

    The reason why it won't appear on your dev site is due to script conflict. You have embedded the form on your dev site using its default script embed code. Jotform uses prototype script on the forms and this conflicts with jQuery script on your site. The height calculation script that is hardcoded in your form failed to work due to this. To fix it, you will have to re-embed the form on your dev site using the iframe embed code just like how you embed the form on your live site. The iframe shields the form from any conflict because technically it loads separately on a different HTML document.

    Hope this information helps. Thanks!

  • Profile Image
    Charity Kirk 
    Answered on August 22, 2019 at 02:43 PM
    Hi,
    No, unfortunately that information doesn't help.
    I don't understand why there is now a 0 height issue with the default
    script when this was not the issue before - the issue before was simply a
    miss calculation in height, not the forms not showing up. Saying there are
    now js conflicts between my site and yours doesn't make sense as it's only
    the forms you've touched that are having the issue and the issue is new
    since you have been touching the forms. I haven't touched anything on the
    jotform end yet.
    I simply want you to put the code back the way you found it so at least the
    forms show up. I will then fuss with the css in the jotform form builder.
    Me touching things at this point will only compound the issue because I
    don't know exactly what you did to get it so the height calculation is now
    zero.
    Can you please revert things back to the way you found them? Aka, the
    forms show up but the height is miscalculated below the 480px width?
    Charity
    ...
  • Profile Image
    Richie_P
    Answered on August 22, 2019 at 03:36 PM

    I have checked your embedded form and it seems the submit button is not cut-off anymore.

    May we know if you're still having the issue with your submit button?


  • Profile Image
    Charity Kirk 
    Answered on August 22, 2019 at 04:43 PM
    My request is for you to revert the changes you made to the "Restaurant
    Feedback" form and the "General Inquiry" form so that the default script
    works on my development website
    (https://mrpicklesdev.wpengine.com/contact/) like
    it worked prior to support touching the form.
    Can you do that?
    Charity
    ...
  • Profile Image
    zuritapia
    Answered on August 22, 2019 at 05:00 PM

    Both forms have been reverted back to its original state before anything was updated. 

  • Profile Image
    Charity Kirk 
    Answered on August 22, 2019 at 05:43 PM
    Is there a cache that can be cleared on your end? The Restaurant Feedback
    form still is loading with the javascript calculating a height of 0. Also,
    looking at the web inspector I'm not seeing the negative margin that you
    originally mentioned I should remove (not sure what form that was for
    though since I haven't touched anything in Jotform yet).
    Charity
    ...
  • Profile Image
    EltonCris
    Answered on August 22, 2019 at 06:20 PM

    Hi Charity,

    Caches are cleared automatically on our end but we still cleared it for you just now. You can also clear it in your account settings. Guide: How to Clear your Form Cache

    However, I'm afraid clearing the cache won't help here. Just to reiterate, the CSS changes we did on the two forms have zero effect with the calculation script. Although they were now reverted as per your request. On my test with different browsers on your dev site, the embedded form sometimes shows, sometimes won't. It's intermittent and this is how js conflict works. We've been into this a few times already especially when the platform used is WP and heavily relies on jQuery.

    Anyway, we definitely understand that you want to keep using the default script embed code, so the following might help overcome the zero height issue. You can simply add the following CSS code underneath the form embed code from where you've placed it.

    <style>iframe[name="90338480029154"] {min-height: 2500px;}</style>


    This only applies to the Restaurant Feedback Form 90338480029154. If you want to fix another form, you can duplicate the CSS code and replace the form ID then adjust the minimum height.

    Example:

    <style>
    iframe[name="90338480029154"] {min-height: 2500px;}
    iframe[name="91275838000151"] {min-height: 1800px;}
    </style>

    I hope this will work for you. If not, let us know so we can further help you.