Creating Professional Forms and Improving Workflow with Field Group

Dev

Creating Professional Forms and Improving Workflow with Field Group

Right out of the box, Drupal 7, allows for a powerful and complete system for creating content types, forms, and content management interfaces.  With a few quick steps, you can create highly detailed forms for a content-rich website.   However, the more information we want to collect for a content type, the more overwhelming the actual client-side form can become.

It is important—along with smart content organization—that we also deliver to the client-user a manageable UI for better workflow.

Field Group (http://drupal.org/project/field_group) allows you to take control over how a client-side form is built, displayed, and rendered.  It provides, through the UI, element wrappers to help consolidate form elements.  Content wrappers in the module include collapsible fieldsets, divs, vertical or horizontal tab groups, multiple-page containers, and jquery accordions.

The Field Group module also lets us add additional CSS selectors to the form wrappers, giving a themer greater flexibility in styling the form.  This is a big key to keeping your site easy to maintain for either yourself or a future developer.

Administering the Field UI with Field Group is as easy as dragging and dropping groups and fields into the content-type form.  Field Group form wrappers can be nested within each other for even greater flexibility in your form-making.

Field Group also allows for some additional markup power over the default display of a saved node, but node display will be discussed in a future article.

For this demonstration, the Field Group module and a tiny bit of CSS will be implemented.  To follow along, download and enable the module: (http://drupal.org/project/field_group).  Access to your CSS files is handy for playing around with the display of your forms.

  

Basic Form Configuration

This very familiar form display includes a title field, body, tags, and an image field (plus other ‘hidden’ configuration fields depending on your installation: URL aliases, flags, etc.) 

Image shows a Article Node form with no reconfiguration 

Each form element, inside its own

stacks horizontally (without any external CSS influence).  While we can adjust the display with heavy-handed and long CSS selectors, this approach is tricky and very difficult to maintain.

Example: In this form, to float the Title field element, we would have to select .page-node-add-article input#edit-title and then apply the float attribute.  Though this seems simple and straightforward, the more form elements you add increases the length and specificity of CSS selectors, opening the door to code errors and trial-and-error development tactics.

With Field Group you can wrap form elements in custom classes that not only make more sense to you as a developer, but to anyone who is maintaining the site later.

 

Getting Started with Field Group

Let’s configure some field-group wrappers on the Drupal default Article content type.  Navigate to /admin/structure/types.  In the ‘Article’ row, click ‘manage fields’.

Image shows the content type administration page

There is a new widget at the bottom of the table that allows us to create a Field Group.  Enter a label, machine name, and select which type of display wrapper you will use with this group.

Fieldsets

Field Group allows you to wrap form elements in collapsible fieldsets.

In the Field Group widget (Add New Group), enter the label, machine name, and select ‘Fieldset’ from the drop-down.  Click ‘Save’ at the bottom of the form.

Your new field group will show up in the table with your label and machine name.  Drag and drop the field group to the top and nest some form elements in it.  Click ‘Save’.

After saving, click the gear icon under ‘Operations’ in the table header.  This will give us some extra options to display or theme this fieldset.

Here, you can select the default behavior of the fieldset, add a text description that will display on the node form, and add additional CSS classes to the form element wrapper, allowing for further visual customization. 

After making changes to this display, click ‘Update’ then ‘Save’ at the bottom of the admin form.

Navigate to /node/add/article and notice the changes.  The form elements are wrapped up inside a collapsed fieldset that will expand and contract by clicking the legend, or fieldset header.

I have added some simple CSS to highlight the fieldset.  The image below shows the default, collapsed state.

 

The opened fieldset reveals the hidden form elements.

 

You can add additional fieldsets and organize the form elements easily while providing a client-side form that is easy to navigate.  You can also nest fieldsets (or other field groups) inside each other to organize even further.  Nesting is especially handy when creating detailed forms with Field Collections (http://drupal.org/project/field_collection).

 

Field Group

wrappers

Go back to your form admin page.  In the drop-down list for your fieldset, change the selection to ‘Div’.

View the options for this container by clicking the gear icon in the Operations column.

The

wrapper allows you to control the display of a container that includes many form elements depending on your forms organization.  The

wrapper makes it easier to style the form.

With the

wrapped form elements and some simple CSS, the new form shows the form elements inside a grey container with a narrow width.

 

Vertical Tab Groups

Vertical tabs are by far the easiest way to organize a form.  Vertical Tabs help to integrate your form elements into the ones provided by Drupal (or other modules) toward the bottom of node forms.

Go back to your form admin page.  Change the Field Group drop-down to Vertical Tab.  (Vertical Tab Group will be discusses after this.)

View the options in the container editor in the Operations row.

Remember, after changing any options in the Field Group options, you need to click ‘Update’ and then ‘Save’ the form.

Refresh your Article form and see that your form elements are now handing out with the other guys in a vertical tabs group.

 

Vertical Tab Groups

Vertical tab groups allow us to further increase a form’s organization and add additional hierarchies.  A tab group requires nested field groups. At minimum, a Tab Group and one Tab.

In your form admin page, add a new field group—enter a label, machine name, and select ‘Vertical Tab Group’.  Review the display options.  Click ‘Update’.  Drag this new Field Group to the top of the admin form and nest your previous Vertical Tab inside it.  For this and further examples, I have created a third field group to nest in the Tab Group.

Review this setup and then view the resulting display.

The new vertical tab group is separate from the ‘lower’ tabs.  You can create as many tab groups and tabs as needed by your form and organization of form elements.

Here is a view with the second tab active.

  

Horizontal Tabs and Tab Groups

Horizontal tab groups behave in the same manner as vertical tabs.

The adjustments above result in the following display.

 

Accordion Groups

Accordion Groups add animated, collapsing jquery accordion form containers to your node form.

Nesting is required for accordion groups and items to function correctly.  They are set up similarly to Vertical or Horizontal tabs/groups.

The above setup will result in the following display:

 

Multiple Page Groups

Multiple page groups allow you to sort your form elements with page breaks.  They are configured in the same manner as other field-group groups.  There isn’t really a need to repeat the configuration example here.  Also, multiple page groups on a node form add extra buttons and links that may confuse a content creator.  They come in handy for displaying content with a simple pager, but aren’t as powerful or as flexible as views.

 

Conclusions for Field Group

Field Group helps to better organize and display Drupal entity forms.  It allows the developer to create a more fluid, friendly, and stylish client-side administration UI.  With very simple widget configurations in form administration and with some basic CSS knowledge, you can take an anonymous-looking node form and make it work better for your client.

More About the Author

Tom McCullough

Regional Solutions Lead - South Central
New Default Setting in Tableau Server 9.1 Will Break Embedded Dashboards If you embed your Tableau analytics dashboards through either a straight embedded i-frame or with the JavaScript API, upgrading your ...
Using import.io, Python and Tableau LOD Calculations to Visualize Top Baby Names over 101 Years I haven’t had a ton of time to really dig into the new features of Tableau 9, but I did want to start playing with the new Level ...

See more from this author →

Subscribe to our newsletter

  • I understand that InterWorks will use the data provided for the purpose of communication and the administration my request. InterWorks will never disclose or sell any personal data except where required to do so by law. Finally, I understand that future communications related topics and events may be sent from InterWorks, but I can opt-out at any time.
  • This field is for validation purposes and should be left unchanged.

InterWorks uses cookies to allow us to better understand how the site is used. By continuing to use this site, you consent to this policy. Review Policy OK

×

Interworks GmbH
Ratinger Straße 9
40213 Düsseldorf
Germany
Geschäftsführer: Mel Stephenson

Kontaktaufnahme: markus@interworks.eu
Telefon: +49 (0)211 5408 5301

Amtsgericht Düsseldorf HRB 79752
UstldNr: DE 313 353 072