How to modify the fields to be responsive

Hi Guys

We have attempted to replicate the attached paper-based form

Could not send the whole form as it's is a PDF, specifically the scoring elements on page 6 and 7, but here is a shared version: https://drive.google.com/file/d/1wCcfWjSLsZyo-wYQIDiQp55p4LoWISoV/view?usp=sharing 

Our attempt is here: https://www.quantumdigital.com.au/mens-health-form  and

Go down to the question: If you have ANY urinary voiding symptoms, please complete the next section (IPSS)

Select: yes (the hidden version is shown)

You will see that this does not work or look good. It most importantly does no work on the mobile at all.

We also need your advice on a workaround for the question: Have you ever had any of the following operations:

This does not work on mobile either

Mark

Greetings Mark.

Thank you for your message.

I have checked the hidden section on the mobile, and it was showing without problems:

If this is not what you would like the form to look like, you can use one of the provided themes, or let us know what would you like to achieve, and we will help you to implement CSS.

You can click here to see how you can apply a theme to your form.

As for the Have you ever had any of the following operations, you can separate each question to a separate field:

I have created a quick form for you:
https://form.jotform.com/201272558517052

I've also added conditions to hide the fields unless the answer is set to Yes.

Feel free to clone my form and test it out. You can click here to see how you can clone forms.

You can also click here to learn more about conditions.

Please let us know if this will work for you or if you have additional questions. 

Thanks, *Bojan_J* for that, but the real issue is the slider with
calculations
Mark
...

Hello Mark - Can you please confirm if you are referring to this (please see my screenshot below)?

The problem is that the labels are too long which is why they are squashed to the left side. However, we can extend the width of the labels container and place the slider below the label.

Can you please confirm if that's what you want?

Yes that may work
Also can the appearance of the slider?
It would be better if it was coloured
Mark
...

Hi Mark,

Do you still need assistance? I checked the form (201261682908860) and the sliders are already got colors.

Let us know if you need further help. Thank you.

Hi
Yes, this was the alternate but it does not calculate a score.
The question above this is the one we need help with:
If you have ANY urinary voiding symptoms, please complete the next section
(IPSS)
- YesNo
Please refer to the attached paper-based version (what we want) and Current
form version, with calculation.
The form version does not look good on PC and not at all on a mobile
Mark
[image: What we want.png]
[image: Current Form.png]
...

Please note that for security reasons, we cannot accept email attachments. To share a screenshot, please follow the guide below:

How-to-Post-Screenshots-to-Our-Support-System (Note: Email Attachment Is Not Supported)

As for your concern, please allow me some time to create a demo form with fixed mobile and colored sliders.

As for the PC layout concern, unfortunately, I am uncertain which part are you referring that "does not look good".

Kindly share a screenshot by following the guide and please explain in detail what you want it to look like.

Kindly check out my demo form here: https://form.jotform.com/201277597502963

If you like the same layout, add this to your form's CSS:

How-to-Inject-Custom-CSS-Codes

iframe#customFieldFrame_132 {

    width: 100% !important;

}

Then add the one below on your widget's CSS:

How-to-Inject-CSS-Codes-to-Widgets

td {

    display: inline-block

}

td.label_row {

    width: 100%;

}

td.slider_.slider_row_ {

    width: 80%;

}

td.value_row {

    width: 10%;

    min-width: 0;

    text-align: center;

    color: #f1a200;

    font-weight: bold;

}

.wrapper {

    border: 3px solid #00b4ff;

}

.slider.noUi-target.noUi-ltr.noUi-horizontal {

    background-color: #504f4f;

    border: 1px solid #504f4f;

    border-radius: 10px;

    box-shadow: none;

    height: 5px;

}

.noUi-origin > .noUi-handle.noUi-handle-lower {

    background-color: #f1a200;

    border-radius: 50%;

    border: 2px solid #fff;

    margin-top: -5px;

}

Desktop:

Mobile: