Skip to content Skip to navigation

Getting Started on Sites: Improving the Node Edit Form

Welcome back! This is the blog post number ten in a series on how to create a Drupal 7 personal website using Stanford Sites. Last time we learned how to create a new content type. In this post we'll customize the node edit form.

Customizing the node edit form lets you reorder fields so that they are presented to your content creators in a more intuitive way. Think about how your content creators will be adding information for this particular content type, and try to order the fields in the most logically, related way.

Manage the node edit form

  1. From the admin menu bar, navigate to Structure > Content types > Basic page > Manage form.
  2. On the Manage form page, you can:
  • Click and drag the double-pointed arrow to re-arrange the order fields.
  • Check the Hide option to hide the field from the node edit form.
  • Use the double-pointed arrow to drag fields to a different Region or click on the region box arrow to move a field to the Main column, Right region, or Footer region of the edit form.

When you are finished editing, remember to click the Save button.

Manage node edit form

Create a field grouping

You can also group fields into collapsible field groupings for a better user experience in the node edit form.

  1. From the admin menu bar, click on Modules and enable the Fieldgroup module. Click Save configuration.
  2. From the admin menu bar, navigate to Structure > Content types > Basic page > Manage fields.
  3. On the Manage fields page, Add new group.
    Add new group
  4. Give your group a Label and Group name.
  5. Click the Save button.
  6. Once you save the Content type, you will see the new group listed with the rest of the fields.
  7. Use the double-pointed arrow to drag fields in a different order and nest fields under groupings.
  8. When you are finished editing, click the Save button.

Manage fields

Edit a Fieldset

The fieldset is set to be collapsible and required by default.  This can be edited by clicking on the gear button.  Options include:

  • Update the field group label.
  • Change the fieldgroup settings to open, collapsed, or collapsible.
  • Mark group for required fields.
  • Add extra CSS classes.

When done, click the Update button. Then scroll to the bottom and click the Save button.

Edit fieldgroup

Check it out!

Now when a new Basic page is created or edited, the image field is now in a collapsed fieldgroup called Advanced. Click Advanced to open and edit the additional fields. Then click Advanced again to collapse the fieldgroup.

Advanced field grouping

Comments

Uh... what modules are you using ?!?!?!?!

I think the modules you are looking for are: Node Form Columns and Field Group