Drupal Custom Form Arrangement/Placement

Question

I am just starting out with Drupal but I am pretty clueless how to custom 'place' all of the form elements. I usually have a lot of stuff, like this other dude's thing, so placement and aesthetics are a MUST:

Drupal's default way of rendering forums like a questionnaire (one long horizontal column with lots of spaces) are unacceptable for my purposes. I have been looking around the Drupal forums and several other people all have the same problem. The main approach seems to be to return a long concatenated string of html and php controls - for my forms, that would be insane! What is the easiest and cleanest solution to this?

Is there a way, like in ASP.NET with the page.aspx/page.aspx.cs, all the markup and controls are in one file and the code in another? Or maybe I can put all of the form markup in one file with just placeholders, and in the code, it tells Drupal to render each form elment in it's placeholder?

Answer 1

I don't know windows much, so I can't really relate to the .NET techonology example you made, but for what I understand you would expect to have each field of the form passed into the page template as variables, and then be able to place them in a PHP template...

...if this is the case, then Drupal does not behave like that, or - to be more precise - it doesn't behave like that with forms. Forms arrive to the page template as HTML and you have to use CSS to format them according to your needs. The HTML is pretty well structured, with each field in it's own <div> and a few handy classes that make theming easier. If that is not enough, for meeting your needs, you can intervene on the process generating the forms beforehand with a series of hook.

Indeed Drupal has a very specific Form API (or FAPI) to deal with form creation, manipulation, validation and submission. It might sound too complicated for a newcomer, but the FAPI is indeed a key-element to Drupal highly modular design.

You may have a look to this answer from earlier this week, as that might be useful for you to get an idea of how the FAPI system works at its core. If you are a newcomer to the world of Drupal I would suggest that you take some time for reading the documentation, especially the theming guide and the hooking system. Drupal requires to have quite some knowledge of its inner workings in order to be an agile platform to develop for, but the outcome from the investment in "studying" is - IMO - well worth the effort.

On another note: if you are struggling to start with your forms from the scratch, you might be interested in having a look to the webform module (doesn't work for all needs, but is a pretty commonly use tool).

HTH, and welcome to the complex but rewarding world of Drupal! :)

Answer 2

(As mac mentions), the Form API ensures form elements are output using a consistent format:

<div id="ELEMENT-ID" class="form-item">
  <label> ... </label>
  <input type="INPUT TYPE" />
  <div class="description"> ... </div>
</div>

.. so if you want to create a specific layout, it's usually just a case of applying relevant CSS.

You could achieve the layout in the example above by limiting the width for the '.form-item' class and applying a 'float: left'. The elements which don't fit the rule, can always be individually styled.