Horizontal Forms


#1

How do I create a form that runs horizontally? I’m trying to save some space on my LP.
I understand that it’s not a built-in feature (It Should be though… hint hint) But can you provide the CSS script for it? I can’t find it. If you have any other tips on how to make that possible… it would appreciated.

Thanks!!


#2

Hi Brian! This currently isn’t possible with the editor, but you can achieve a similar functionality using custom javascript. We’ve put a script together that allows you to break your form up into two columns; please see the following link for the script:

You can also modify the script to suit your specific needs. Thanks Brian!


#3

So, I created the form… and then inserted the code in the area for Java, But it’s not working. I’m not sure how to do it.

Thanks


#4

I got it to work… is there any way to put the submit button on the same horizontal line as the boxes? Currently that script only allows it to be below.

Bryan


#5

in installed the script but the fields are still stacked. what am i missing?


#6

Hi Greg - Awesome question! I’m going to reach out with you via email with a personalized reply, so keep your eyes open for that :slight_smile:


#7

Hi Meghan I am having the same Issue, can you please let me know how to fix as well. 


#8

Hey there Eric! 

After adding the horizontal form script, you won’t see the form change in the Page Builder but if you save and preview you will see the Javascript in action.

If the form isn’t laying out horizontally in preview, send an email to support@unbounce.com with the URL of your page and we’d be more then happy to jump in and see what’s going on!


#9

I added the script, but in preview, I don’t see two columns of form fields, they expand to fill the width of the form space.


#10

Hey there Darena,

I’m going to reach out with you via email with a personalized reply, so keep your eyes open for that :slight_smile:


#11

Hey,
can I also customize the spacing between the columns? I am having 3 columns and want to have 2 different spacings between them. Am using this code:

Thanks a lot in advance for your help!


#12

Hey there Eva!

You can customize the width between each column (by changing the number after HorizontalForm) but unfortunately, with this script, it’s not possible to have different widths between the columns.


#13

This reply was created from a merged topic originally titled Styling Forms.

Is there a way to style the unbounce forms so First Name, Last Name and Email Address are all on a single line?


#14

This reply was created from a merged topic originally titled Splitting lead forms into two columns?.

Can you split the lead form into two columns, so it doesn’t get so long? I am making a form for our sales reps to use at exhibitions to collect leads on thier Ipads, so it will be a little longer than usual.


#15

This reply was created from a merged topic originally titled Form fields to be able to be formatted horizontally.

Can we have the form fields to be aligned in different ways instead of stacked up?


#16

This reply was created from a merged topic originally titled In-Line Forms.

how can i make a form in-line instead of having two different lines for the fields?


#17

So, is there no possible way to see the horizontal form in the editing mode? Also, if I put in the script, will this affect mobile view? 


#18

This worked perfect for me. Thanks!


Unable to create horizontal form
#19

Is it possible to get just certain fields to align horizontally, not all of them? I am trying to get 3 fields: “Month” “Day” and “Year”, to all appear on one row. Any idea how to do that?


#20

Hi all,

I’m sure the Javascript solution above works just fine, but I prefer a CSS solution. I played around with the forms a bit and came up with solution that uses Flexbox. It’s important to note that Flexbox is supported in most modern browsers, but you may run into difficulties with legacy browsers. To deal with that, make sure you always use fallbacks.

The biggest issue that I had - one that could be easily resolved by the good folks at Unbounce - is that I could not add a class to a form element. This seems like such a simple fix, and I’m hoping that Unbounce will consider adding it as a feature. Why would a class on a form element be awesome? Let’s assume that I wanted my First Name field and Last Name field to be side by side like this:

The code generated in Unbounce looks like this:

FIRST NAME * LAST NAME *

But I would like to modify it like this:

FIRST NAME * LAST NAME *

Notice the addition of the “half” class. I could add CSS that looks like this to make the field wrappers side-by-side:

<br />.half {

  position: relative;

display: block;

float: left;

width: 50%; }

I’m sure I’d need to do a little more tweaking to get this right, but you get the picture.

Anyway, since I cannot add a class to a form element, I worked with what I had. Note that this example only includes styling for basic inputs and radios. I didn’t have a checkbox in my form, so I didn’t get around to styling it (NOTE, I updated this to include checkboxes). I cannot guarantee that this will work perfectly for you, but it works for me. There’s an example picture at the bottom. Enjoy!

.lp-pom-form form {

width: auto; } .lp-pom-form form:before, .lp-pom-form form:after {

content: " ";

display: table; } .lp-pom-form form fieldset {

width: 100% !important;

max-width: none;

width: auto; } .lp-pom-form-field {

position: relative !important;

left: auto !important;

top: auto !important;

margin-bottom: 5% !important;

height: auto !important;

float: left !important;

width: 100% !important;

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */

 display: -ms-flexbox; /* TWEENER - IE 10 */

 display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */

 display: flex;





/* NEW, Spec - Firefox, Chrome, Opera */ } .lp-pom-form-field label {

position: relative !important;

display: block !important;

width: 100% !important;

padding-right: 15px !important;

min-height: 32px !important;

line-height: 32px !important;

text-align: right;

-webkit-box-flex: 1;

/* OLD - iOS 6-, Safari 3.1-6 */

 -webkit-flex: 1;



 /* Safari 6.1+. iOS 7.1+, BB10 */

 -ms-flex: 1;





  /* IE 10 */

 flex: 1;









/* NEW, Spec - Firefox, Chrome, Opera */ } .lp-pom-form-field input[type="text"], .lp-pom-form-field input[type="password"], .lp-pom-form-field input[type="date"], .lp-pom-form-field input[type="datetime"], .lp-pom-form-field input[type="datetime-local"], .lp-pom-form-field input[type="month"], .lp-pom-form-field input[type="week"], .lp-pom-form-field input[type="email"], .lp-pom-form-field input[type="number"], .lp-pom-form-field input[type="search"], .lp-pom-form-field input[type="tel"], .lp-pom-form-field input[type="time"], .lp-pom-form-field input[type="url"], .lp-pom-form-field input[type="color"], .lp-pom-form-field textarea, .lp-pom-form-field select {

display: block;

top: auto !important;

left: auto !important;

position: relative !important;

width: 100% !important;

box-sizing: border-box !important;

 -webkit-box-sizing: border-box !important;

 -moz-box-sizing: border-box !important;

 -o-box-sizing: border-box !important;

 -ms-box-sizing: border-box !important;

padding: 6px !important;

margin: 0 !important;

height: 32px !important;

-webkit-box-flex: 2;

/* OLD - iOS 6-, Safari 3.1-6 */

 -webkit-flex: 2;



 /* Safari 6.1+. iOS 7.1+, BB10 */

 -ms-flex: 2;





  /* IE 10 */

 flex: 2;









/* NEW, Spec - Firefox, Chrome, Opera */ } .optionsList {

display: block;

top: auto !important;

left: auto !important;

position: relative !important;

width: 100% !important;

box-sizing: border-box !important;

 -webkit-box-sizing: border-box !important;

 -moz-box-sizing: border-box !important;

 -o-box-sizing: border-box !important;

 -ms-box-sizing: border-box !important;

padding: 0 !important;

margin: 0 !important;

-webkit-box-flex: 2;

/* OLD - iOS 6-, Safari 3.1-6 */

 -webkit-flex: 2;



 /* Safari 6.1+. iOS 7.1+, BB10 */

 -ms-flex: 2;





  /* IE 10 */

 flex: 2;









/* NEW, Spec - Firefox, Chrome, Opera */ } div.lp-pom-root .lp-pom-form-field .option {

margin-bottom: 0 !important; } div.lp-pom-root .lp-pom-form-field .option label {

text-align: left !important;

color: #fff !important;

font-weight: normal !important;

font-size: 14px !important;

line-height: 24px !important;

display: inline-block;

vertical-align: middle;

left: 20px !important; } div.lp-pom-root .lp-pom-form-field .option input {

height: 24px !important;

display: inline-block;

vertical-align: middle; } .lp-pom-form .lp-element.lp-pom-button {

top: auto !important;

position: relative; }