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

    My Embedded Form Isn't Mobile Friendly. How Can I Improve This?

    Asked by tonyburkinshaw on October 01, 2015 at 05:16 AM

    I've created a simple drop down quiz and embedded it in my website here: Anxiety Quiz

    When I view it on my smartphone, it only shows the drop down answer fields in landscape orientation & even then only shows half the prompts.

    Is this how these forms are supposed to work or have I missed something in the construction of my form? (It is the first form I've used)

    Page URL:
    http://tonyburkinshaw.co.uk/anxiety-quiz/

    Mobile mobile friendly how landscape then and smartphone
  • Profile Image
    JotForm Support

    Answered by mert on October 01, 2015 at 07:23 AM

    Hi,

    This issue can occur, if your form is not mobile responsive. For the quick solution you can add this feature to your form by simply following the tutorial from the link below:

    http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive

     

    If it won't work, you can try adding some custom CSS to make your form mobile responsive. This method is the more advanced one to solve this issue.

    To do that,

    1) First, you need to know about injecting custom CSS to your form. The detailed information about it is given from the following link below:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    2) Add the following custom CSS code to your form by using the method above.

    /*-----------RESPONSIVE LAYOUT-----------*/

     

    .form-line.form-line-column {

    width: 100% !important;

    margin-left:0

    }

     

    .form-line{

    width: 100%;    

    }

     

    .form-textarea,

    .form-textbox,

     

    .form-dropdown{

    width: 100% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

     

    .form-label-left, .form-label-right{

    width: auto !important;

    }

     

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

     

    .form-input {

    width: 100% !important;

    }

     

    .form-all{

    width: 75% !important;

    }

     

    .form-sub-label-container {

    width: 100% !important;

    display: block  !important;

    }

     

    Once, you finished. Your form's view is just like the image below on mobile platforms.

     

    If you need more information about this issue, please let us know.

    Thanks.

  • Profile Image

    Answered by tonyburkinshaw on October 01, 2015 at 10:03 AM

    Many thanks. It worked brilliantly.

    Also

    is there a way to assign points to each drop down answer and give a total at the end of the form?
    (Not sure if I need to start a new question for this?)

     

  • Profile Image
    JotForm Support

    Answered by mert on October 01, 2015 at 10:32 AM

    You are welcome. I'm glad to see that it works.

    Yes, we need to open a new thread for your second question. I moved your second question into a new thread, you can access it from the link below:

    http://support.jotform.com/answers/674492

     

    Thanks.