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.

Open your landing page editor and paste the codes below in the indicated sections:

1. Target exactly which 2 form fields you would want to align horizontally

<!-- Target exactly which 2 form fields you would want to align horizontally -->
<!-- Insert code in Settings -> Javascript -> Footer -->

<script>
const inputField = document.querySelectorAll('form.form .form-input').length ? document.querySelectorAll('form.form .form-input') : document.querySelectorAll('form.email-form .input-holder');

// will make the first form field smaller
Object.assign(inputField[0].style,{float:"left",width:"47%"});

// will make the second form field smaller
Object.assign(inputField[1].style,{float:"right",width:"47%"});
</script>
The code above will result in 
 
horizontal1.png

In the code above inputField[0] is referring to the first form field and inputField[1] is the second form field, this means that the two will now be aligned horizontally, side by side.

If you would add inputField[1] and inputField[2] instead you will have the first form field (First name) normal and on the second row you will have the Last name and Country fields aligned side by side.

2. Target all fields present in the form and align them in two columns
 
<!-- Target all fields present in the form and align them in two columns -->
<!-- Insert code in Settings -> Javascript -> Footer -->
<script>
const inputFieldOdd = document.querySelectorAll('form.form .form-input').length ? document.querySelectorAll('form.form .form-input:nth-of-type(odd)') : document.querySelectorAll('form.email-form .input-holder:nth-of-type(odd)');
const inputFieldEven = document.querySelectorAll('form.form .form-input').length ? document.querySelectorAll('form.form .form-input:nth-of-type(even)') : document.querySelectorAll('form.email-form .input-holder:nth-of-type(even)');

for (var i = 0; i < inputFieldOdd.length; i++) {
inputFieldOdd[i].classList.add('oddClass');
}
for (var i = 0; i < inputFieldEven.length; i++) {
inputFieldEven[i].classList.add('evenClass');
}

</script>
Insert the code above in Javascript > Footer, and the snippet below in HTML/CSS > Footer:
<style>
@media only screen and (min-width: 620px){
.evenClass {
float: right;
width: 47%;
}
.oddClass {
float: left;
width: 47%;
}
}
</style>
 
In this solution, we will apply the code only for desktop size screens and on mobile devices, the form fields will all show up normally in one column.
 
Result:
 
horizontal2_copy.png
 
3. Align 3 form fields horizontal
<!-- Align 3 form fields horizontal -->
<!-- Insert code in Settings -> Javascript -> Footer -->
<script>
const inputField = document.querySelectorAll('form.form .form-input').length ? document.querySelectorAll('form.form .form-input') : document.querySelectorAll('form.email-form .input-holder');

inputField[0].classList.add('one-third');
inputField[1].classList.add('one-third');
inputField[2].classList.add('one-third','last-col');
</script>
Insert the code above in Javascript > Footer, and the snippet below in HTML/CSS > Footer: 
<style>
@media only screen and (min-width: 620px){
.one-third {
float: left;
width: 32%;
margin-right: 2%;
}

.last-col {
margin-right: 0;
}
}
</style>
Result:
horizontal3.png
This solution is a combination between the first two, we are targeting exactly which fields we want to align by using inputField[0], inputField[1] and inputField[2] and we are also applying these changes only to desktop screen sizes, the form fields will not be aligned horizontally on mobile devices view.
 

4. Re-align the fields on all the forms from a certain page

If you have multiple forms on your page and you want to apply the same style on all of them, then feel free to use the following code snippets. They are simply variations of solutions number 1 and 3.

The following code is similar to solution 1, which renders the first 2 fields horizontal.

<!-- Re-align the fields on all the forms from a certain page -->
<!-- Insert code in Settings -> Javascript -> Footer -->
<script>
const firstInputField = document.querySelectorAll('form.form .form-input').length ? document.querySelectorAll('form.form .form-input:nth-of-type(1)') : document.querySelectorAll('form.email-form .input-holder:nth-of-type(1)');
const secondInputField = document.querySelectorAll('form.form .form-input').length ? document.querySelectorAll('form.form .form-input:nth-of-type(2)') : document.querySelectorAll('form.email-form .input-holder:nth-of-type(2)');

if (window.innerWidth > 620){
for (var i = 0; i < firstInputField.length; i++) {
Object.assign(firstInputField[i].style,{float:"left",width:"47%"});
}
for (var i = 0; i < secondInputField.length; i++) {
Object.assign(secondInputField[i].style,{float:"right",width:"47%"});
}
}
</script>

You’ll notice that not much has changed; we simply used another query selector (nth-of-type). However, in this case, the first field is considered 1, the second - 2 and so on (instead of starting with 0).

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?
4 out of 16 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!