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

    Responsive Form and Hover Text

    Asked by glandoreghyc on November 06, 2014 at 05:34 PM

    I have a test Jotform Responsive Form at the following test site:-

     

    http://www.reenoserve.com/ghyc/onlineForms.html

    This form is working however if you view the Form in Portrait mode on an iPhone, then it "Breaks" the Responsive form behaviour when you select the field named Family Name which has Hint text of O'Donovan.

    This field has Hover Text to aid the person completing the form, and is important, if you select any other larger screen device this works fine and the Hover text is displayed.

    Even if you use the iPhone in Landscape mode it work as the Hover text is displayed within the display window, you can then change the orientation of the iPhone to Portrait and it still works.

    However if you have the iPhone in Portrait and select this field the Responsive page is "Broken" as it tries to "widen" the visible display and will not display the Hover text.

    Thanks Again

    John

    and JotForm name site www
  • Profile Image
    JotForm Support

    Answered by KadeJM on November 06, 2014 at 06:31 PM

    I took a look at this on my iPhone and I'm not sure that I understand is breaking on your end. I'm able to access your jotform rather fluid-like even after selection of the Family Name Field even while the pop-up hint is showing. I tried both Portrait and Landscape where both had the same end result in both Mobile Safari & Chrome.

    What exactly is it doing on your side that has you saying it's not responsive? Can you explain?

    What iPhone Model do you have?

    What iOS Version are you using?

    Is this happening in Mobile Safari, Mobile Chrome, or another Mobile Browser?

     

    Landscape:

     

    Portrait:

     

  • Profile Image

    Answered by glandoreghyc on November 06, 2014 at 06:37 PM

    Hello,

     

    My iPhone is a 5S and the IOS is 8.1

     

    Your screen shot in Portrait is interesting, i do not get that result, there is no Hover text displayed and the fields are extended to the right, i have to swipe the screen to the left to see the whole width of the display. This only happens after i select the Family Name field.

  • Profile Image

    Answered by glandoreghyc on November 06, 2014 at 06:45 PM

    Further to my last response the following is what i see on my 5S in Portrait mode

     

    Thanks

     

    John

  • Profile Image

    Answered by glandoreghyc on November 06, 2014 at 06:54 PM

    Firstly,

     

    Apologies for the fragmented nature of this response, it is getting late in the day over here.

     

    I see this issue on Chrome and Safari.

     

    Thank You

     

    John

  • Profile Image
    JotForm Support

    Answered by BDAVID on November 06, 2014 at 07:05 PM

    Thank you for providing more details about this situation, we will check this further.

  • Profile Image

    Answered by glandoreghyc on November 09, 2014 at 05:56 AM

    Hello,

     

    Please refer to the thread

    http://www.jotformeu.com/answers/452259-Considerable-spacing-around-the-heading-of-an-Embedded-Form?entrymessage=10732640770

    As the situation with the Form in responsive mode has changed and i have no idea why?

     

    thx

     

    John

  • Profile Image

    Answered by Shadae on November 09, 2014 at 08:42 AM

    Hi John,

    I am seeing where the issue regarding the change in your form is being addressed at this thread: http://www.jotformeu.com/answers/452259

    Is it that you are experiencing a different issue that what has been outlined in that thread?

    We await your response to better assist you.

    Thank you

  • Profile Image

    Answered by glandoreghyc on November 09, 2014 at 09:43 AM

    OK,

    This started as a single thread at

    http://www.jotformeu.com/answers/452259-Considerable-spacing-around-the-heading-of-an-Embedded-Form?entrymessage=10732640770

    Which is the thread you referred, and it was fixed, i thought, with the inclusion of CSS as defined by Welvin on the 6th November at around 7:37am, then another quesiton i raised was used to create a new thread at:-

    http://www.jotformeu.com/answers/455186-Limit-the-amount-of-spaces-at-the-end-of-the-form#10

    Which was fixed by a resolution suggested by Ben also on the 6th around 1:49pm and referred to adding -209px of padding to the iFrame .

     

    Which seemed to work fine.

    Then i discovered that i had an issue only on the iPhone as described in this thread on 6th Nov at 5:34pm and this issue is still unresolved as of now.

    However to add to the confusion, the original thread problem as fixed by Welvin on the 6th has now reappeared and i have changed nothing to the Jot Form, and for the details of that i would ref you to the thread as detailed above at:

    http://www.jotformeu.com/answers/452259-Considerable-spacing-around-the-heading-of-an-Embedded-Form?entrymessage=10732640770

     

    So to answer your question this problem in this thread still exisits.

     

    Thank You

     

    John

  • Profile Image

    Answered by Shadae on November 09, 2014 at 11:25 AM

    Hi John,

    The issue regarding your form is currently being addressed on this thread: http://www.jotformeu.com/answers/452259 

    Please feel free to contact us if you need additional assistance.

    Thank you.

  • Profile Image

    Answered by glandoreghyc on November 09, 2014 at 01:30 PM

    Hello,

     

    This issue has never been addressed by the other thread you refer to.

    Even with all the activity on the other two issues today, this problem has never been addressed properly and is still outstanding.

     

    Please read the previous posts on this thread as they are still very much still relevant.

     

    John

  • Profile Image
    JotForm Support

    Answered by ashwin_d on November 09, 2014 at 10:53 PM

    Hello John,

    I did check your form in my iPhone device and I am also not able to replicate the issue you are having. The form fields does display correctly and selecting the field "Family Name" does not have any impact in your form. Please check the screenshot below:

    I have cleared your form cache from server. I would suggest you to clear your browser cache of your iPhone before check your webpage again. 

    D get back to is if the issue persists.

    Thank you!

  • Profile Image

    Answered by glandoreghyc on November 10, 2014 at 03:50 AM

    Hello,

     

    Please see the two images attached, both are taken on a totally different iPhone 5S with IOS 8.1

    The first is before is tap Family Name

     

     

    The second is after i tap Family name

     

     

    Note in my opinion the addition of the Hover text is forcing the Display to increase in width and the Hover Text is still not displayed.

     

    This test was taken using Safari, but i get the same issue with Chrome

     

    Thanks

     

    John

  • Profile Image
    JotForm Support

    Answered by ashwin_d on November 10, 2014 at 07:12 AM

    Hello John,

    Your form does work fine as you can see in my screenshot above but let me update my iPhone 4S to iOS 8.1 and then get back to you after my testing.

    Thank you!

  • Profile Image

    Answered by glandoreghyc on November 10, 2014 at 07:21 AM

    Hello,

     

    Thank You but no screen shot included

  • Profile Image
    JotForm Support

    Answered by Welvin on November 10, 2014 at 08:09 AM

    And to prevent zooming input fields when using IOS. Add user-scalable=0" to your viewport meta:

    Reference: http://www.ampedupdesigns.com/blog/show?bid=53. This works, at least for me. Update this thread for the result.

    Thank you!

  • Profile Image

    Answered by glandoreghyc on November 10, 2014 at 09:22 AM

    Welvin,

     

    I am not sure i understand, do i need to insert the whole line or the part you have outkined in your text  ie user-scalable=0.

     

    Thx

     

    John

  • Profile Image

    Answered by glandoreghyc on November 10, 2014 at 09:35 AM

    Welvin,

     

    Apologies, the response should have read.

     

    Do i add your suggested parameter user-scalable=0 or do i replace the last parameter with the parameter you suggest?

     

    Thanks Again

     

    John

  • Profile Image
    JotForm Support

    Answered by KadeJM on November 10, 2014 at 09:56 AM

    Yes, he was actually suggesting for you to try adding the meta element with the 0 Scale trick for you on your end to see if it will help at all.

    It explains more about that in the document he linked in his response to you here.

    This line -

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

     

    As seen in Welvin's screenshot he is basically showing you where to place it which is within the header of your embedded jotform's source code. Your jotform will basically have some header tags " <head>|</head> " and you need to place it within those tags preferably at the top underneath your jotform title which is usually best. Anyhow, try that and let us know.

  • Profile Image

    Answered by glandoreghyc on November 10, 2014 at 10:08 AM

    Hello,

     

    Yes but i use   Freeway to generate my sites so getting into the HTML is doable but not that easy at this level, and i checked the code   and the Meta statement referred to is in the header of the page.

    And i need to determine how to fix that within Freeway

     

    John

  • Profile Image
    JotForm Support

    Answered by Welvin on November 10, 2014 at 10:39 AM

    Hi John,

    I'm suggesting the viewport method since you have the pages in HTML format and I thought that you can just easily change it there. Don't you have a way to edit the full source codes of the HTML page in Freeway? 

    How about editing the HTML page using text editor? And uploading it back directly to your FTP server? So in this case, the viewport is only for this page not to the whole website.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by Welvin on November 10, 2014 at 10:47 AM

    Sorry to edit your form without your consent, but I have added the following solution to your form to see if this will fix the zooming issue without changing the viewport meta to the page:

    https://gist.github.com/vedranjaic/5653472

    Can you check now? This how it looks like when we add it to your form:

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on November 10, 2014 at 10:56 AM

    By the way, I think your form has too many changes now per our suggestions/solutions trying to fix all the problems to it. Now, I would like to ask if it's okay if we leave this for now and go back to it until the other issues on the other thread are fixed, preferably the top and bottom spacing issues? 

    This would help you get all the details one at a time and/or help you what codes to insert/adjust first and apply it to the other forms you have. This would also help us prevent breaking/overwriting the existing codes to the form.

    Thank you!

  • Profile Image

    Answered by glandoreghyc on November 10, 2014 at 11:00 AM

    Welvin,

     

    Understood OK. Good idea.

     

    John

  • Profile Image
    JotForm Support

    Answered by Welvin on November 10, 2014 at 11:07 AM

    Okay, great! Thank you!

  • Profile Image

    Answered by glandoreghyc on November 11, 2014 at 03:21 AM

    OK, There other issues are resolved.

    This issue still exists, what do you suggest please?

    thx

     

    John

  • Profile Image
    JotForm Support

    Answered by ashwin_d on November 11, 2014 at 05:37 AM

    Hello John,

    Have you deleted the page "onlineForms.html" already? I did try to check the web page but it seems to give 404 Not Found error message. 

    I injected the following custom css code in your form which seems to be displaying the "Hover Text" in a better position in my iPhone device:

    @media only screen and (max-device-width : 480px){

    #id_19 .form-description {

    right: -10px !important;

    top: 30px !important;

    }

    }

    I would also suggest you to let us know the web page URL where you have embedded your form and we will take a look and if required further customize the css code.

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by glandoreghyc on November 11, 2014 at 05:58 AM

    Hello,

     

    Firstly, Let me apologise i removed the old page "onlineForms.html" as i updated the test site to a new version, however when i did this initially i completely forgot that the old page was still in existence, so yesterday removed it.

    the new test site page is at:-

    http://www.reenoserve.com/ghyc/Forms/index.html

     

     

    Seems to be working fine on the iPhone 5S Thank You, but it fail on iPad Retina in Portrait mode.

     

    Do i understand correctly that if i change, delete/replace the Hover text  then the line  

    #id_19 .form-description {

    will have to be changed to match the new id of the new Hover text?

    Once again sorry about moving the page issue...

    Thanks

     

    John 

  • Profile Image
    JotForm Support

    Answered by ashwin_d on November 11, 2014 at 07:53 AM

    Hello John,

    I have made some adjustments in your form for iPad. Can you please check and share a screenshot how it appears now in portrait mode?

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by glandoreghyc on November 11, 2014 at 08:07 AM

    Hello,

     

    Here is the view i get on my iPad in Portrait mode.

    As you can see the Hover Text is covering the left hand side of the input field, which in an ideal world is not the best i do not mind it covering the right hand side as at least the user will be able to see when they start typing and then the Hover text will disappear any way.

     

     

    Again Thanks

     

    John

     

  • Profile Image
    JotForm Support

    Answered by Welvin on November 11, 2014 at 09:35 AM

    How about now? I change the following:

    @media only screen and (max-device-width : 1024px){

    #id_19 .form-description {

    right: 140px !important;

    top: -20px !important;

    }

    }

    TO

     

    @media only screen and (max-device-width : 1024px){

    #id_19 .form-description {

    right: -20px !important;

    }

    }

    Please update this thread for the current look.

    Thanks

  • Profile Image

    Answered by glandoreghyc on November 11, 2014 at 09:59 AM

    Welvin,

    Please see attached Screen Shot.

     

    Looks Great Thank You

     

    Thanks again for "hanging in there" on these issues.

    I am learning a lot, apologies for being a little slow to appreciate certain actions.

     

    Thx

     

    John

     

  • Profile Image
    JotForm Support

    Answered by Welvin on November 11, 2014 at 10:28 AM

    That's wonderful! You can play around the codes to adjust the alignment. Just please make sure not to remove the tags/brackets around it.

    It's always our pleasure to help! If you need further help, please don't hesitate to contact us again through this support forum.

    Have a great day!