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

    Form not responsive

    Asked by mwheat on June 17, 2016 at 06:47 AM

    Afternoon

     

    I've created a form from the default template and ticked the box, but it doesn't resize for mobile. the columns become too small for input?

    https://www.ukgirlthing.co.uk/activity-only/bubble-football

     

    Also, I've removed the phone number and replaced it with a plain text box field called phone number, but the original is still showing on the form on the web page?

     

    Is there anything i can do?

     

    Thanks

    Matthew

    form not responsive
  • Profile Image
    JotForm Support

    Answered by EltonCris on June 17, 2016 at 09:44 AM

    Hello Mattew,

    1. The single textbox phone number appears of be showing on your page now. Could be a delay on form update but it should be fixed now.

    2. With regards to the responsiveness of the form, note that JotForm is responsive by default. What causes your form not to expand on mobile is the custom CSS codes injected to your form. See the following image:

    So to fix this, you have to make the width 100% when form is viewed on mobile. Inject this CSS codes to your your form.

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

    #id_3, #id_6, #id_4, #id_8, #id_9, #id_15, #id_11, #id_12, #id_13, #id_14, #id_16, #id_20 {

        width: 100%;

    }

    [data-type="control_datetime"] span.form-sub-label-container {

    width: 28%;

        margin-right: 0;

     

    }

    [data-type="control_time"] span.form-sub-label-container {

        width: 30%;

    }

    #id_5 {width: 100%;}

    #id_21, #id_17 {

        width: 100% !important;

    }

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes (paste it into the botom section)

    This should give you the following result:

    Hope this helps!

  • Profile Image

    Answered by mwheat on June 17, 2016 at 10:35 AM

    Your support team are great - even worked up the code for me, thanks!

    I've added it in though, and it still performing the same?

    Anything else I need to do?

     

    thanks

  • Profile Image
    JotForm Support

    Answered by BDAVID on June 17, 2016 at 11:51 AM

    You are correct, this can be fixed by adding the "!important" property to the code my colleague provided, so replaced it for this one:

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

    #id_3, #id_6, #id_4, #id_8, #id_9, #id_15, #id_11, #id_12, #id_13, #id_14, #id_16, #id_20 {

        width: 100% !important;

    }

    [data-type="control_datetime"] span.form-sub-label-container {

    width: 28% !important;

    margin-right: 0 !important;

    }

    [data-type="control_time"] span.form-sub-label-container {

        width: 30% !important;

    }

    #id_5 {

    width: 100% !important;

    }

    #id_21, #id_17 {

        width: 100% !important;

    }

    }

    Result: https://form.jotform.com/61684927481972 

    Let us know if you need more help.

  • Profile Image

    Answered by mwheat on June 17, 2016 at 12:38 PM

    Perfect!  thanks so much.

    you guys have the best support team - so fast!

  • Profile Image
    JotForm Support

    Answered by Charlie on June 17, 2016 at 01:32 PM

    In behalf of my colleagues, you are most welcome. We're glad that the custom CSS codes worked for you.

    Should you need our assistance again, please do not hesitate to contact us here.

    Thank you.