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 not working

    Asked by traveldiunsa on December 02, 2015 at 03:47 PM

    Hello, I have checked the responsive options for my form but it´doeasn work properly, what can it be wrong with my setup?

    Thanks in advance!

    Page URL:
    http://mundojovenhonduras.com/index.php/isic/solicitud-carnet-isic

    Screenshot
    responsive form mobile device mobile responsive CSS codes media screen
  • Profile Image
    JotForm Support

    Answered by Mike_G on December 02, 2015 at 09:10 PM

    I have cloned your form.

    Then, I applied some changes on the cloned form. I believe that when you make your form alone responsive it should be responsive also when embedded on your website.  Especially when you embed it using the iframe code: Getting-the-Form-iFrame-Code

    First, you need to expand the fields as shown on the image below: 

    This, however, will not take much effect on your form.

    After expanding the fields on the image, we will add this CSS codes in your form so it will look responsive on your mobile devices.

    @media screen and (max-width: 480px) {

    .form-all,.jotform-form, .form-section.page-section, .supernova{

    background-color: green !important;

    width: 350px !important;

    }

    label.form-sub-label{

    white-space: normal !important;

    }

    .form-checkbox-item{

    width: 175px !important;

    }

    .form-label{

    text-align: left !important;

    }

    #recaptcha_input_28 tr:nth-child(2) td{

    background-color: blue !important;

    position: relative !important;

    display: inline !important;

    }

    }

    Note: The codes above will only take effect if the form is opened in a mobile device.

    Here's how it will look like on a mobile device:

    I would like to suggest you clone the form I have used for testing using this guide: How-to-Clone-an-Existing-Form-from-a-URL

    Here's the Form URL of the clone version of your form I have used for testing:

    https://form.jotform.com/53357798371974

    Once you have cloned the form I have used for testing, please try to embed the clone version on your website.

    I hope this helps. Let us know if there is a need for us to clarify any of the instructions above. Thank you.

  • Profile Image

    Answered by traveldiunsa on December 03, 2015 at 01:26 PM

    Hello Mike ¡Thanks for the detailed answer! I just proceed with the instructions, here is the new form:

    https://form.jotform.com/53364754721963

     

    However in the first field this option: 

    is like blocked, so I can enter and expand that field. It´s not the first time I get this option like this in other forms, appreciate your help.

  • Profile Image
    JotForm Support

    Answered by Mike_G on December 03, 2015 at 02:41 PM

    I'm not sure what's blocking the cog-wheel icon for you to change the properties of the field. I have cloned your new form(here's the clone version of it: https://form.jotform.com/53365763088970) and I was able to expand the first field.

     



    Let us know if you need any further assistance. Thank you.

  • Profile Image

    Answered by traveldiunsa on December 04, 2015 at 10:40 AM

    Thanks, I proceed to create a new field and delete de first one, but after that the block appeared again. I notice that happens when i have this icon above the field also

    Thanks!

  • Profile Image
    JotForm Support

    Answered by Mike on December 04, 2015 at 11:35 AM

    I have checked the 'Formulario de Pre-Inscripción' form in editor, but everything appears to be working fine.

    Is this still happening on your end when you select the first field, or in some other way?

  • Profile Image

    Answered by traveldiunsa on December 04, 2015 at 11:45 AM

    Yes, directly when I enter to the form in my end. Here you can see a demo:

    http://ge.tt/86TUB3T2/v/0?c

    Thanks!

     

  • Profile Image
    JotForm Support

    Answered by Mike on December 04, 2015 at 12:15 PM

    Thank you for the video, we can see the problem now. We will handle it on a separate thread.

    http://www.jotform.com/answers/718106