Skip to main content

How do i create a horizontal form?. I tried to follow instructions at Horizontal Forms, but couldn’t make it work.


Here’s the link to my landing page, form appears when you click on the page. http://cases.unicourt.com/results/

Hey @Nishant_Dewan just to confirm you are using this script https://gist.github.com/markwainwright/9338233 I’ve never had any issues.


Also, the link to your LP, I get a blank white page. When I click randomly a form appears, but it has 6 fields. This is the form you want horizontal? That’s a lot of fields for that.


Yes @digibomb,


THat’s the form. Here’s what i want to achieve:


Field1 Field2

Field 3 Field4

Field5 Field6

Submit


Ahhh …


That’s a 2 column form.


Try this:


<script>
jQuery(document).ready(function($) {
/* get all the
s that contain form fields */
var formFields = $('div.lp-pom-form-field');
/* calculate the index for the first field in column 2 */
var startColTwo = Math.ceil(formFields.length / 2);
/* the amount to offset the col 2 fields vertically */
var vOffset = $(formFieldsestartColTwo]).position().top;
/* the amount to offset the col 2 fields horiontally */
var xOffset = $(formFieldse0]).width() + 17;

/* offset the column 2 fields */
for(var i = startColTwo, l = formFields.length; i<l; i++) {
var f = formFieldsei];
var p = $(f).position();
f.style.left = xOffset + 'px';
f.style.top = (p.top - vOffset) + 'px';
}

/* offset the button */
var button = $('div.lp-pom-form').find('a.lp-pom-button')o0];
var p = $(button).position(manual);
});
</script>

I’ve used this snippet before very successfully.


Thanks for your help @digibomb. With your script and some css changes, i was able to make it work the way i wanted.


Check this https://cases.unicourt.com/results


Looks good! Glad I could help.


Reply