How to align your form fields horizontally

Please note that the snippets in this article will only work for pages using the new and improved page generator, the Thor Rendering Engine. We recommend testing the snippet functionality in case your page was created before 2019 or duplicated from an older page, as the two render engines have a different code structure in the backend. To migrate your older pages to the new Thor Rendering Engine, you can contact our support team at help@instapage.com

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 noting 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.

Open your landing page editor and paste the 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 this.

Screen_Shot_on_2019-08-07_at_16-54-01.png
2. Target all fields present in the form and align them in two columns
The above code will make your form look like this:
Screen_Shot_on_2019-08-07_at_16-57-56.png
 
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 this:
Screen_Shot_on_2019-08-07_at_16-59-30.png
This solution is a combination between the first two, we are targeting exactly which fields we want to align and also, we are applying these changes only to desktop screen sizes, the form fields will not be aligned horizontally on mobile devices. 

NOTE: The snippets above will work if you are using the inside label setting for your form. If you are using the outside label setting for your form, on top of the code snippets above you need to also add the following snippet to the Javascript - Footer section of your page:

Note: You will only see the changes in the live environment, not in the builder.