Form disappears on mobile view.

I added a mobile responsive widget to the form, so I can use it on various screen sizes. When testing the page with the form, I am making the browser window smaller as it would appear on a tablet or a phone. Once I start to adjust the size of the browser, the form disappears. Even if I go back to the initial size of the browser on the desktop, the form doesn’t display on the page anymore. 
Here is a link to that page:
http://nycrom1.businesscatalyst.com/contact.html
You’ll notice the form will disappear once you start dragging the left or right side of the browser inwards and making the window smaller. 
Please, let me know how I can fix this.

You are correct, if you resize the window, it will disappear, upon looking the standalone version of your form, I can see that does not happen, and the form is mobile responsive: https://form.jotform.com/form/50076481495157

The problem is in your site, you have embedded your form's code, inside a DIV which has some rules that display it or not depending on the screen size:

So you may contact your designer to fix that, or simply embed the form's code outside any div that does not have that CSS rule apply through the ".breakpoint" class.

Let us know if you have more questions.

Thanks, but that’s not exactly right. I am the designer. I am adding the form via a simple html block. No special rules set. In fact, I have rules set to display the form on all breakpoints. Muse support (I am using Muse to build my site) told me that the html of the form is causing a conflict on the site and causes the form to disappear. 
Thanks,
-- 
Romeo
e: romeo@nycrom.com
w: nycrom.com
...

Hi Romeo,

I was able to see the problem as well when I checked on your http://nycrom1.businesscatalyst.com/contact.html.

 

Can you please try first re-embed process. That is remove the embedded form on your http://nycrom1.businesscatalyst.com/contact.html, then re-embed it using its iframe embed code instead.

user guide: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

Let us know if this did not make any difference and if issue remains.

Hi,
I’ve tried all possible options: code source, iframe, etc. Nothing worked. I deleted the html block several times and then re-added it again. Still no luck. 
Thanks,
-- 
Romeo
e: romeo@nycrom.com
w: nycrom.com
...

If there are no special rules set on the div that's holding the embed script, it should show accordingly even when resized or on a mobile phone. As showed by my colleague, BDavid, your form works in its stand-alone state. With all that being said, using the iframe code of your form should have fixed your issue but, as you have said it still not. 

When you embedded your form using the iframe, did you include the <script> that comes with the iframe code? If yes, kindly leave that part of the iframe code and just embed the <iframe> part only. It is also possible that the script of your website and the script of your form creates conflict that's why you're having such issues.

If that doesn't solve your issue or if you have tried that already and still having the same issue, please do get back to us and we will try to check for other possible solution.

Thank you.

If I use just the part only half of the form displays on the site. Not even sure why that seemed like a good option. At this point I’ve tried everything. 
Are there any options left?
Thanks,
-- 
Romeo
e: romeo@nycrom.com
w: nycrom.com
...

To prevent conflicts, use iframe embed code. Since the form will load directly in an iframe container, it won't conflict anything on your page.

It is good to know that it is now displaying. With that, I suggest staying with using iframe embed code. Regarding the positioning and appearance of the form, it is most likely due to the div container that holds it which has some position property. The form itself is already mobile responsive, however, the container affects the form position and width.  I suggest to check and correct it using your web builder app. 

Since you are still using script embed as of checking, unfortunately, we can't check and inspect in our browser how the iframe is rendered on your page http://nycrom1.businesscatalyst.com/contact.html. Please let us know the page where you have used the iframe embed code or, at least, update your contact page using iframe embed code.

Thanks!

I added the iframe and finally the form is displaying on all breakpoints.
Thanks,
-- 
Romeo
e: romeo@nycrom.com
w: nycrom.com
...

I'm glad my colleagues were able to help you solve the problem. 

Please let us know if you need any assistance.

Hi, I am having this same issue as well although I am still not coming up with the solution. What is the difference between an iframe and a normal html?

This is what worked for me:

 

In Muse, delete the HTML element which holds the form. In JotForm, go to your form, click Publish, then Embed, then select iFrame from the embed options. Go back to Muse, add a new HTML element, and paste the iFrame in it. Publish your site. 

 

Now the form is visible on all breakpoints.

 

Not sure I know the answer to your other question. 

Ahh thanks so much that worked great it doesn't disappear anymore.