How to Enable Joomla Custom Fields

Custom fields in Joomla is introduced from 3.7 version. These can be added in your articles, contact forms and user profiles. Through custom fields, you have a seamlessly integrated way to show them on the front end.

For example, when editing an article, the fields show up in a separate tab and can be filled with data. Through field groups, it is possible to group the custom fields into their own tabs. ACL, multi-language, layouts and various other options are available to tailor them to your needs.

How to Enable

You can enable or disable custom fields from the options of the respective component. To enable custom fields, navigate to

Options → Integration → Select Yes in "Enable Custom Fields" option.

Types of Custom Fields

There are 15 types of custom fields that can be added:

  1. Calendar
  2. Checkboxes
  3. Color
  4. Editor
  5. Integer
  6. List (Dropdown)
  7. List of Images
  8. Media
  9. Radio
  10. SQL (Dropdown)
  11. Text
  12. Text Area
  13. URL
  14. User 
  15. User Groups List

You can disable any of the type in Plugins (Select Type: fields)

Options

In the General tab, fill in the mandatory data:

Title: The title will display in the field manager page where you can open the field for editing by clicking on the title. The title is not displayed in the frontend.

Name: The name will be used to identify the field.

Type: You can choose one of the many field types. When you save the field this type is permanent. You can not change it later on.

Label: Use a descriptive text of the field for the label of the field. This text is not translatable. If you do not enter any text for a label the title text will also used as label text.

Description: A text that is shown as a tool tip when the user moves the mouse over the text box while he use it in the backend.

Required: Is this a mandatory custom field? In this case the field has to be filled before submitting.

Default: Here you can set a default value for the custom field. not translatable. Note that in some list fields you have to enter the value as default and in others the index.

State: You can set a publication state. Is the field Published, Unpublished, Archived or Trashed?

Field Group: You can assign a custom field to one or more field groups.

Category: You can assign a custom field to one or more field categories.

Access: The viewing Access Level for this item.

Language: Select the language for this custom field. If you are not using the multi-language feature of Joomla, keep the default of All.

Note: An optional field to make your personal notes for the field.

In the Options tab,

Placeholder: A placeholder text which will appear inside the custom field as a hint for the input. You do do not see it in the frontend.

Render Class: The class attributes of the field when the field is rendered. If different classes are needed, list them with spaces.

Edit Class: The class attributes of the field in the edit form. If different classes are needed, list them with spaces.

Show on: On which part of the site should the field be shown. In the backend, in the frontend or both?

Show Label: Show or Hide the label when the field renders.

Automatic display: This is the place to define how the custom fields should be integrated into content. You can choose "After Display", "Before Display" or "After title".

Disabled: Should the field be disabled in the edit form.

Read only: Should the field be read-only in the edit form.

Calendar Field

It provides a text box for entry of a date. An icon next to the text box provides a link to a pop-up calendar, which can also be used to enter the date value. The default date is in ISO 8601 format (YYYY-MM-DD HH:MM:SS) or NOW, which displays the actual date.

Show time: If enabled, the calendar field expects a date and time and will also display the time.

Checkboxes Field

It provides a checkboxes to be checked or unchecked.

Checkboxes Values: The values of the checkboxes.

Color Field

It provides a color picker when clicking the input box. There are no special options within this field.

Editor Field

It provides a drop down list of the available WYSIWYG editors.

Show Buttons: You can decide if the button should be shown or not.

Hide Buttons: You can select special buttons in a drop down for hiding in the tool bar of the editor. This option is only useful if the option show buttons is set to yes.

Width: The value for width defines the width (in pixels) of the WYSIWYG editor. Default value for this is 100%.

Height: The value for height defines the heigth (in pixels) of the WYSIWYG editor. Default value for this is 250 px.

Filter: Allow the system to save certain html tags or raw data.

Integer Field

It provides a drop down list of integers between a minimum (first) and maximum (last) value.

Multiple: Allow multiple values to be selected.

First: This value is the lowest on the list.

Last: This value is the highest on the list.

Step: Each option will be the previous option incremented by this integer, starting with the first value until the last value is reached.

List Field

It provides a drop down list or a list box of custom-defined entries. If the field has a saved value this is selected when the page is first loaded. If not, the default value (if any) is selected.

Multiple: Allow multiple values to be selected.

List values: The values of the list.

List of Images Field

It provides a drop down list of image files. In the frontend, it displays the actual image.

Directory: The filesystem path to the directory containing the image files to be listed.

Multiple: Allow multiple values to be selected.

Image̠ Class: The class which is added to the image.

Media Field

It provides modal access to the media manager for insertion of images with upload for users with appropriate permissions.

Directory: The default image directory for this field. The Media field inherently defaults to the main /images folder, so anything entered into the Directory field is assumed to be inside the images folder.

Preview: Shows or hides the preview of the selected image.

Image class: The class which is added to the image.

Radio Field

It provides radio buttons to select different options.

Radio Values: The values of the radio list.

Repeatable Field

It creates a repeatable form with customizable fields. In the frontend, it is displayed as unordered list with comma separated values.

Form Fields: You can add one or more form fields.

Sql Field

Provides a drop down list of entries obtained by running a query on the Joomla Database. The first results column returned by the query provides the values for the drop down box.

Multiple: Allow multiple values to be selected.

Query: The query must return two columns; one called 'value' which will hold the values of the list items; the other called 'text' containing the text in the drop-down list.

Text Field

It provides a text box for data entry.

Filter: Allow the system to save certain html tags or raw data. Use the raw filter to ensure that html code is preserved when the form is processed.

Maximum Length: The maximum number of characters that can be entered.

Textarea Field

It provides a text area for entry of multi-line text.

Rows: The height of the visible text area in lines. If omitted the height is determined by the browser.

Columns: The width of the visible text area in characters. If omitted the width is determined by the browser.

Maximum Length: The maximum number of characters that can be entered.

Filter: Allow the system to save certain html tags or raw data.

Url Field

It provides a URL text input field.

Schemes: The allowed schemes are HTTP, HTTPS, FTP, FTPS, MAILTO, URL and FILE.

Relative: Use this option to determine whether or not relative URLs are allowed.

User Field

It provides a field to select a user from a modal list. This field displays the User Name and stores the User ID. There are no special options within this field.

Usergroup Field

It provides a drop down list of available user groups.

Multiple: Allow multiple values to be selected.