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

    how can i get my form to show the same on all browsers and mobile screens?

    Asked by 2adorable on June 12, 2013 at 11:01 PM

    i have tested my form on many mobile platforms and desktop browsers. it seems to only show correctly in internet explorer, firefox, opera.

     

    but not google chrome.

     

    and none of the mobile platforms using the mobile version web browsers are showing the form correctly,

    this is also happening to a few of my other forms? 

    here is the link.

    http://form.jotformpro.com/form/31057511171948

    Page URL:
    http://form.jotformpro.com/form/31057511171948

    Mobile opera
  • Profile Image

    Answered by khrisell on June 12, 2013 at 11:36 PM

     

     I would suggest to re-embed your form using iframe embed code. This should help fixed this issue. Getting the Form iFrame Code
  • Profile Image

    Answered by 2adorable on June 12, 2013 at 11:39 PM

    that doesnt work i tested it using the jot form URL and it still doesnt load properly

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 13, 2013 at 02:47 AM

    @2adorable 

    I am using Chrome and I can view your form fine.

    Regarding on the mobile view, JotForm has it's default style when the form is viewed via mobile. It automatically renders the mobile version of the form. Most of the fields are re-sized and bring down to a new line to fit exactly on the mobile screen, so I suspect some of the "Free Text" labels in your form might not aligned properly specially if you are using custom CSS codes to your form. I can see you have few injected CSS codes which causes some misalignment in mobile. I would suggest to review your CSS codes. Use media queries (@media) if necessary to fix the mobile alignment issues. Here's an example:

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

    #input_17, #input_24 {

    margin-top: 10px;

    }

    }

    The CSS codes above will move the Time Address "2nd dropdown field" slightly below (just 10px, you can adjust it if you want) in mobile. I can see it's not well aligned.

    Let us know if you have any further questions or if you need further assistance. Thanks!

  • Profile Image

    Answered by 2adorable on June 13, 2013 at 07:48 PM

    okk i used your code it worked. is there a way i can get the form to show the same on all devices?

    also id like to build a mobile form in jotform and have it show when people are using mobile devices? is there a way i can do that? i am talking about a seperate form. one desktop one mobile, can i insert css that will call another form when accesed but a mobile or user agent?

  • Profile Image

    Answered by 2adorable on June 13, 2013 at 07:51 PM

    also my form does not load properly using chrome os but works in chrome on the desktop? and ideas?

  • Profile Image
    JotForm Support

    Answered by jonathan on June 13, 2013 at 08:33 PM

    @2adorable

    Hi,

    "also id like to build a mobile form in jotform and have it show when people are using mobile" devices?

    The form builder itself does not support yet usage on mobile devices. It will be unstable if you use the form builder on ipads, tablets, other mobile devices.  

    You have to still use Desktop PCs or Mac to build your forms. The forms you build on desktop or mac are mobile browsers compatible most of the time, -- you only need to apply customization on some cases similar to what our colleague EltonCris have just shown how to on your form to view it on mobile browser properly.

    "also my form does not load properly using chrome os but works in chrome on the desktop?"

    I am not sure which Chrome OS you meant... perhaps its the chrome browser on android OS?

    Please tell us which specific device/browser you are still having issue viewing the form properly. We will check further.

    Thanks.

     

  • Profile Image

    Answered by 2adorable on June 13, 2013 at 08:46 PM

    google has a new operating system called chrome OS based on there the chrome browser here is a link http://www.google.com/intl/en/chrome/devices/

     

    and you mis-understood my question.

    id like to build a form specifically for mobile devices (not on mobile devices) and i would like to build another form specifically for desktop devices. and when you access my desktop form from a mobile device id like to have my mobile form load... is this possible?

  • Profile Image
    JotForm Support

    Answered by jonathan on June 13, 2013 at 09:45 PM

    @2adorable

    Hi,

    Thank you for this info http://www.google.com/intl/en/chrome/devices/  =) (I guest I need updating)

    --

    Sorry if I indeed misunderstood on the first time..

    i would like to build another form specifically for desktop devices. and when you access my desktop form from a mobile device id like to have my mobile form load... is this possible?

    If I understand correctly this time, what I think you wanted to happen is -- depending on which platform a user is opening your form, it should redirect to the appropriate form (desktop form or mobile form) and load the form.

    I think this is only applicable if you have the form embedded on a website page. The DOCTYPE declaration on the web page usually handles this. (More details here)

    Or you can use the form's source code and manually alter its declaration type to properly address the instance when viewing on multiple platforms.

    The forms you create on the form builder are suppose to be viewable-ready on whether it is in mobile or desktop. There are only specific instance when you have to customize the form using injected CSS codes so that the form also fit in mobile devices/browsers.

    Hope this help. Please continue updating us for any suggestions/inquiry you have.

    Thanks.

  • Profile Image

    Answered by 2adorable on August 28, 2013 at 01:20 PM

    i have a question. the form that i built in jot form is responsive by default by jotform, this makes my form look messy on a iphone as the form is built for a desktop computer. is there a way or a css override to stop my form from being responsive?

  • Profile Image
    JotForm Support

    Answered by Mike_T on August 28, 2013 at 03:57 PM

    In general, the CSS will be like this:

    @media only screen and (max-device-width: 550px){
    .form-label-left, .form-label-top{
    float: left !important;
    display:inline !important;
    }
    }

    But since your form layout is quite complex (with custom CSS and shrunken fields) it is not likely that the form will look the same on desktops and mobiles.

    In case you use a form source code, you can find the mobile CSS at the end of /css/styles/form.css file.

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

  • Profile Image

    Answered by 2adorable on August 29, 2013 at 12:42 PM

    so basically your saying there is no work around to this problem?

  • Profile Image
    JotForm Support

    Answered by Mike_T on August 29, 2013 at 03:09 PM

    The workaround can be writing specific CSS for mobile devices, but this might be hard due to custom layout on your form and different browser engines on mobile devices.

    Here is the CSS that you can try in order to get the similar layout:

    /*------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;
    }
    }

    This should be tested on actual devices and improved according to your needs.