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:

Contact form fields in columns

Other Articles