How can I format the returned data of our form so it's easy to scan visually?

  • Profile Image
    Asked on November 03, 2017 at 03:38 PM

    Hi there, we currently have a PDF that people fill by hand (health questionnaire). When they come for their consultation, we can scan down the checkboxes and see very quickly where their problem areas are - it's a visual thing.

    With the data being returned to us from Jotform, it's just the answer being returned (most questions are: "Always - Often - Sometimes - Rarely - Never - N/A").

    Is there a way that we can have the data returned with some kind of visual cue? Ideal would be to simulate what we've got, so it shows the position within the possible answers. Or if we could colour-code the responses so the above array returns blue-green-yellow-orange-red for example.

    Please advise how we can format the output of our form data so it can visually help our practitioners to quickly scan their patients' info.

    I tried attaching our PDF form but I'm not sure that my posts are submitting with it attached.

    Thank you!

  • Profile Image
    Answered on November 03, 2017 at 03:47 PM

    I had a look at your form and it seems that for the purposes of formatting the output, using an input table field for your questions instead of individual single choice fields would be best:


    The data would be output in a table rather than in individual questions.

  • Profile Image
    Answered on November 03, 2017 at 04:21 PM

    That's perfect, thank you.

    On our paper form, we have a "comments" section after each lot of questions, where they can add extra info to qualify their responses. With the paper form, they can scan up and look at their answers. With JotForm, they will have answered the table and moved to a new screen so they won't have these cues. Is there any way to bring across these cues to the screen that has the "Comments" field? Or can they appear on the same screen?

  • Profile Image
    Answered on November 03, 2017 at 04:29 PM

    When using the new form layout, all questions are one question per page.  If you want to include an extra section on the same page, it would require switching to the old form layout.  That can be done from the form settings near the bottom of the list:


    Change to "All questions in one page" and it will allow for multiple fields in the same page.  You can then use page breaks to create form pages and insert your text field(s) below the table.

  • Profile Image
    Answered on November 03, 2017 at 05:19 PM

    I've designed the whole thing with the mutiple questions per page.

    It doesn't work on iPhone.

    Please suggest what I can do to make this mobile-friendly. I can't get past the first page, and the date selector doesn't work.

  • Profile Image
    Answered on November 03, 2017 at 05:32 PM

    By default, all of our forms are mobile responsive.

    If you are having issue with mobile, please follow any of the following links to make your form mobile friendly(responsive).  


    a. While on the form builder, click the Designer icon. This will open up the mini designer.

    b. In the mini designer window, click the Advanced Designer button to open the full designer.
    c. In the Advanced Designer, click the Form Layout on the right panel and check the Make this form responsive option.
    2. Inject the following CSS to your form: How to Inject Custom CSS Codes to your Form


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




    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;



    margin-left:0 !important;


    .form-input {

    width: 100%;



    width: 98%;


    .form-sub-label-container {

    width: 100%;



    /*--for the address table--*/

    span.form-sub-label-container + span.form-sub-label-container {

    margin-right: 0;


    .form-address-table select,




    .form-address-table .form-sub-label-container {

    width: 100%;




    width: 99%;



    .form-address-table td, .form-address-table th {

    padding-bottom: 10px;

    padding: 0 0 10px 0;



    Let us know if you are still having this issue.

  • Profile Image
    Answered on November 03, 2017 at 08:25 PM

    Thank you. The designer did not have the checkbox option so I inserted the CSS and now it's working.

    Next question:

    On the iPhone, the columns lables in the table field are only 2-4 characters wide, so the labels are splitting across several rows. Can I set the table columns as a percentage value? I would have the question as 2/8ths and each response column as 1/8th.
  • Profile Image
    Answered on November 03, 2017 at 09:11 PM


    We will answer your other question to a separate thread here