Form fields to be able to be formatted horizontally


#1

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


Form Field Unlock
#2

Hello Ben - thank you for the suggestion! At this time, our forms format vertically but as we introduce new features into Unbounce, this is the kind of functionality we would like to offer.

In the mean time, a third party form tool such as wufoo (http://wufoo.com/) may offer you the kind of customization you are looking for.

Hope this helps!


#3

Can there be more than 1 column of form? I have a few more fields to add, but I would like all of them to be above the fold. Thanks!!!

Tim


#4

How is this going? It has been some time since we requested this feature and nothing has happened !


#5

Would like to see this feature as well, I would think it would be easy to implement with css and then just define how you want the the field aligned.


#7

? solution?


#8

This would be a great feature; layouts right now are very constrained by vertical-only fields


#9

Yep, this is a much needed feature!


#10

Is it possible for the time being to have a script that we can use to have them aligned horizontally?


#11


#12

Hi Joakim,
The honest truth is that we’re hard at work on features and improvements that are higher priority than this one. I wish we could tackle all of the requests in this forum, but we are staying focused on the features that will help the most customers increase their conversions and marketing ROI. You can see a list of idea requests ordered by popularity here:

https://getsatisfaction.com/unbounce/…

At the moment we are working on (server-side) Dynamic Keyword Insertion into published pages, managing javascript at a global level, and sharing snippets of content between multiple pages. We’re also prototyping a solution to allow responsive design for mobile & desktop.

We’ve also been through a growth spurt in the last couple of months and are finally getting some more helping hands on our dev and design teams.

I do appreciate your artwork though! Let me know if you’d like any more clarification on why we’re building what we are right now.

Cheers,
Carter


#13

THIS!


#14

I was looking for this as well, and came across this script that will help you create a horizontal form. Seems pretty straight forward. Hope this helps!
https://gist.github.com/markwainwrigh…


#15

Hi Mark , I copied the script, but it does not work


#16

Hi Carlos - Mark’s script will push things horizontally from the place you set the form to the right, until it hits the page edge.

Right now, you have your form set in the middle of your page section, so there’s not enough room for it to split out in a straight line without immediately spilling over the edge of the page, which it will stop itself from doing.


#17

Thanks Quinn and of course Mark, for the best support. A additional comment, its only visible how it works in the Preview Mode.


#18

Hi Carlos - that’s correct. Scripts only load up on preview or on the published page, so you will have to do one of those two things to see the forms laid out horizontally.

Form improvements are something that we want to tackle down the road, likely after some improvements to Mobile Responsive, along with a handful of smaller projects that have been on the back burner.


#19

I added the script to my page, dropped a form into one of the sections, expanded the form to the full width of the page, but it’s still showing it in it’s vertical (default) form. I added it under the Javascripts and selected ‘before body end tag’.

Am I missing something?


#20

Hi Hershal try this:

Placement: Head

be careful when warning messages appear on the form do not overlap fields

You must modify In Custom CSS (Stylessheet)

 
  /* The title bar */
  .lp-form-errors div.content{
    background-color: #f0000d !important;;
    color: white !important;;
    position: relative !important;;
    left: 0px;
 
  }
 
  /* The list of errors */  
  .lp-form-errors div.content ul{
    background-color: white !important;
    color: #f0000d !important;
    position: relative !important;
    left:0px;

  }
 
  /* The whole box */  
  .lp-form-errors div.content{
    border: 3px solid white;
    position: absolute;
    top:70px;
    left: -610px; 
  

  }
  

#lp-pom-form-40 {
     width: 100% !important;        
  }
  
  .div.error {
    background-color: grey !important;
    color: #f0000d !important;
  }
  
  
  
  
  @media only screen and (max-device-width: 480px) {
    
    
    
     /* The title bar */
  .lp-form-errors div.content{
    background-color: #f0000d !important;;
    color: white !important;;
    position: relative !important;;
    left: 0px;
 
  }
 
  /* The list of errors */  
  .lp-form-errors div.content ul{
    background-color: white !important;
    color: #f0000d !important;
    position: relative !important;
    left:0px;

  }
 
  /* The whole box */  
  .lp-form-errors div.content{
    border: 3px solid white;
    position: absolute;
    top:270px;
    left:8px; 
  

  }
  
  
 >>> #lp-pom-form-40 is the ID of my Form<<<<




#lp-pom-form-40 {
     width: 100% !important;        
  }
  
  .div.error {
    background-color: grey !important;
    color: #f0000d !important;
  }

}
  
  
  

Looks like this


#21

Thanks! That somewhat worked. Are is there something I can do with the submit button? I only have two fields and would like the submit button to be inline as well.