How to add two horizontal fields to your form

Open your landing page editor and paste the code below under Settings - HTML / CSS, in the Header Section:

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

<script type="text/javascript">
ijQuery( document ).ready(function(){
    // will make the first form field smaller
    ijQuery( 'form.email-form .input-holder:eq(0)' ).css({ float: 'left', width: '47%' }); 
    // will make the second form field smaller
    ijQuery( 'form.email-form .input-holder:eq(1)' ).css({ float: 'right', width: '47%' }); 
}); 
</script>

The code above will result in

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

If you would add eq(1) and eq(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

<style>
@media only screen and (min-width: 640px){  
  	.oddClass {
    	float: right;
      	width: 47%;
    }
  	.evenClass {
    	float: left;
      	width: 47%;
    } 	
}
</style>
<script type="text/javascript">
ijQuery( document ).ready(function(){
  	ijQuery( 'form.email-form .input-holder:odd' ).addClass('oddClass'); 
  	ijQuery( 'form.email-form .input-holder:even' ).addClass('evenClass');
});
</script>

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:

3. Align 3 form fields horizontal

<style>
@media only screen and (min-width: 640px){  
  	.one-third {
    	float: left;
      	width: 32%;
      	margin-right: 2%;
    }
  
  	.last-col {
      margin-right: 0;
    } 	
}
</style>

<script type="text/javascript">
ijQuery( document ).ready(function(){
    ijQuery( 'form.email-form .input-holder:eq(0)' ).addClass("one-third");
    ijQuery( 'form.email-form .input-holder:eq(1)' ).addClass("one-third");
    ijQuery( 'form.email-form .input-holder:eq(2)' ).addClass("one-third").addClass("last-col");
});
</script>

Result:

This solution is a combination between the first two, we are targeting exactly which fields we want to align by using eq(0), eq(1) and eq(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.

<!--START code for horizontal fields - first 2 fields - on all the forms-->
<script type="text/javascript">
    ijQuery(document).ready(function() {
        if ($(window).width() > 640) {
            ijQuery('form.email-form .input-holder:nth-of-type(1)').css({
                float: 'left',
                width: '47%'
            });
            ijQuery('form.email-form .input-holder:nth-of-type(2)').css({
                float: 'right',
                width: '47%'
            });
        }
    });
</script>
<!--END code for horizontal fields - first 2 fields - on all the forms-->

You’ll notice that not much has changed; we simply used another jQuery selector (nth-of-type instead of eq). 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.

Welcome to the Instapage Support Center

Need Further Help?

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

© 2018 Instapage Inc. All Rights Reserved.