How to Create Multiple Columns in Your Form Layouts with WPForms

WPForms - WordPress Forms Plugin
WPForms - WordPress Forms Plugin
75,105
0
Published 2017-05-24
Depending on how you are wanting your forms set up, you may want to arrange the fields in columns. This helps style the look of your forms an keep certain fields together. WPForms is the most beginner friendly WordPress contact form plugin in the market.

Our Contact form layouts allow you to easily customize the look of your forms to appear how you like.

If you prefer a written tutorial you can take a look at:

wpforms.com/docs/how-to-create-multi-column-form-l…

We took the pain out of creating online forms and made it easy.

Try WPForms today - wpforms.com/

WPForms is the best WordPress contact form plugin in the market. It's both easy and Powerful.

Start by going to the form you are wanting to add the multiple column layout to and double clicking the first field.

Scroll down to advanced options and click on show the layout. Select the type of column and the column you want that field to be.

This will fill out the CSS class that you will need for it to appear that way.

The other thing to do is to select the field size to be how you want.

Go through your other fields and you will be able to do the steps again.

Columns will display when viewing the form on your site but they will not appear inside the form builder for the time being.
All Comments (21)
  • @AmitKrDas-tj4jk
    When I changed the layout to have multiple columns, it causes the fields to become un-clickable. I hope most of us are facing this issue. However after lots of try and error I figure out that this might be due to conflict between css used by wpforms and the template. Good that wpforms allow to play around with style. Goto WPforms >> Settings. Under General Section against ""Include Form Styling", I saw "Base styling only" I changed this to "Base and form theme styling". This worked for me. Hopefully this should solve the issue for all.
  • @bookmoreweddings
    Awesome. Switching from Aweber to you folks! So much easier to build forms.
  • @Phishoil
    Thanks! Simple enough. Would love to see your demo on what happens when the input fields are uneven. Let's say you wanted to put your name, email etc. input fields all in "left" column; then you add your paragraph filed in the "right" column. Perhaps a demo on what happens when there's no input fields in the "left" column at all and everything is in the "right" column.
  • @bilalmalik2511
    Hi! Is it possible to align Submit btn alongside Comment or message input field to save vertical space?
  • @thomasmurphy866
    What should you do if the columns are not lining up next to each other?
  • @leonbramdeo2680
    When I change the layout to have multiple columns, it causes the fields to become unclickable. Now no one can click to enter their info if I want it to look decent :(
  • @MuhammadFaheemAzam
    i don't want to make the fields multi column on mobile, only need on desktop version ,, how i can fix that?
  • @abstract_life
    its not working for me.i have selected the classes in layout , but not working for me in elementor and in simple page .
  • @daniel-ti4no
    Hey guys i'm facing an issue here. The 2 columns layout is not responsive on mobile. maybe some one could help? thanks
  • @webstarx
    How to make one coloumn on mobile screen?
  • @juanmajr10
    Somehow it's not working, any clue why's that?