Arranging the Fields of a Form

This module lets you drag-and-drop the fields of any CCK content type, Webform, or almost any other form in Drupal into the positions you would like for editing. This makes it super simple to have forms with inline fields, which you can change at any point. Tab indexing is also updated, so no matter how you arrange the fields, the users can still tab through them easily. And, you can now add arbitrary bits of HTML markup-- labels, images, HR's, etc.

Features

  • Drag and drop fields into any arrangement you want. Makes Drupal forms look more like pen-and-paper forms.
  • Resize textfields and textareas by dragging.
  • Make labels, radios, and checkboxes appear inline with the click of a mouse.
  • Add HTML markup directly to the form - labels, captions, images, HR's, etc.
  • Edit CCK & Webform configurations for each field (required, help text, allowed values, etc) in a popup without having to leave the page.
  • Ability to import/export arrangement definitions.
  • New in 7.x: Snap to grid when resizing elements (experimental for the moment-- configure on the Settings page)

Drupal 6

  • Requires jQuery UI. Interfaces with CCK, Webform, or almost any other form in Drupal-- even custom forms from other modules.
  • Be sure to pay close attention when installing the jQuery UI module! You also need to install the jQuery UI plugin (and the right version of it [1.6 by default]!) Check out that module's README.txt for more information.

Drupal 7

  • Since jQuery UI ships with Drupal 7, you don't have to install anything extra to get Arrange Fields to work! Wahoo! It still works with Webform and almost any other Drupal form.

Problems? Questions? Need help installing jQuery UI?
See the Arrange Fields handbook page.

Directions

  • Unpack the module files into /sites/all/modules/arrange_fields.
  • Visit your modules page in Drupal and enable the module.
  • Visit your permissions page and give authorized users the "administer arrange fields" permission, if desired. (Otherwise, only the admin user will be able to use it).
  • To begin arranging fields just visit admin/settings/arrange-fields (D6) or admin/config/arrange-fields (D7) to see a main menu page. From there you can click the Settings tab to add any custom form_id you want, or just select CCK and Webforms from the list.
    OR...
    • For CCK/D7 Fields: visit Administer -> Content Types (the link is at the top of the page, as a tab). You can also select "manage fields" for a content type, and then there will be a new tab at the top of this page as well.
    • For Webform: Begin editing a new or existing webform. There will be a subtab at the top of the page that says "Arrange fields". It should be next to the "Form components" subtab.

Restrictions - Looking for Help!
(If any programmers out there would like to help with any of these issues, please contact me)

  • In Drupal 6: jQuery UI 1.7 does not work so well with this module, as it was developed using the 1.6 plugin (the default for the jquery_ui module). This problem is being worked on, but for now, only the 1.6 version of the plugin is supported.
    This module does not have this problem in Drupal 7
  • In Drupal 7: Vertical tabs acts a little weird while you are arranging a form, but looks normal again when you save and view the results.
  • This module does not work with fields with "unlimited" as their number of values.
  • Using CAPTCHA/reCAPTCHA? See the handbook entry for some important tips.
  • Multi-page forms are not currently supported.
  • The Profile 2 module is not currently supported.
  • Fields within fieldsets cannot be arranged. But, the fieldset itself can be arranged.
  • jQuery is used to specify the height of the container div on the node/edit page, after you have arranged fields. As such, the person editing the form will need javascript enabled in order for it to show up correctly. (If anyone out there knows a better way to do this, please open an issue!)
  • Field positions will not change the node view page for the created content. That information will still be displayed the traditional way (straight down the page).
  • Having weird problems in IE? You might have run into the 31 stylesheet issue common with some Drupal sites. Try out either Unlimited CSS or IE CSS Optimizer modules and see if they help.

Included icon(s) are from the "mini" pack at famfamfam.com.

Supporting organizations: 

Project information

Releases