Submit button is getting cut off on mobile devices

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.

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.

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

...

Hi Charity!

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

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

https://form.jotform.com/90338480029154
...

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

<iframe

id="JotFormIFrame-90338480029154"

title="Customer Comments"

onDISABLEDload="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.

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
...

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.

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.
...

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.

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
...

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.

Can you tell me where to edit the manually injected css in your system?
Charity
...

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
...

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;

}

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
...

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

Great thanks!
...

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
...

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!

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
...

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?

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
...

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

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
...

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.