Form multiple selection list in columns

[EBernaldo]

Hi everyone,

I don’t know if anyone can help me, I am trying to get the text in this form on the Section 6, to be displayed in two columns. Can anyone help with the CSS?

Thank you in Advance

[piersg]

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

.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

[EBernaldo]

Thank you so much! I will try that!

[CBillings]

Where do you put this code? Thankls

[mkarsten]

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 . Any ideas of what else I can try?

[piersg]

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

[mkarsten]

That did it! Thanks so much.

[mkarsten]

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

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>

[EBernaldo]

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.

[piersg]

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

<style>
.hs-form__field__options__container{
 display: flex;
 flex-flow: row wrap;
}
.hs-form__field__options__container div {
 flex: 0 1 50% !important;
}
</style>

[EBernaldo]

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

https://landing-pages.samoaindustrial.com/en/samoa-directflotechnology

[piersg]

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

[EBernaldo]

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.