How to properly set and align checkbox buttons?

question is, is there anyway i can have the radio buttons across instead of vertical? Example the above screen shot. I'd like to have the 3 Started buttons across, the 3 Advanced across, and the 3 Excellent, this way the form isn't so long

I will work on this issue for you and I will get back once I have a working solution. Since it needs to be adjusted with CSS because of the theme used.

Thank you for your patience.

OK, thanks, I can change the theme I was just playing with colours. Haven't really wrapped my head around everything yet. Need time to watch the videos.

If you can recommend a theme that allows me more freedom in designing the form itself that would be great

If that's the case, then when the theme is removed, you can set that checkbox fields are spread in three columns:

And shrink the field:

And I set the label to be on top so it will align better:

I added some CSS as well, but please check my clone of your form and let us know if that is what you had in mind: https://form.jotformpro.com/72075564385968

Thank you!

This is great, did your CSS help with the formatting? right now the buttons need to be spread apart a bit as they are overlapping. I haven't figured out how do the spacing in the radio buttons, not sure what the padding is, and what input width affects. If you can point me to where I can find this info that would be great

Yes, I fixed the overlapping with CSS, this is the CSS I used:

input#input_9_1 {

    margin-left: 23px;

}

input#input_9_2 {

    margin-left: 23px;

}

input#input_9_4 {

    margin-left: 23px;

}

input#input_9_5 {

    margin-left: 23px;

}

input#input_9_7 {

    margin-left: 23px;

}

input#input_9_8 {

    margin-left: 23px;

}

#input_40_1{

   margin-left: 23px;

}

#input_40_2{

   margin-left: 23px;

}

#input_40_5{

   margin-left: 23px;

}

#input_40_4{

   margin-left: 23px;

}

#input_40_7{

   margin-left: 23px;

}

#input_40_8{

   margin-left: 23px;

}

#input_60_1{

   margin-left: 47px;

}

#input_60_3{

   margin-left: 47px;

}

#input_60_5{

   margin-left: 47px;

}

But it will work on my form only since the IDs are different. Here is how you can find ID in your form: https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names

So you can use the above CSS you will just have to change the ID part (i.e. #input_60_5)

If you need any assistance please get back to us.

Thank you!