What can I use to layout the content type form input when creating content?

Question

I have created a content type with about 15 fields.

I'd like to improve the layout of the form for creating content of this content type.

Currently all the input fields are listed one after the other which means a lot of vertical scrolling and not everything can be seen on one page.

I looked at the Display Suite module ( http://drupal.org/project/ds ) but I could only see how to layout the resulting content not the input form used to create it. (UPDATED: answer below from Елин Й. says that display suite can actually layout the input form)

Another option would be to create a theme with form layout (good question - and answers here: How to a use a template file to theme a form? ). That's fine, but before I do that I wanted to look at other options available (don't wish to re-invent the wheel.)

Or should I use entities and EntityForm instead if that provides better layout options.

Finally, I'd prefer not to use webform module as EntityForms and ContentTypes provide better integration with built in Drupal features, so I've read.

Answer 1

Display Suite is capable of formating form layout, as well.

Modules included:

Display Suite: The main module to rearrange your fields.
Search: extend the search results for Drupal core or Apache Solr.
Extras: extra functionality like semantic fields, region to block, hide page title etc.
Forms: style the layout of forms.
Format: provides a PHP filter with entity context (only 7.x-2.x and higher)
UI: Manage custom fields, classes and view modes through UI (only 7.x-2.x and higher)

You should enable the Display Suite Forms module, which is shipped with DS.

Under the 'manage fields' tab of your content type

admin/structure/types/manage/your_content_type/fields

At the bottom, you have an option to select a layout for the form.

Answer 2

You can make use of the Field group Module

Fieldgroup will, as the name implies, group fields together. All fieldable entities will have the possibility to add groups to wrap their fields together. Fieldgroup comes with default HTML wrappers like vertical tabs, horizontal tabs, accordions, fieldsets or div wrappers.

There are also other modules you can use with it such as the Multistep module

Multistep adds multiple-step functionality to content type editing forms. It does so by assigning a step number to each fieldgroup within the content type and hiding all the groups that do not belong to the current step. The user can then use different submitting buttons that will redirect to the previous, next, or current step.

Answer 3

There is also another way to theme the node form, that you can do it completely with code in your theme folder without using any other module.

First, in your theme folder, edit template.php file, and implement hook_theme() to tell about your template file.

function YOURTHEME_theme($existing, $type, $theme, $path) {
  return array(
    'your_content_type_node_form' => array(
      'render element' => 'form',
      'template' => 'your-content-type-node-form',
      'path' => drupal_get_path('theme', 'YOURTHEME') . '/templates/forms',
    ),
  );
}

The above code assumes that your theme name is YOURTHEME, and you want to use a template file named your-content-type-node-form.tpl.php, and you want to put this template file in your theme folder under YOURTHEME/templates/forms.

Then, you can create the specified file under the specified folder and you can build your custom template file from scratch, which will be a very painstaking job, but at the end you will have a layout that you have a full control over it.

You can print individual fields in this template file like:

<?php print render($form['field_yourfield']);?>

You will have also many other variables and functions available.

After building the form completely, printing all the fields you set in your content type, you should always print the rest of the form, which includes all the hidden fields and tokens that Drupal adds to you form.

<?php print drupal_render_children($form); ?>

If you don't include that, your form will probably not work. That line does also make sure that no fields are missing in the form that you would forget to print.

If you want to apply also some logic or another functionalities to your form or form elements, you can use hook_form_FORM_ID_alter() in your template.php file, which requires a good knowledge about Form API.

An example implementation of hook_form_FORM_ID_alter() for this post would be:

function YOURTHEME_form_your_content_type_node_form_alter(&$form, &$form_state, $form_id) {
  $form['title']['#size'] = 30;
}

This would set the size of the title field to 30, which is not possible using the Fields UI.