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 layout forms

    Asked by 2adorable 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?

    layouts form layout responsive form
  • Profile Image
    JotForm Support

    Answered by Mike_T 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

    Answered by 2adorable 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

    Answered by jeanettebmz on April 12, 2013 at 05:47 PM

    Yes, that is correct

  • Profile Image

    Answered by 2adorable on April 15, 2013 at 04:12 PM

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

  • Profile Image
    JotForm Support

    Answered by EltonCris 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

    Answered by 2adorable 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

    Answered by 2adorable 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

    Answered by 2adorable 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
    JotForm Support

    Answered by Welvin 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