# Form multiple selection list in columns

**URL:** <https://community.hubspot.com/t/form-multiple-selection-list-in-columns/32226>\
**Category:** CMS Development\
**Created:** [February 24, 2021, 10:45am UTC](https://community.hubspot.com/t/form-multiple-selection-list-in-columns/32226 "2021-02-24T10:45:21Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![EBernaldo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ebernaldo/32/35493_2.png) [@EBernaldo](https://community.hubspot.com/u/EBernaldo)\
**Post date:** [February 24, 2021, 10:45am UTC](https://community.hubspot.com/t/form-multiple-selection-list-in-columns/32226/1 "2021-02-24T10:45:21Z")

</div>

Hi everyone,

I don’t know if anyone can help me, I am trying to get the text [in this form](https://share.hsforms.com/1U66w45IeTdi2L3QCYzqMAA53g18) on the Section 6, to be displayed in two columns. Can anyone help with the CSS?

Thank you in Advance

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [February 24, 2021, 10:58am UTC](https://community.hubspot.com/t/form-multiple-selection-list-in-columns/32226/2 "2021-02-24T10:58:32Z")

</div>

Hi @EBernaldo if you mean the “Type of Enquiry/Profile” section this should do the trick:

```lia-code-sample
.hs-form __field__ options__container{
 display: flex;
 flex-flow: row wrap;
}
.hs-form __field__ options__container div {
 flex: 0 1 50% !important;
}

```

Looks like the below. You can add a max-width to the container if you want to constrain how wide the options can go

 ![38564i688C47D7B65E899A.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/c/7/c7771f2cf5cc00fccecae47a4b8f372f49f209f5.png)

---

<div class="post-metadata">

**Author:** ![EBernaldo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ebernaldo/32/35493_2.png) [@EBernaldo](https://community.hubspot.com/u/EBernaldo)\
**Post date:** [February 24, 2021, 11:00am UTC](https://community.hubspot.com/t/form-multiple-selection-list-in-columns/32226/3 "2021-02-24T11:00:45Z")

</div>

Thank you so much! I will try that!

---

<div class="post-metadata">

**Author:** ![CBillings](https://avatars.discourse-cdn.com/v4/letter/c/3bc359/32.png) [@CBillings](https://community.hubspot.com/u/CBillings)\
**Post date:** [November 17, 2022, 12:10pm UTC](https://community.hubspot.com/t/form-multiple-selection-list-in-columns/32226/4 "2022-11-17T12:10:49Z")

</div>

Where do you put this code? Thankls

---

<div class="post-metadata">

**Author:** ![mkarsten](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mkarsten/32/70521_2.png) [@mkarsten](https://community.hubspot.com/u/mkarsten)\
**Post date:** [April 3, 2023, 6:39pm UTC](https://community.hubspot.com/t/form-multiple-selection-list-in-columns/32226/5 "2023-04-03T18:39:18Z")

</div>

I’m not sure what I’m doing wrong, but I’m not getting the 2 columns with the code you provided. I have access to the page template to add code there, but I get the same results there and in advanced settings in the page settings for the head html. The form is still rough, but following are some screen caps, and here’s the preview link: [https://info.pitsco.com/communicationprefs2?hs\_preview=AmbnWXBT-108916143911](https://info.pitsco.com/communicationprefs2?hs_preview=AmbnWXBT-108916143911) . Any ideas of what else I can try?

 ![Screen Shot 2023-04-03 at 1.35.15 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/8/58d8104b9e15959cfaafaa4a61131cf14a33d241.png)

 ![Screen Shot 2023-04-03 at 1.37.11 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/6/64db23ae299a4cca341dc7ea951ee2f3cbfef655.png)

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [April 4, 2023, 11:28am UTC](https://community.hubspot.com/t/form-multiple-selection-list-in-columns/32226/6 "2023-04-04T11:28:32Z")

</div>

```lia-code-sample
.inputs-list.multi-container {
 display: flex;
 flex-flow: row wrap;
 max-width: 50%;
}
.inputs-list.multi-container li {
 flex: 0 1 50%;
}

```

 ![piersg_0-1680607642858.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/7/1754831ff20ea6fdc0c96d998707ac1fcd9d6c16.png)

---

<div class="post-metadata">

**Author:** ![mkarsten](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mkarsten/32/70521_2.png) [@mkarsten](https://community.hubspot.com/u/mkarsten)\
**Post date:** [April 4, 2023, 1:35pm UTC](https://community.hubspot.com/t/form-multiple-selection-list-in-columns/32226/7 "2023-04-04T13:35:38Z")

</div>

That did it! Thanks so much.🙂

---

<div class="post-metadata">

**Author:** ![mkarsten](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mkarsten/32/70521_2.png) [@mkarsten](https://community.hubspot.com/u/mkarsten)\
**Post date:** [April 4, 2023, 6:43pm UTC](https://community.hubspot.com/t/form-multiple-selection-list-in-columns/32226/8 "2023-04-04T18:43:39Z")

</div>

Still getting approval, but got what I was shooting for with the code provided. I wasn’t sure whether to use both the original and add on or replace the original, but with the newest code at the end is working, so… Also adjusted for mulitple columns, not only 2. sharing the following in hopes it helps someone else.

Here’s the preview: [https://info.pitsco.com/notificationprefs?hs\_preview=AmbnWXBT-108916143911](https://info.pitsco.com/notificationprefs?hs_preview=AmbnWXBT-108916143911)

And here’s the code I added to the head:

\<style\>  
.hs-form\_\_field\_\_options\_\_container{  
display: flex;  
flex-flow: row wrap;  
}  
.hs-form\_\_field\_\_options\_\_container div {  
flex: 0 0 100% !important;  
}  
.inputs-list.multi-container {  
display: flex;  
flex-flow: row wrap;  
max-width: 100%;  
}  
.inputs-list.multi-container li {  
flex: 0 1 20%;  
}  
\</style\>

---

<div class="post-metadata">

**Author:** ![EBernaldo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ebernaldo/32/35493_2.png) [@EBernaldo](https://community.hubspot.com/u/EBernaldo)\
**Post date:** [February 25, 2021, 11:23am UTC](https://community.hubspot.com/t/form-multiple-selection-list-in-columns/32226/9 "2021-02-25T11:23:29Z")

</div>

Hi @piersg and thank you for your response!!!😊

I asked support and they sent me here, because the problem is that I cannot change anything on the forms in most landing pages. This is where the form will be, and I was told by support that I need to go into the landing page itself:

Configuration\> Advanced configuration ( if it is available) and just paste the CSS code there on the HTML Head section.

But it doesn’t work. I don’t think it’s meant to be pasted there? Am I right?

I am new to HS, so don’t really know how to do any of this, so I would really appreciate your help.

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [February 25, 2021, 11:25am UTC](https://community.hubspot.com/t/form-multiple-selection-list-in-columns/32226/10 "2021-02-25T11:25:14Z")

</div>

Hi @EBernaldo, yes you can add CSS in the HTML head section in the advanced settings. However as it’s HTML you need to wrap the CSS in \<style\> tags

```lia-code-sample
<style>
.hs-form __field__ options__container{
 display: flex;
 flex-flow: row wrap;
}
.hs-form __field__ options__container div {
 flex: 0 1 50% !important;
}
</style>

```

---

<div class="post-metadata">

**Author:** ![EBernaldo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ebernaldo/32/35493_2.png) [@EBernaldo](https://community.hubspot.com/u/EBernaldo)\
**Post date:** [February 25, 2021, 11:34am UTC](https://community.hubspot.com/t/form-multiple-selection-list-in-columns/32226/11 "2021-02-25T11:34:45Z")

</div>

Hi, @piersg It doen’t work either I am afraid…😪

[https://landing-pages.samoaindustrial.com/en/samoa-directflotechnology](https://landing-pages.samoaindustrial.com/en/samoa-directflotechnology)

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [February 25, 2021, 11:52am UTC](https://community.hubspot.com/t/form-multiple-selection-list-in-columns/32226/12 "2021-02-25T11:52:42Z")

</div>

That page doesn’t have the same " **Type of Enquiry / Profile"** section. Do you want to apply this to the “ **Distribution Network** ” section?

---

<div class="post-metadata">

**Author:** ![EBernaldo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ebernaldo/32/35493_2.png) [@EBernaldo](https://community.hubspot.com/u/EBernaldo)\
**Post date:** [February 25, 2021, 12:09pm UTC](https://community.hubspot.com/t/form-multiple-selection-list-in-columns/32226/13 "2021-02-25T12:09:30Z")

</div>

Sorry @piersg , it just wasn´t refreshing content properly, it’s A/B testing but it has Type of Enquiry / Profile on both forms, looks like it’s doing it now, I deleted both forms and pasted them again.

I am going to create a new property with a long list called YOUR INDUSTRY and I need for both lists to split in 2 columns on multiple selection lists. I was told that multiple selectionis not available on a dropdrown list, so this is the only solution I can thing of.