Welcome to the Instapage Support Center

|

How to align your form fields horizontally

Note: Make sure your field labels are set as "Inside" for all of your form fields in order for the codes below to work as intended.
Note: The codes provided in this article are for desktop use only. On mobile devices, the form fields will show in one column.

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

<style>
/* Align 2 fields horizontally */
@media screen and (min-width: 768px){
form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

form div,
.input-holder {
width: 100%;
}

/* replace "1" with the number of the first field that you want to align horizontally */
.form.contents > *:nth-child(1), .input-holder:nth-of-type(1),
/* replace "2" with the number of the second field that you want to align horizontally */
.form.contents > *:nth-child(2), .input-holder:nth-of-type(2) {
width: 47%;
}
}
</style>
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
 
<style>
/* Align all fields on 2 columns */
@media screen and (min-width: 768px){
form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.form.contents > *, .input-holder {
width: 47%;
}
}
</style>
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
<style>
/* Align 3 fields horizontally */
@media screen and (min-width: 768px){
form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

form div,
.input-holder {
width: 100%;
}

/* replace "1" with the number of the first field that you want to align horizontally on 3 columns */
.form.contents > *:nth-child(1), .input-holder:nth-of-type(1),
/* replace "2" with the number of the second field that you want to align horizontally on 3 columns */
.form.contents > *:nth-child(2), .input-holder:nth-of-type(2),
/* replace "3" with the number of the third field that you want to align horizontally on 3 columns */
.form.contents > *:nth-child(3), .input-holder:nth-of-type(3) {
width: 32%;
}
}
</style>
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: You will only see the changes in preview mode or on a published page.

Have more questions? Submit a request
Was this article helpful?
5 out of 20 found this helpful

Need Further Help?

Tell us what you need and we will be happy to assist you.

Our team of expert support staff and our community can answer your questions. Submit a ticket, or reach out on live chat!