CosminV of Technical Support
11/13/2019 - 2:09 PM

How to add two horizontal fields to your form || Helpcenter Update

Article: https://help.instapage.com/hc/en-us/articles/206118248-How-to-add-two-horizontal-fields-to-your-form

Works ONLY if field names are INSIDE input fields.

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

<script>
var inputField = document.querySelectorAll('form.form .form-input');

// 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>
case2.html
content_copyfile_download
<!-- Target all fields present in the form and align them in two columns -->
<!-- Insert code in Settings -> Javascript -> Footer -->
<script>
var inputFieldOdd = document.querySelectorAll('form.form .form-input:nth-of-type(odd)');
var inputFieldEven = document.querySelectorAll('form.form .form-input: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: 768px){  
  	.evenClass {
    	float: right;
      	width: 47%;
    }
  	.oddClass {
    	float: left;
      	width: 47%;
    } 	
}
</style>
case3.html
content_copyfile_download
<!-- Align 3 form fields horizontal -->
<!-- Insert code in Settings -> Javascript -> Footer -->
<script>
var inputField = document.querySelectorAll('form.form .form-input');

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: 768px){  
  	.one-third {
    	float: left;
      	width: 32%;
      	margin-right: 2%;
    }
  
  	.last-col {
      margin-right: 0;
    } 	
}
</style>
case4.html
content_copyfile_download
<!-- Re-align the fields on all the forms from a certain page -->
<!-- Insert code in Settings -> Javascript -> Footer -->
<script>
var firstInputField = document.querySelectorAll('form.form .form-input:nth-of-type(1)');
var secondInputField = document.querySelectorAll('form.form .form-input:nth-of-type(2)');

if (window.innerWidth > 768){
	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>