Skip to content

Instantly share code, notes, and snippets.

@gab1982
Created July 31, 2014 12:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gab1982/b12dc88f7a922ebcf7c9 to your computer and use it in GitHub Desktop.
Save gab1982/b12dc88f7a922ebcf7c9 to your computer and use it in GitHub Desktop.
Unbounce inline fields and positioning of submit button
/*
Many thanks to: Justin from Unbounce and Mark Wain Wright for making this possible.
I combined Justins code from https://getsatisfaction.com/unbounce/topics/splitting_lead_forms_into_two_columns with https://gist.github.com/markwainwright/9338233 code from here to make this desired code:
*/
<script type="text/javascript">
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() + 30;
/* 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';
}
function HorizontalForm(spacing, submitPlacement) {
var self = this;
this.spacing = spacing;
this.submitPlacement = submitPlacement;
this.$ = lp.jQuery;
// Grab all form fields and the submit button
this.form = this.$('.lp-pom-form').eq(0);
this.fields = this.$('div.lp-pom-form-field');
this.button = this.$('.lp-pom-form .lp-pom-button').eq(0);
if ( this.submitPlacement !== 'manual' ) this.fields = this.fields.add( this.button );
// Lay the form out when ready
this.$(function(){
self.layout();
});
// Re-layout when breakpoint changes
this.$(window).resize(function() {
self.layout();
});
}
var thisTop = top;
if ( field.is('.lp-pom-button') ) {
if ( this.submitPlacement === 'newline' ) {
// Put button on new line
thisTop = top + tallest + spacing;
left = 0;
} else {
}
// If it's a field without a label, add additional vertical offset
} else if ( !this.$(field).children('label').length ) {
thisTop = top + 19;
}
new HorizontalForm(20, 'manual');
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment