Home > Technical Support > Tips & Tricks > Contact form fields in columns

Contact form fields in columns

If you need to request a lot of info from customer when he is submitting a ticket via contact form you might end up with a really long form where all the fields are in a single column. You might want to separate all the fields to multiple columns. You can do it by adding the following CSS to the form via Configuration->Contact form->In-page Forms where you need to edit your form and then go to Contact form->Design and at the bottom click on "set custom CSS"

Here is the code to add:
 

.g-FormField2 {
    display:inline-block;
    width:32%;
}

.g-FormField2>g-FormField2-InputContainer>g-FormField2-InputPanel>MessageArea>textarea {
    display:block;
    width:97%;
}

#mainElement {
    width:1000px !important;
}

In case you want to have 2 columns then instead of width:32% have width:49%. Here is how it might look in the end:

 

Ready to try LiveAgent?

It's free for the first 14 days! No credit card required.

Get Started
We work well with others...
Magento Joomla Wordpress Mailchimp
Contact us

support@liveagent.com

+1-800-811-6590 (Toll Free in USA & Canada)

+421 2 33 456 826 (European Union & Worldwide)

Quality Unit, LLC 616 Corporate Way, Suite 2-3278 Valley Cottage, NY 10989

Stay in touch
Blog Google+
© 2004-2020 LiveAgent.com, All rights reserved