Drupal 8 – Formatting the Input and Output Form for a Custom Content Type


Sometimes you may find that the visual representation of your new content creation form doesn’t fit with how you would like it to appear. You may want to change the order of fields on the form, the type of widget used to create content in a field, or the format of the widget itself. To change how the form is displayed, edit a content type following the steps you’ve performed previously. Click the “Manage form display” tab at the top of the page, resulting in the list of fields with their widget types and widget configurations displayed.

To rearrange the order of the fields on the form, click and hold the arrows icon next to the field you wish to move, drag the field to the position where you want it to appear, and release your mouse button. To change the widget type, simply select a new value from the widget select list, and to change the appearance of a widget (for example, changing a text area so that it displays more than the default five lines), click the gear icon in the right column.

As an example, let’s change the text area field for driving directions from the default five lines of text to ten lines of text. To do so, click the gear icon in the right column of the “Driving directions” field. The for will expand to display a field where you can change the number of rows as well as enter placeholder text that will appear in the field until the author begins entering text in that field. Change the number of rows from 5 to 10 and then click the Update button, followed by the Save button. The number of rows displayed when creating a new event is ten, providing the author more room to enter directions. Many Drupal developers use such techniques.

There will be times when the visual representation of your new content type as displayed to the end user of a site doesn’t fit with how you would like the content created with your new content type to be rendered on the screen.
In the previous section we looked at rearranging the fields on the form used by content authors to create an event; in this case we are rearranging the content as it appears when an event is rendered to an end user.

Adjusting the order and positioning of the labels in relation to the field can be accomplished by clicking the “Manage display” tab on the custom content type edit form. This page lists all of the fields that are associated with our content type, and provides the ability to define basic display attributes for the label and content for each of the fields. By default there are two sets of values that we can set: one for the Default (full node) and one for the Teaser view. The Default option displays the complete content item and Teaser displays just the content item’s title and a trimmed version of the body field. You can switch between these using the two links at the top left of the page. If you click the select list for the Label of each field , you will find that there are three options:

Above: The label will be displayed on a line immediately above the widget that you selected for your field.
Inline: The label will be displayed to the left of your widget, on the same line as the widget.
Hidden: The label will not be displayed on the screen.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s