NOTE: The codes provided in this article are for desktop use only. On mobile devices, the form fields will show in one column.
The code is also only intended for regular forms. It will not work for multistep forms. If you would like to make it work for mobile or multistep, you can edit it if someone from your team has the necessary coding knowledge, but note that we can only provide troubleshooting for our code, not for altered versions.
NOTE: The scripts provided below will not work if the Inline Style Editor is activated for the form where you're trying to implement them.
The first step is adding the following snippet to the Javascript - Footer section of your page:
Next, you will need to pick which type of arrangement you would like from the list below and paste the associated code in the HTML/CSS - Head section of your page:
1. Target exactly which 2 form fields you would want to align horizontally
Make sure to edit the code and add the correct field numbers in between parentheses and the result will look like the screenshot below. To count the fields, do so in the Form builder (hidden fields are counted too) and start from the top.
2. Target all fields present in the form and align them in two columns
The above code will make your form look like this:
3. Align 3 form fields horizontally
Make sure to edit the code and add the correct field numbers in between parentheses and the result will look like the screenshot below. To count the fields, do so in the Form builder (hidden fields are counted too) and start from the top.
NOTE: You will only see the changes in the live environment, not in the builder.