Creating a form with multiple choice and a description under the choice

We cannot seem to get a description (just text about the choice option) to display under the multiple choice without it putting a radio button or check box beside it, can you help?

Hi Jake,

Thanks for reaching out to Jotform Support. Unfortunately, we cannot add a description for each option on your Multiple Choice field. As a workaround, you can add several Multiple Choice fields, and add Paragraph fields for the descriptions of each option. Let me show you how:

1. In Form Builder, click Add a Form Element and add Multiple Choice fields.

2. Add Paragraph fields for the descriptions.

3. Using CSS codes, adjust the margins of the elements. On my demo form, here is my CSS code:

div#cid_4 {

  margin-top: -60px;

  font-size: 11px;

  margin-left: 30px;

}

div#cid_5 {

  margin-top: -80px;

}

div#cid_6 {

  margin-left: 30px;

  margin-top: -115px;

  font-size: 11px;

}

But these codes change depending on the elements you add, so we recommend you set up your form first, and let us know when it is done so we can provide you with the custom CSS codes. Here is the result on my demo form:

If this demo form works, you can follow the steps I provided and let us know when you are done so we can give you the CSS codes.

Give it a try and let us know how it goes.

Hi! Would I need to so a separate Multiple Choice field for each question?

Hi Jake,

That is correct. You need to have separate Multiple Choice fields so we can add a description of every option, as shown on the recent screenshot I provided above. Once you set up your form, we can give you a custom CSS code to make your options appear like there is a description on each of them.

Give it a try and let us know if you need any help.

Below is the link to the form I am working on. Could you possibly apply the CSS code so I can see what it looks like on the app where voting will take place? This is a fairly lengthy list so I want to check the aesthetics before I build out the entire form :-)

https://www.jotform.com/build/242593883095065

Hi Jake,

I cloned and modified your form on my end, and adjusted the margins on the fields. Let me show you how:

1. Copy this CSS code.

div#text_12 {

  margin-top: -70px;

  margin-left: 30px;

}

div#cid_18 {

  margin-top: -80px;

}

div#text_16 {

  margin-top: -125px;

  margin-left: 27px;

}

2. In Form Builder, click the blue paintbrush icon to open Form Designer.

3. Under Styles, scroll down and look for the Inject Custom CSS text area.

4. Paste the CSS code.

Here is the result when viewing your live form:

That's it. You can now add a description for each option in your Multiple Choice fields using CSS code.

Give it a try and let us know how it goes.