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

    Configurable List: How to make the widget responsive?

    Asked by Fabioleite on May 26, 2017 at 09:00 AM

    Gerente, me ajuda, rsrs no formato mobile, o formulário não fica perfeito, não cabe na tela do celular. o que eu faço??? me ajude. por favor.

     

    segue foto em anexo.

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 26, 2017 at 10:57 AM

    I can see the issue is related to the field "Faça seu pedido:" which is a Configurable List widget, do note that this will require some CSS code, I will work on it and will get back to you as soon as possible. 

     

  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 26, 2017 at 11:33 AM

    Please, inject the following CSS code to your form in order to display the widget properly in mobile devices: 

     

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

     

     

            /* Custom injected code*/

     

            th {

                display: none;

            }

     

            tr {

                display: block;

            }

     

            .col1:before, .col2:before, .col3:before, .col4:before,.col5:before {

     

                font-weight: bold;

     

                display: block;

     

            }

     

           /* naming fields */

            td.col1:before {

                content:"Produto";

            }

     

            td.col2:before {

                content:"Quant.";

            }

     

            td.col3:before {

                content:"Tam.";

            }

     

            td.col4:before {

                content:"Marca";

            }

     

            td.col5:before {

                content:"Cores";

            }

     

            /* positioning fields */

     

       td.col1 {

                display: block;

                position: relative;

                top: 3px !important;

                margin-left: 0px;

                width: 192px;

            }

     

       td.col2 {

        display: block;

        position: relative;

        top: -37px !important;

        margin-left: 140px;

        width: 192px;

    }

     

            td.col3 {

                display: block;

                position: relative;

                top: -28px !important;

                margin-left: 0px;

                width: 192px;

            }

     

            td.col4 {

                    display: block;

        position: relative;

        top: -126px !important;

        margin-left: 141px;

        width: 192px;

            }

     

            td.col5 {

                display: block;

                position: relative;

                top: -62px !important;

                margin-left: 0px;

            }

     

     td.col6 {

                display: block;

                position: relative;

                top: -55px !important;

                margin-left: 0px;

            }

          

     

    button.add {

        margin-top: -28px;

        position: relative;

        display: block;

    }

    }

    To inject the code, click on the widget and wizard icon, go to the Custom CSS tab and paste the given code: 

    You can also see the result on this form: https://form.jotform.com/71454538541963 

    Hope this helps. 

  • Profile Image

    Answered by Fabioleite on May 26, 2017 at 12:59 PM

    :) vou tentar

  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 26, 2017 at 01:40 PM

    Your last comments did not reach this thread, but I received them in my email. 

    FALTA APENAS ESSE DETALHE. O CAMPO (PRODUTO) ESTA MUITO PERTO DO CAMPO (QUANT.)

    Please, on the given code, replace the CSS for the "td.col2" and "td.col4" with the corresponding code below: 

    td.col2 {

        display: block;

        position: relative;

        top: -37px !important;

        margin-left: 160px;

        width: 192px;

    }

    td.col4 {

        display: block;

        position: relative;

        top: -126px !important;

        margin-left: 160px;

        width: 192px;

    }

    This way the fields are separated a bit and still displayed aligned. 

    Hope this helps. 

  • Profile Image

    Answered by Fabioleite on May 26, 2017 at 01:43 PM
    AGORA É APENAS ARRUMAR O CAMPO (PRODUTO) NO LUGAR CORRETO.
    [image: Imagem inline 1]
    2017-05-26 12:33 GMT-03:00 JotForm :
    ...
  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 26, 2017 at 01:53 PM

    Unfortunately, your image did not reach this thread, could you please try to upload it following the steps on this guide: How-to-add-screenshots-images-to-questions-in-support-forum

    Also, may we know the device you're testing on? 

    This will help us to test on the same device as well and view the layout you're seeing. 

    We will wait for your response. 

  • Profile Image

    Answered by Fabioleite on May 26, 2017 at 02:43 PM
    PLEASE SEND ME THE ENTIRE CODE AGAIN, I TRIED TO JOIN THE CODES, BUT THE
    SITUATION WAS WORSE. FOR GENTILEZA, SEND OR COD. CSS COMPLETE, NOT TO HAVE
    ANY ERROR, BECAUSE I AM LAY IN THIS SUBJECT CODE, SEE HOW IT WAS ALL WRONG
    MY FORM ... AGUARDO. T +
    2017-05-26 14:53 GMT-03:00 JotForm :
    ...
  • Profile Image

    Answered by Fabioleite on May 26, 2017 at 03:03 PM

    ok. vc pode me mandar o codigo completo perfeito? eu tente juntar os codigos, mas nao deu muito certo, por favor me envia ele pronto só pra colar por favor. que em seguida ja quero enviar o formulario para meus clientes acessarem. grato.

     

    OK. Can you send me the perfect complete code? I tried to join the codes, but it did not work out very well, please send me it ready just to paste please. Which then I want to send the form for my clients to access. Grateful.
  • Profile Image
    JotForm Support

    Answered by John_Benson on May 26, 2017 at 04:18 PM

    You can clone the form of my colleague that he provided so you can check the custom CSS code, here's the link: https://form.jotform.com/71454538541963

    Here's the guide to cloning a form: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Here's a screen animation guide to copy the custom CSS code:

    We can't view the image or screenshot you're trying to share. Please follow this guide on how to add an image to the Support Forum:

    1. Log in to your account.
    2. Click this link: https://www.jotform.com/answers/1155502
    3. Scroll down and click the Image/Edit image button and select the image you want to share. 

    We'll wait for your response. Thank you.

     

  • Profile Image

    Answered by Fabioleite on May 27, 2017 at 06:19 PM

    Amigos me manda o codigo pra arrumar a versao mobile. estou usando um samsung s7

    segue a foto em anexo. veja como esta com defeito em meu celular.

    por favor preciso do codigo completo, no jeito de copiar e colar. completo. ok?

  • Profile Image
    JotForm Support

    Answered by Mike_G on May 27, 2017 at 08:49 PM

    We appreciate you providing a screenshot of how the form looks like in your form. In order for me to further help you, I have created a clone version of your form to my account. In the screenshot below, notice that we both got the same outcome.

    I also created a clone version of my colleague's form in my account and tested it.

    Notice that it shows perfectly on the same device.

    However, when I copied the Custom CSS codes of the Configurable List widget in the clone version of my colleague's form to the Custom CSS tab of the Configurable List widget in the clone version of your form after removing the existing custom CSS there, I got what is shown in the image below:

    Notice that the Producto drop-down field is longer it reached the Quantidade Number field.

    That is happening because the texts of the options of the drop-down field in my colleague's form are shorter than what is in your form.

    To fix the issue, I have made just a few changes with the Custom CSS codes that my colleague used in his form.

    Then, I applied it to the clone version of your form.

    You can find the CSS codes in this link: https://pastebin.com/RQYtXA7G

    and here is the clone version of your form with the new CSS codes: https://form.jotformpro.com/71468252590965

    Result:

    I hope this helps. If you still weren't able to get it fixed on your end, please let us know. Also, may we ask your permission to apply the changes directly to your form to help you?

    Thank you.

  • Profile Image

    Answered by Fabioleite on May 27, 2017 at 08:57 PM

     

    The work of you is aplausivo, inda more on a Saturday night, rsrs addicted to work? Or just like helping people? PLEASE PLACE NEW CODE IN MY FORM. YOU HAVE MY AUTHORIZATION NOW AND ALWAYS. PLEASE PLACE FOR ME, THIS IS AUTHORIZED ... SO I WILL FEEL SAFER. GRATO ... VERY GRATEFUL.

  • Profile Image
    JotForm Support

    Answered by Mike_G on May 27, 2017 at 09:26 PM

    You are most welcome!

    We appreciate you granting us permission to make changes to your form. With that, I was able to apply the necessary CSS codes to fix the issue you are having.

    If you have any further questions, please do not hesitate to contact us again anytime.

    Thank you.