Add line breaks to a paragraph textbox

I'm trying to make the answers of my checkbox appear in a Paragraph textbox. This is how it looks like right now:

I want the answers to appear on top of eachother instead of next to each answer. Like so:

Option 1

Option 3

Option 4

How can I make it do that?

Thanks in advance!

Hey dionkoffie!

You can do that by using a simple CSS code.

It's quite simple and straight forward, here is how you do that:

A) In the form, on the right you have the "Form Designer" button, click on it

B)In the side panel that opened, click on "Styles"

C) Scroll to the bottom and you'll see an "Inject Custom CSS" code box, here you can add the following CSS command:

.form-checkbox-item label {

  height : 30px;

}

I wrote 30px but can change it to number that fit's you best!

Let me know if that's what you were looking for!

Amos

Hey,

Thanks for the quick response! I've injected the CSS code and it seems to be doing something. However it is only affecting the spacing between the options in the checkbox.

When I output the checked boxes in a Paragraph the answers still appear like this:

Instead, I want it to behave like this:

I hope this clears it up a bit.

Thanks!!

Alright, can you link your form so I could have a better look?

Maybe we could try a different approach, try this code:

.form-line {  line-height : 30pt;}

Here is the test form I'm trying to get it to work with: https://form.jotform.com/212091978885067

Greetings dionkoffie,

Thank you for contacting JotForm Support.

Actually all the selected options of the checkbox are treated as a single string value (comma separated text) when dynamically inserted in a paragraph element, unfortunately the only way to modify it in the format you want is by using JavaScript code to replace the commas with line breaks which is not applicable here.

Yet we can apply this format with an alternative workaround by using HIDE/SHOW FIELD Conditions, the idea here is to add 4 paragraphs, each paragraph will have a value of one option of the checkboxes, and to setup a condition for each option so when a checkbox is selected it should show the corresponding paragraph, the setup will look like the below screenshot, please check this guide for more details.

How to Show or Hide Fields Based on User's Answer

I've applied this approach to a cloned version of your form as a demo, you can check it here https://form.jotform.com/212092529620956, you may also clone it to your account so you can be able to review it closely in Form Builder, please follow this guide.

How to Clone an Existing Form from a URL

For a neater look I've applied this custom CSS to the demo form to decrease the spaces between the paragraphs.

#id_7, #id_8,#id_9,#id_10{

  margin-top: 0px !important;

  margin-bottom: 0px !important;

  padding-top: 0px !important;

  padding-bottom:  0px !important;

}

When you finish building your form with this workaround you can get back to us to help you adding the correct CSS code that will work with your updated form.

Please give it a try and let us know if you need further assistance, we are happy to help.