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

  • tonyburkinshaw
    Asked on October 1, 2015 at 5: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)

  • mert JotForm UI Developer
    Replied on October 1, 2015 at 7: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.

    My Embedded Form Isnt Mobile Friendly Screenshot 20

     

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

    Thanks.

  • tonyburkinshaw
    Replied on October 1, 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?)

     

  • mert JotForm UI Developer
    Replied on October 1, 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.