What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Heading not displaying on mobile devices

    Asked by TLCunlimited on June 30, 2016 at 03:38 PM

    Hi there,

    I have a form on two of my website pages that seem to have issues in messing up the placement of the heading, which is a png file. I can seem to adjust the heading somewhat with the CSS values, but it still doesn't seem to work right. Anyway, I did a debugger thing (see attached image) and it showed it as it might be in the jotform javascript and that I need to set a "Height" for it. Can you help me with that? Here are the two pages that have the forms.

    http://www.medcohomehealthcareservices.com/employment.html

    http://www.medcohomehealthcareservices.com/in-home-consultation.html

     

    I have it looking okay on the desktop version (although the Employment header still jumps), but on all mobile platforms, the whole thing moves. Let me know if you have any ideas on the jotform side of things.

     

    Thanks!
    Lori

    lorigarcia@estreet.com

    Page URL:
    http://www.medcohomehealthcareservices.com/employment.html

    Screenshot
    JotForm heading height Mobile
  • Profile Image
    JotForm Support

    Answered by Kiran on June 30, 2016 at 06:19 PM

    Please be noted that the error message displayed in the screenshot provided is not related to JotForm. I have checked your web pages and noticed that it is the same form embedded on the both web pages.

    The form https://form.jotform.com/form/61598423707160 is embedded on http://www.medcohomehealthcareservices.com/employment.html and the form https://form.jotform.com/form/61686570146158 is embedded on http://www.medcohomehealthcareservices.com/in-home-consultation.html

    Are you referring to the form https://form.jotform.com/form/61686570146158. This form is not having the header.

    I have checked the both pages on a mobile emulator and they are displaying properly at my end.

    Please check again and let us know if you are still experiencing the issue and let us know which mobile phone you are using and which form that you are experiencing the issue. We will be happy to assist.

    Thank you!

  • Profile Image

    Answered by TLCunlimited on June 30, 2016 at 07:45 PM
    sorry, I have not explained myself correctly. The form itself is working great. It just happens to “move" the website’s "headers/png files" around, the headers are not on the form itself. I guess my question is, is there a way to either change the “height" of the jotform? I see a place to set the “width” of the the form, but I think it is the “height' of the form that is messing up the current page’s header/footer. The error says:
    "jotform.forms.js?3.3.14010:240 Debug : setting height to 1380 from iframe”
    I am just not sure where to change this in Jotform.
    I don’t know if I need to set up an “iframe” in my adobe Muse file or if I need to change the “Height” in the “jotform.forms.js” script. Either way, I am just not sure how to add/change it. Please help if possible.
    Thanks!
    Lori
    ...
  • Profile Image
    JotForm Support

    Answered by Kiran on June 30, 2016 at 08:52 PM

    The height of the form is adjusted dynamically depending on the number of fields to be shown on the form. If you want the height of the form to be fixed, you may embed the form using iframe embed method. 

    However, you'll need to use the colored section of the embed code. You can get the iframe embed code of your JotForm by following the guide below:

    https://www.jotform.com/help/148-Getting-the-form-iFrame-code

    Please give it a try and let us know if you need any further assistance. We will be happy to assist.

  • Profile Image

    Answered by TLCunlimited on June 30, 2016 at 09:45 PM
    I did that and now neither my form or my header. png shows… They both disappeared :( I haven’t published it yet, because my client would go nuts if it is all gone. I can though, really quick if you need to see it.
    thanks for your help!
    Lori
    ...
  • Profile Image
    JotForm Support

    Answered by liyam on July 01, 2016 at 12:41 AM

    Hello Lori,

    It seems that the div which contains your text header is too wide that it covers the two columns. You can set a specific width on the div that contains your text header.  Or you can try removing the 'clearfix' class which causes your div to hide once it's no longer fitting in the screen.

    Let us know if this doesn't work or if you have other questions.

    Thanks.