The Arrange Fields module lets you reposition the fields of any CCK, Webform, or other form in Drupal with a simple drag-and-drop interface. This way, you can have fields which are horizontal to each other, diagonal, etc. Tab ordering is updated, so you can still tab through the fields in a logical way.

Other features
In addition to being able to drag-and-drop fields, you can also add any HTML markup you want to the form-- images, hr's, help text, links, etc. You can make field labels, radios, and checkboxes inline with a single mouse click. For CCK and Webform users, you can access each field's configuration (required, values, etc) in a popup so you never have to leave the page.

Things to Know about Arrange Fields

How it works
Arrange Fields uses jQuery UI to let you position form fields anywhere on the screen. The field positions are saved as CSS "top" and "left" positions. When the form is drawn to the user, these CSS positions are outputted on the page in <style> tags. They are not written to any particular CSS file, though of course, they can still be overwritten in your theme's CSS files. By specifying field positions in CSS, they are pulled out of the normal document flow. This is why fieldsets behave as explained below.

Fieldsets
Collapsible fieldsets in Drupal will "push down" all the content beneath them when they open, then "pull up" that content when they close. But, when using Arrange Fields, all fields are taken out of the normal document flow, so this behavior is no longer possible. Instead, when a fieldset is clicked on, its z-index goes up. This way, if you have several fieldsets overlapping each other, whichever one you click on will appear on top.

If this behavior is not attractive, you might try installing the Vertical Tabs module, which groups fieldsets into a more attractive block, which Arrange Fields can position.

There are plans to investigate making fieldsets behave the old way, and "push down" content, in the future 2.0 version of Arrange Fields.

CAPTCHA and reCAPTCHA module
The CAPTCHA module is an excellent way to cut down on bulk submissions to your site, but using it with Arrange Fields can sometimes be confusing to users. The CAPTCHA will not show up for admin, only for other users. This means if you are using admin with Arrange Fields, you will not be given the ability to position the CAPTCHA. To get around this, create a special user which can see the CAPTCHA and has the permission "administer arrange fields."

You can also give this permission temporarily to the Anonymous user, just remember to set it back before your site goes live to the public, as it represents a significant security hole.

Installation of jQuery UI

This is not necessary for Drupal 7, since jQuery UI ships with it. Only follow these steps if you are using Drupal 6.

The module requires the jQuery UI module to work, and this seems to trip up a lot of people. This is because you do not simply unpack the jQuery UI tar.gz and enable it, you must also download version 1.6 of the jQuery UI plugin and install it in the correct directory. The jQuery UI README.txt explains how to do this:

1. Copy the jquery_ui module directory to your sites/all/modules directory.
2. Download the jQuery UI 1.6 release from:
   http://code.google.com/p/jquery-ui/downloads/list?q=1.6
3. Extract it as a sub-directory called 'jquery.ui' in the jquery_ui folder:
   /sites/all/modules/jquery_ui/jquery.ui/ (notice the dot in jquery.ui)
   so the actual jQuery UI JavaScript files are located in:
   /sites/all/modules/jquery_ui/jquery.ui/ui/*.js

So-- why version 1.6 of the plugin? Why not 1.7, 1.8, or even 1.9?
This is because the jQuery UI plugin requires a higher version of jQuery than Drupal 6 ships with. Specifically, the UI version 1.7 requires jQuery 1.3.x. If you wish, you can use the jQuery Update module to help you get to 1.3.x (make sure to get the correct version), which will then let you use jQuery UI version 1.7.

However, if you do not need jQuery UI for any other modules, and only need it for this module, Arrange Fields, it is recommended that you simply use the default version of the plugin, which is 1.6. Arrange Fields was developed using the 1.6 version of the plugin, and does not function as well with any other version (yet).

Problems?

If you are sure you have installed everything correctly, but are still having problems with Arrange Fields, try these steps:

• Clear Drupal's cache. Arrange Fields relies heavily on CSS and form layouts, which get cached. So if you are seeing strange behavior, first try this simple step and see if that solves anything.
• Turn off Drupal's CSS and JavaScript optimization, if it's on.
• Try out other browsers, like FireFox, IE, and Chrome. If your problem is only happening in one browser, that could mean there is just an issue with your browser configurations, or you should do the following:
• Clear your browser's cache. Browsers can cache CSS and JavaScript.
• Try another theme, like Garland, to make sure there isn't something in your theme which overwrites Arrange Fields.
• IE related problem? Believe it or not, IE has a limit of only 32 CSS files it may import, and with every module and its mother having CSS files, a complex Drupal site can easily exceed this. You might try something like http://drupal.org/project/unlimited_css.

If you are still having problems, then open an issue on the Arrange Fields project page. Be sure to specify which of these steps, if any, you have already tried. Also, be sure to mention if you are using Arrange Fields with Webform or CCK.