Input fields are too long and does not matched the form's width when viewed in mobile

  • davidhiscutt
    Asked on February 23, 2015 at 5:15 PM

    Hi, I am trying to make the following form completely compatible with iPhone and Android mobile devices although can not seem to master it.

     

    Some of the text and field boxes keep trailing over making the form look a bit unprofessional.

    Could you help me out with the injecting CSS into my form please.

    I have not embedded this form into a website, I am using a link via a tinyurl.

    The form is http://form.jotformeu.com/form/50535284755359.

    Huge thanks in advance

  • David JotForm Support Manager
    Replied on February 23, 2015 at 7:18 PM

    Have you tried setting up the responsive features? Please review this guide to help you accomplish it, and let us know if that helps: http://www.jotform.com/help/311-How-to-make-forms-Mobile-Responsive

    Let us know if you have more questions, we will be glad to assist you.

     

  • davidhiscutt
    Replied on February 24, 2015 at 3:00 AM

    Hi thankyou, I have followed the instructions and set both settings to Responsive form although still the same issues. 

    I did create this form in  Adobe Formscentral where it did display correctly, is it possible that something has not translated properly when I have ported it over to Jot Forms?

    Is there any more help you could give me please.

    See screenshot attached of my issue. The input fields don't seem to want to resize correctly.

    Input fields are too long and does not matched the forms width when viewed in mobile Image 1 Screenshot 20

  • Mobileonix
    Replied on February 24, 2015 at 4:39 AM

    Hi Yes I am getting this same issue with responsive forms I do not think the responsive option is working 

  • Mobileonix
    Replied on February 24, 2015 at 4:43 AM

    Ah sorted you must select on both the preferences option and the tick box option for this to work 

  • davidhiscutt
    Replied on February 24, 2015 at 5:15 AM

    I have done both and still have the same issue :-(

  • Mobileonix
    Replied on February 24, 2015 at 5:20 AM

    One of guys will be on to help you I am sure but it worked for me Click Here to see then hit enquiry form

  • Mobileonix
    Replied on February 24, 2015 at 5:27 AM

    If you click on test form david Here Click David   I do not have the embed code so just click the contact golf specialist you will see your form it only needs a few edits and your good to go 

  • davidhiscutt
    Replied on February 24, 2015 at 5:50 AM

    Hi Mobileonix,

    Thanks for the link, yes that is exactly how I would like my form to appear. What did you actually edit to make it appear correctly please as I am struggling.

    Thankyou

  • Mobileonix
    Replied on February 24, 2015 at 6:03 AM

    I just used the link you had changed nothing as I do not have access to your form but I would say if you just to to design tool the new one and edit the form layout then imput width that might work 

    They really should have used drag and drop for this new builder as it seems to be causing lot of confusion and you know what confusion brings ..... lost revenue 

  • Charlie
    Replied on February 24, 2015 at 9:31 AM

    Hi,

    If you are viewing the form using the direct URL or link, and the problem shows that input fields have a mismatch width, you could try disabling the Form responsive option in the Preferences, only that one. Leave the "Make this form responsive" option in your form responsive enabled.

    Here's a screenshot, disable the option here, only this. 

    Input fields are too long and does not matched the forms width when viewed in mobile Image 1 Screenshot 20

     

    See if that solves the problem and do let us know if it works.

    Thank you.