I'm trying to create forms that I can customize to display multiple elements in a column or row, instead of the current one field per line that seems to be the default.

I've been searching around for a few modules and so far have only come across one that would be able to do what I need which is Form Panel.

How do I edit or create forms where I have control of the layout? I would like to avoid code as much as possible.

  • What's wrong with the Form Panel project that you linked? – beth Jan 28 '13 at 19:42
  • i dont have the time or the complete know how to programmatically create forms every time i want to use it. 1 have forms already on my site and i was hoping to simply re-create them using more columns to get a better look and feel. this module os for developing modules forms – WebMasterSplinter Jan 28 '13 at 19:58
  • What do your forms currently look like and what do you want them to look like, exactly? Can you attach a picture? – beth Jan 28 '13 at 20:01

Are you talking about webforms or the regular, Field/CCK form?

While there should and might be better or cleaner ways to do it, I solved this problem in CSS, with quite a bit of futzing to make things line up exactly. Here is the CSS for aligning a webform into columns:

/* Set left quarter column via the label. Margin top aligns label with form item box */
.webform-component-textfield label {
  width: 24%;
  float: left;
  display: inline;
  margin-top: 2px;
  margin-right: 1%;
  text-align: right;

/* Align form text-box fields in next qtr column: */
.webform-client-form .form-text {
  width: 25%;
  float: left;
  margin-left: 2px;
  display: inline;

/* Third column (if you need it) in next column, through specific id selector */
#webform-component-last-name label {
  width: 14%;
  display: inline;

/* Fourth column on form text-box: */
#webform-component-last-name .form-text {
  width: 23%;
  display: inline;

/* Radio buttons in second column note use of plural RADIOS vs singular RADIO */
.webform-client-form .form-radios {
  width: 75%;
  float: left;
  border-bottom: 1px dotted #CCC;
  margin: 7px 0 0 0px;

/* Radio buttons  */
.webform-client-form .form-radio {
  width: 20px;
  float: left;
  margin: 2px 0 0 0px;
/* followed by labels: */
.webform-client-form .form-radios label.option {
  width: 13%;
  margin: 1px 0 0 0;

I did use the https://drupal.org/project/webform_layout Module which does create a div container around one or more fields.

You may choose between Horizontal, Equal Width and Vertical Orientation. Further you can nest divs of Layout Boxes.

It is simple and does the job.


what about Field/CCK form how to arrange fields like Arrange field this only works content types i wanted eck.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.