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

  • Profile Image
    tonyburkinshaw
    Asked 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)

  • Profile Image
    mert
    Answered 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
    tonyburkinshaw
    Answered 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
    mert
    Answered 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.