Responsive layout forms

  • Profile Image
    2adorable
    Asked on April 12, 2013 at 03:15 PM

    i have web pages that are coded to automatically change layouts based on the device that is connecting to it, for example a tablet or an iphone... does jotform have forms that support this?

  • Profile Image
    Mike_T
    Answered on April 12, 2013 at 04:02 PM

    Thank you for contacting us.

    Yes, we have mobile form styles, these styles are included by default. If you load any form on a mobile device, layout will be automatically adjusted.

    Please feel free to contact us if you need any further assistance.

  • Profile Image
    2adorable
    Answered on April 12, 2013 at 05:31 PM

    but will this work with a wordpress site inserted using your jotform script code for wordpress?

  • Profile Image
    jeanettebmz
    Answered on April 12, 2013 at 05:47 PM

    Yes, that is correct

  • Profile Image
    2adorable
    Answered on April 15, 2013 at 04:12 PM

    so how will the form change ? is there an example of this anywhere?

  • Profile Image
    EltonCris
    Answered on April 15, 2013 at 04:55 PM

    @2adorable

    An example would be this, visit this form.

    http://form.jotformpro.com/form/31045736566962

    Desktop View:

    Mobile View Iphone 5

    If you are familiar with CSS, you can view JotForm's default CSS for mobiles on this stylesheet. Find "@" symbol to view JotForm's media query for mobile. http://cdn.jotfor.ms/static/formCss.css?3.1.177

    It is also possible to modify this by Injecting Custom CSS codes to your form. How to Inject Custom CSS Codes to your Form

    To change mobile device layout, you can use media queries like.

     

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

    .form-all{

    width: 100% !important;

    }

    }

    Let us know if you need further information about this. Thank you!

     

  • Profile Image
    2adorable
    Answered on April 15, 2013 at 06:37 PM

    so i should insert the @media only screen into the css in the jotform form editor? 

  • Profile Image
    2adorable
    Answered on April 15, 2013 at 06:49 PM

    That form that you displayed as an example didn't conform to my cell phones screen size?

  • Profile Image
    2adorable
    Answered on April 15, 2013 at 06:57 PM

    here is the  form im working on... 

     

    http://form.jotformpro.com/form/31008250629952?

     

    can you clone it and insert the css so i can see how this works? 

  • Profile Image
    Welvin
    Answered on April 15, 2013 at 08:24 PM

    Hi,

    The form has been made with a various customizations, especially  the alignments (two columns). The default media CSS queries on the file provided by my colleague does not include this and won't automatically adjust the fields when viewed on mobile devices. This needs additional codes to inject into the form.

    We'll see if what we come up with. 

     

    Thanks