Contact form fields in multiple columns

If you need to request a lot of info from a customer when he is submitting a ticket via contact form you might end up with a 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 your form where you need to edit your contact form and navigate in its settings to Contact Form > Design > "edit custom CSS" at the very bottom.

Add the following code to the Custom CSS window:

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

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

In case you want to have 3 columns then instead of width: 49% use width: 32%.

Here is how it might look in the end:

×