How to use Joomla 3.7 Custom Fields?

The new shiny glamor of Joomla 3.7 is Custom Fields. It is an amazing feature that empowers you to integrate numerous elements right into your articles and gives more functionality and design elements. Adding multiple attributes is now quite easy with the new Custom Fields feature of Joomla 3.7. In this article, we are going to describe how you can use Joomla 3.7 Custom Fields and get the maximum output from it.

Let's start by giving huge thanks to the Custom Fields project contributors. Custom fields are the much-awaited feature since the release of Joomla 3. In Joomla 3.7, there are 15 different types of fields options like calendar, lists, checkboxes etc. In articles, the Custom Fields arrive at separate tabs and you can customize it there to show the attribute in your article. Now let’s have a detailed view on Custom Fields. 

Custom Fields can hugely save your time by offering ready-made attributes or information at the fingertips to use repeatedly and effortlessly. 

How to use Custom Fields?

In the Content tab, there are two options “Fields” and “Field Groups”. In the Fields page, you can create the custom fields and on the Field Groups page, you can create a group of fields.

Create a field group

First, we are going to make a field group and then some fields under it. After this, we will try to implement it in articles.

To create a field group, open the Field Groups option under the Content tab. In the upcoming window, click ‘New’ to make a new field group. After that, a new window will pop up.

Give your field group a title and some description. Then set the status to published. Here we have created a field group named “Mobile Specification”.

Create new fields: General

In the Fields page, click ‘New’ to add new fields. There are a few options you have to fill while adding the new field.

Title: Give your field a title.

Name & Label: You can add them or they will be automatically generated from the title.

Description: Add a short description of your field.

Required: Set the option to 'Yes' if the field information is must in the article.

Type: There are 15 different types of field. Use the required types relevant to the field.

Default Value: You can set a default value for your fields here. 

Filter: Control your content appearance by filtering the input.

Maximum Length: You can define a maximum length of the input.

Create new fields: Options

In this tab, you can add a placeholder, render class, edit class and customize few things. What most important here is the automatic display. You can set the automatic display option of the field after the title, before display, after display or you can set the display to No to add the field manually into your article.

Create new fields: Publishing

Select the field group and categories here. You can set the category to all or just to some specific categories, or just a single one.

Now, let's recall, we have created a field group named “Mobile specification”. Now we are going to add some fields to it.

Field Group: Mobile Specification

Field 1: Technology (text)

Here we just added the title and description and set the type to text.

Field 2: Launch (calendar)

Here we just added the title and description and set the type to the calendar.

Field 3: Memory Card (radio)

What extra you have to do here is that you have to add some radio values. Here we have added two new values 'Yes' and 'No'.

Field 4: Features (list)

Using this field type, you can make a list. Here we've made a list of features. You have to also give them values.

Field 5: Camera (checkboxes)

In this field, what extra you have to do is adding some checkbox values. Here is one done for you.

Field 6: Phone Color (color)

Here we just added the title and description and set the type to color.

Now, so far we have created a field group named “Mobile specification” and six different types of fields inside the field group. Now we are going to use them in our article.

Use of Custom Fields in article

Let's go to the Articles menu and create a new article. Here you can see, in the new article editor box, our created field group 'Mobile Specification' is there in a separate tab.

Now it’s time to put data into our fields. Go to the Mobile Specification tab. There you can see six input fields that we've created earlier. Input your data per the requirements.

Now click the field button in the editor. There is a list of the fields in the Field group. Add them to the article.

Final output

Now see the output in the article.

Wrapping up

In this article, we've tried some of the basic functionalities of Joomla 3.7 Custom Fields. We will publish more articles regarding this awesome feature. Meanwhile, please don't forget to share your thoughts and suggestions with us in the comment section below. Signing off, thanks for reading.