Unable to create horizontal form

  • 13 September 2016
  • 5 replies
  • 3 views

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/


5 replies

Userlevel 6
Badge +1

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

Userlevel 6
Badge +1

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 = $(formFields[startColTwo]).position().top;
/* the amount to offset the col 2 fields horiontally */
var xOffset = $(formFields[0]).width() + 17;

/* offset the column 2 fields */
for(var i = startColTwo, l = formFields.length; i<l; i++) {
var f = formFields[i];
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')[0];
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

Userlevel 6
Badge +1

Looks good! Glad I could help.

Reply