The same form view on desktop and mobile

  • Profile Image
    kozijnstijl
    Asked on June 13, 2014 at 08:02 AM

    can anyone help me, to make so that the css mobile view the input fields are the same as in desktop view. see picture its for the form "1 test" in my account

  • Profile Image
    NeilVicente
    Answered on June 13, 2014 at 12:40 PM

    Your form has injected CSS that makes it responsive when viewed on a mobile device. Do you not want this form appearance? If the CSS is removed, your fields will be cut off on mobile device browsers.

  • Profile Image
    kozijnstijl
    Answered on June 14, 2014 at 03:56 AM

    yes i want it responsive but why is for example the box "uw opdracht" not reposive 100% to the screen off my mobile?

  • Profile Image
    bob
    Answered on June 14, 2014 at 01:49 PM

    You can try the following css code to adjust your form with mobile device.

    /*------MOBILE CSS------*/
    @media only screen and (max-device-width: 550px){
    .form-all {
    background-image: none;
    }
    .form-label-left, .form-label-top {
    float: left !important;
    display:inline !important;
    }
    #label_17, #label_24 {
    display: none !important;
    }
    }

    The following guideline will help you to achieve what you want.

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    http://www.jotform.com/help/35-The-Importance-of-Form-Widths

    http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Please get back to us with updates about your query.

    Thank You

  • Profile Image
    kozijnstijl
    Answered on June 16, 2014 at 04:42 AM

    Thanks for the reply.

    I have tested the code. Only at mobile landscape is "levering" just outside the screen image. At portrait mobile view is the half form cut off.

    The css can also be constructed in such a way that the view for desktop, portrait and landscape mobile different are?

  • Profile Image
    ashwin_d
    Answered on June 16, 2014 at 09:23 AM

    Hello kozijnstijl,

    Please be noted that there are other factors as well when you want to make your form responsive. Example your website layout, the form width and if you have any widgets. 

    Please share the web page URL where you have embedded your form and we will take a look.

    We will wait fro your response.

    Thank you!

  • Profile Image
    kozijnstijl
    Answered on June 17, 2014 at 07:58 AM

    http://www.multivergelijker.nl/groningen-appingedam-kunststof-kozijnen-offerte.html  

    The view on desktop is very good, only for mobile and tablet it's different

    Thank you

  • Profile Image
    TitusN
    Answered on June 17, 2014 at 12:57 PM

    Hello, 

    I took a look at your website - and noted that the website itself is not mobile responsive. 

     

    Remember the website hosts the form, so if it does not automatically resize to appreciate the browser size of a mobile device, neither will the form you have embedded.

    So, here is what you need to do:

    1. Make your form responsive - This might require the assistance of a web developer

    2. Make your form responsive - Please use the following widget to accomplish this: http://widgets.jotform.com/widget/mobile_responsive - This may need that you remove all the Custom CSS you have emedded in your form. 

    We stand by to assist further. 

    Thank you for your patience.