Skip to main content

Joomla 3 tutorials

How to use custom fields in Joomla 3 ?


How to use custom fields in Joomla 3.7 ?

Custom fields finally arrived in Joomla! This long awaited option has been added in version 3.7. I think this is one of the most important changes since Joomla 3 release in the 2012 year and gives all users great abilities to add additional custom options to Joomla articles (and not only articles).

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

  • Calendar
  • Checkboxes
  • Colour
  • Editor
  • Integer
  • List
  • List of images
  • Media
  • Radio
  • SQL
  • Text
  • Text Area
  • URL
  • User
  • User Groups

Each field can be highly customized and used in:

  • articles
  • users profiles
  • contact forms

Of course, many of the developers probably will also start to integrate custom fields in 3rd party components.

How to create a custom field in Joomla? Let's do an example!

Under 'Content' menu in the backend, you can find two positions: 'Fields' and 'Field Groups'.

how to create custom field in Joomla

First, you need to create a group for your custom fields, click a 'New' button under 'Field Groups'.

create a group for your custom fields in Joomla

Then in Content -> Fields, you can create fields.

a) General filed settings

Title: Set a field title.

Type: Choose one of 15 available field types.

Name and Label: You can add them otherwise they will be automatically generated (from the title).

Description: Enter a custom field description.

Required: You can choose that field should be required or not.

Default Value: You can set a default value e.g. 'sample text' words for input.

Filter: You can control field content with a filter. For example, you can force to use only numbers (integer) in a given field. Some of the available options: raw, safe HTML, text, alphanumeric, integer, float, telephone.

Maximum Length: Define a maximum length of the input.

b) Options for custom field

Placeholder: Set input placeholder. The attribute specifies a hint that describes the expected value of the field. For example a sample value or a short description of the expected format in this field. This hint is visible in the input before the user enters a value.

Render Class and Edit Class: You can set CSS classes which will be added to the fields in output or edit form.

Show Label: Choose to display label or not.

Show On: Choose where to display field.

Automatic Display: Decide where to display fields.

1. After Title - field will be visible below the article title. Example:

2. Before Display - field will be displayed before the article content.

3. After Display - field will be displayed below the article content.

4. No - field will not be displayed by default, but you can display it manually in the article.

c) Publishing

There is a possibility to assign fields to fields groups and categories. You can set the category to 'all' or select some categories. These options give you the ability to create multiple groups and fields and display them in the specific places.

The example of filed groups:

The example of custom fields:

How to use Joomla custom fields in the article?

Once you have custom fields, we need to set a field data.  Edit the article and find a tab with a Fields group name.

You can display each custom filed directly in the article content.
Simply, click 'Fields' button in the Editor and choose field or group in the modal popup.

How to use Custom Fields in the article?

You can also use plain text to display fields or groups:

where '1' is an ID of field or group.

How to use Joomla custom fields in contacts or user profiles?

Basically, it is very similar to usage in the articles.
The difference is that you should add custom fields and groups under 'Users':

How to use custom fields in contacts or user profiles

or in 'Components -> Contacts':

What is the purpose of custom fields on Joomla site?

You can prepare many cool things, below you will find an example of the car product.

Example field:
a) Brand (media)

b) Condition (radio)

c) First registration (calendar)

d) Interior features (checkboxes)

Article settings:

Result:

Another example of a member page - and some CSS styles :)

Fields:

Output:

Unlimited possibilities of Joomla custom fields?

Almost. Custom fields are really powerful but the most important thing is you can use them in your own way!
'Overrides' is the key. You can use custom fields in overridden files.

More details in the documentation:
https://docs.joomla.org/J3.x:Adding_custom_fields/Overrides

Good luck!