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 the attached form to be correctly aligned with all the boxes same size and fit on to mobile phone screen?

    Asked by jbefooty on August 29, 2016 at 06:57 AM Page URL:
    https://form.jotformeu.com/62383912423353

    size mobile mobile responsive make form responsive alignment
  • Profile Image
    JotForm Support

    Answered by Jan on August 29, 2016 at 11:02 AM

    I've checked your form and I can verify that it is not responsive. It is because you specified the fields in pixels using CSS. Please give me more time about this issue. I will contact you once I have a solution. Thank you for your patience.

  • Profile Image

    Answered by jbefooty on August 29, 2016 at 11:47 AM

    Thank you Jan I am very new to this and appreciate your help

    Regards

     

    John

  • Profile Image
    JotForm Support

    Answered by Jan on August 29, 2016 at 03:29 PM

    Thank you for patiently waiting. I cloned your form and delete all the CSS on it. After that, I removed the 50000px width of the 3rd matrix table (Group C) and then resize TextArea Autosize widget. Here's the link of the cloned form: https://form.jotform.com/62415351286959. You can clone it if you like.

    Here's a guide on how to fix the form:

    1. I removed the Table Width of the 3rd Matrix table (Group C). Select the field and then click the properties icon. Go to the Options tab and remove the value 50000px. After that, click the Save Changes button.

    2. Insert the Mobile Responsive Widget on the form.

    3. Change the width of TextArea Autosize widget to 383px. Select the widget and then click the gear or properties icon. Change the width to 383

    4. Go to the Form Designer.

    5. Under the Design tab, go to the Form Layout section. After that, please enable the "Make this form responsive" option.

    6. In the Form Designer, go to the CSS tab and delete all the CSS code.

    7. Please paste the custom CSS code below in the CSS editor.

    li#id_1, li#id_3, li#id_4, li#id_5, li#id_6, li#id_7, li#id_8, li#id_9, li#id_11 {
    width : 100% !important;
    }

    .form-input-wide.jf-required {
    width : 100% !important;
    }

    .form-matrix-table {
    max-width : none !important;
    }

    .form-line {
    width : 100% !important;
    }

    .form-section.page-section {
    width : 100% !important;
    }

    @media screen and (max-width: 768px) and (min-width: 480px){
    .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {
    width : 100px !important;
    }
    }

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){
    .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {
    width : 100px !important;
    }
    }

    iframe#customFieldFrame_11 {
    width : 100% !important;
    }

    .span_print {
    color : #353839;
    }

    #input_2 {
    color : #353839;
    }

    .form-label.form-label-top {
    color : #436CB9;
    text-align : left;
    }

    .form-dropdown {
    width : center;
    border-radius : 12px;
    height : 22px;
    line-height : 22px;
    box-sizing : 2px;
    border-width : 32;
    }

    .form-section.page-section {
    text-align : left;
    }

    .form-line {
    color : #436CB9;
    }

    .form-submit-button {
    color : #436CB9;
    }

    8. Save the changes and then preview the form.

    Here's the result:

    Hope that helps. Let us know if you need further assistance. Thank you.

  • Profile Image

    Answered by jbefooty on August 30, 2016 at 04:12 AM

    Jan

    Thank you ever so much that works perfectly and I followed your very clear instructions so as I can hopefully understand form creation a bit more.

    Many thanks for all your efforts

     

    Best wishes

     

    John

  • Profile Image
    JotForm Support

    Answered by Jan on August 30, 2016 at 11:30 AM

    You're welcome. Glad to hear that the solution I provided resolved your issue. If you need any help, let us know. Thank you.