How to style forms with a custom layout? (involves multiple columns)

  • 23 April 2018
  • 4 replies
  • 324 views
T

I want to achieve a form that looks like this:

https://imgur.com/z4rnxai

It would be trivial to do with HTML/CSS, but I can’t quite figure out how to do it using the Unbounce template. It seems like the entire form has to be either one or two column.

What’s the best way to achieve the desired result?

Thanks for the help!

4 replies

Caroline
Userlevel 5
Badge +2

Hi @toads

It is not possible to do with the UB UI alone, but try out this script that was posted previously:

I have been looking for an easier way myself!

D

Hi! I´m a bit stuck with the step one.
How am I supposed to add a box to each form field if all my form fields are tied up together? (i. e. I cannot put a field inside a box without putting the other ones as well).

I´m sure I´m missing something.

Would anyone be so kind to offer a little explanation or a video about how to achieve this?

Thanks.

Caroline
Userlevel 5
Badge +2

HI @Dario

You don’t place the field inside the box.
Start with just laying out your boxes. The script will essentially turn the boxes into fields.

Hope that helps!

Guy_Edwards

Hi @Caroline - the styling doesn’t stay when using the script. Do I have to manually update the CSS to keep the styling?

Reply


Terms & ConditionsCookie settings