How to create horizontal form in Unbounce

Forms are a foundational element for lead generation landing pages. How you design your forms has a huge impact on your conversion rates, and dictates the information that will come your way once a lead has converted. There are several more advanced uses of forms including pre-filling form fields, UTM tracking, and multi-step forms. In this article i will show you how to create a horizontal form in unbounce .

step 1: Take form

Open your unbounce template editor and take form

step 2: Copy bellow script

<script>
  // unbounce-horizontal-forms 05090fe
  function HorizontalForm(a,b){var c=this;this.spacing=a,this.submitPlacement=b,this.$=window.lp.jQuery,this.$(function(){c.$form=c.$(".lp-pom-form").eq(0),c.$fields=c.$("div.lp-pom-form-field"),c.$button=c.$(".lp-pom-form .lp-pom-button").eq(0),"manual"!==c.submitPlacement&&(c.$fields=c.$fields.add(c.$button)),c.doLayout()}),this.$(window).resize(function(){c.doLayout()})}HorizontalForm.prototype.doLayout=function(){for(var a,b=this.$fields.eq(0).width()+this.spacing,c=this.$fields.eq(0).height(),d=this.$form.parent().width()-this.$form.position().left,e=0,f=0,g=0;g<this.$fields.length;g++){a=this.$fields.eq(g),f=0===g?f:f+b,f+b>d&&(e=0===g?e:e+c+this.spacing,f=0,c=a.height());var h=e;if(a.is(".lp-pom-button"))if("newline"===this.submitPlacement)h=e+c+this.spacing,f=0;else{h=e+19;var i=this.$form.find(":text").eq(0).height();a.css("height",i-1+"px")}else this.$(a).children("label").length||(h=e+19);a.css({top:h+"px",left:f+"px"}),a.height()>c&&(c=a.height())}this.$form.css({right:"0",width:"auto",height:e+c+"px"})};  
  // First parameter is spacing between fields, e.g. 20px
  // Second parameter is submit button placement. Options:
  //    - 'inline': in line with the fields
  //    - 'newline': on a new line
  //    - 'manual': wherever you place the button in the page builder
  new HorizontalForm(20, 'manual');
</script>

step 3: Past the script

now past your script in javascript

step 4: Save and publish

now save your landing page and publish it

NOTE: In the unbounce template editor you can see vertical form but when you save and publish it then you can see horizontal form in Live Preview

step 5: testing

you can check the horizontal form in unbounce : Live Preview

Thanks for checking out our tutorial, go ahead and share your experiences with the world using the comments below!

If you want customization in unbounce template or if you have already readymade design and you want to convert into unbounce platform check out the following services from ilmosys studio