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>
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.
<!-- 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>
<style>
@media only screen and (min-width: 620px){
.evenClass {
float: right;
width: 47%;
}
.oddClass {
float: left;
width: 47%;
}
}
</style>
<!-- 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>
<style>
@media only screen and (min-width: 620px){
.one-third {
float: left;
width: 32%;
margin-right: 2%;
}
.last-col {
margin-right: 0;
}
}
</style>
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.
