Configure Joomla CCK Fields in Different Layouts

• Joomla CCK field - Custom Code
• Joomla CCK field - Mail
• Joomla CCK field - Button Send
• Joomla CCK field - Audio
• Joomla CCK field - Captcha
• Joomla CCK field - Date
• Joomla CCK field - File
• Joomla CCK field - Category
• Joomla CCK field - Image
• Joomla CCK field - List
• Joomla CCK field - Map
• Joomla CCK field - Rating
• Joomla CCK field - Text Area
• Joomla CCK field - Text Field
• Joomla CCK field - Video
• Joomla CCK field - Order By
• Joomla CCK field - Alphabetical
• Joomla CCK field - Paginator
• Joomla CCK Category Title
• Joomla CCK Category Description
• Joomla CCK Category Map
• Joomla CCK Category Image
• Joomla CCK, All Instance Map

Joomla CCK allows you to create custom forms, content layouts, and website pages without building everything from scratch. Each field has its own settings, allowing you to control how content is entered, displayed, and styled on your website. In this guide, we'll explain the main Joomla CCK field settings, how to customize the appearance of fields, and how to configure different field types, including Custom Code, Mail, Image, Map, Date, and more.

Joomla CCK Field Settings

When you add a field in Joomla CCK, you'll see three main tabs on the right side of the screen:

• Field - Configure the field's functionality and individual options.
• Block - Customize the appearance of the field's block, row, and column.
• Form - Configure form-related settings and styling.

Each tab contains additional tabs with more specific options. These additional tabs may differ depending on the type of field you're creating. For example, an Image field has settings related to image dimensions and allowed file formats, while a Date field has options for date and time formatting. You may also notice a small blue circle with the letter i beside some settings. Hover over this icon to see a description of the option and learn what information you need to enter. Let's look at the main settings and some of the most useful Joomla CCK field types.

1. Custom Code Field

The Custom Code field is one of the most flexible fields in Joomla CCK. It allows you to add custom content or code to your layout. When you create this field, open the Field tab and then the Main Options section. Here, you'll find three important settings:

• Access - Configure the access level for the field.
• Code Type - Select the type of content or code you want to use.
• Custom Code - Enter your code or content in the provided editor.

Depending on the selected code type and your configuration, you can use PHP, HTML, JavaScript, CSS, or plain text.

Using the Custom Code Editor. The editor makes it easier to enter and manage your content. For example, if you select TEXT as the code type and use TinyMCE as your default editor in Joomla Global Configuration, you can format text and HTML content using the editor's available tools. This is useful when you want to add formatted text or custom content to a Joomla CCK form or layout.

Displaying Other Fields with Custom Code. Another useful feature is the ability to display values from other fields in your layout. Use the +field button to insert a field reference into your custom code.

You can then arrange the output using HTML or, where supported and appropriately configured, PHP. For example, you could use custom code to display a product name, price, and description together in a custom-designed block. You can also control whether the fields appear with their default styling or are rendered as part of your own custom markup. Important: PHP and JavaScript can introduce security risks if used incorrectly. Only use trusted code, and make sure the selected code type and execution permissions are appropriate for your website.

Styling the Custom Code Field. Open the Block tab to customize the appearance of the field. Depending on the available options, you can configure:

• Margin and padding;
• Background color;
• Border and border color;
• Font size;
• Font weight;
• Font color;
• Custom CSS class.

You can use these settings to make your custom content match the design of your website.

Form Settings. The Form tab contains additional options, including:

• Layout title;
• Show layout title;
• Approve on add;
• Publish new instance;
• Form styling options.

The available settings control aspects of the layout and form behavior. Configure them according to how you want users to submit and publish content. The Form Styling Options also allow you to customize margins, padding, background colors, borders, fonts, and custom CSS classes.

2. Mail Field

The Mail field allows Joomla CCK to send an email when a form is submitted. It is useful for contact forms, booking requests, inquiry forms, and other situations where you want to receive information from a visitor. When configuring the Mail field, open the Field tab. The main options include:

• Type;
• Recipients;
• Subject;
• Mail Body;

Enter the appropriate recipient address, email subject, and message content.

Adding Field Values to an Email. You can include values submitted through the form in the email message. For example, imagine you have a booking request form with fields for a visitor's name, email address, and message. You can use the +field button in the Mail Body setting to insert references to those fields. When the form is submitted, the email can include the values entered by the visitor. This makes it easier to read and process inquiries without opening each submitted instance separately.

Sending Requests to the Relevant Person. Suppose you have a real estate website where visitors can request information about a property. You may want the request to reach the website administrator or the owner responsible for that property. Configure the recipients according to your workflow and the options supported by your CCK setup. If emails need to go to different property owners, verify how your particular configuration determines the recipient for each instance. Always test email delivery before making the form available to visitors.

3. Button Send Field

The Button Send field adds a submit button to your form. Its main purpose is to let visitors submit the information they have entered. One of its key settings is Button Text, which controls the text displayed on the button. For example, you could use:

• Send;
• Submit;
• Send Request;
• Contact Us;
• Request Information;
• Book Now;

Choose a label that clearly explains what happens when the visitor clicks the button. For example, a booking form might use Send Booking Request, while a contact form could use Send Message.

4. Audio Field

The Audio field allows users to work with audio files in Joomla CCK. Depending on your configuration, its settings can include:

• Publish;
• Required;
• Show Field Alias;
• Alias;
• Show Tooltip;
• Tooltip Text;
• Prefix;
• Suffix;
• Allowed;
• Max Upload;
• Access.

The Allowed option defines which file formats can be uploaded. The Max Upload option sets the maximum permitted file size. For example, if you want visitors to upload audio recordings, configure the permitted formats and upload limit according to your website's needs. Keep in mind that the available file types and upload sizes may also be restricted by your server's PHP configuration and Joomla settings.

5. Captcha Field

The Captcha field helps protect forms against automated submissions. Its available settings include options such as:

• Publish;
• Show Field Alias;
• Alias;
• Show Tooltip;
• Tooltip Text;
• Prefix;
• Suffix;
• Access.

Translating the OrdaSoft Captcha Message. If your form displays the OrdaSoft Captcha instruction in English, you can create a Joomla language override to translate it. For the message described in this setup, use the following language constant:

COM_OS_CCK_LABEL_REVIEW_KEYGUEST

Open the Joomla Administrator and go to the Language Overrides section in Language Manager. Select the appropriate language, search for the constant, and add your translation. After saving the override, check the frontend form to make sure the translated message appears correctly.

6. Date Field

The Date field allows users to select a date or time, depending on how the field is configured. It can be useful for event dates, booking forms, appointments, and other date-related information. Important settings include:

• Date Format - Defines how the date is displayed.
• Time Format - Defines how the time is displayed.
• Time Step - Sets the interval between available time options.
• Default Value - Defines the initial date or time value, if configured.

For example, you could configure a date field for an event registration form or use it to collect a preferred appointment date. Choose a date and time format that is easy for your visitors to understand.

7. File Field

The File field allows visitors to upload files through a Joomla CCK form. It can be useful for applications, documents, attachments, and other situations where users need to provide additional files. Important settings include:

• Allowed Ext - Defines the permitted file extensions.
• Max Upload - Sets the maximum upload size.

For example, you might allow PDF, TXT, PNG, or JPG files, depending on the purpose of the form. Only allow file types that your website actually needs, and make sure the upload size is appropriate for your server.

File Field Styling. The File field may also provide a Hover Effect setting. To configure the hover appearance, set the relevant options, such as: Hover Background Color, Hover Text Color, Hover Border Color. These settings help you customize how the file field looks when a visitor moves the cursor over it.

8. Category Field

The Category field helps users select a category when adding or organizing content. For example, a property website could use categories such as Apartments, Houses, and Commercial Properties. One of the settings described for this field is Select Type, which controls how category choices or subcategories are presented. Choose the appropriate option for the category selection interface you want to use. Categories are especially useful when your website contains many instances because they help organize content and make it easier for visitors to find relevant information.

9. Image Field

The Image field allows users to upload images to Joomla CCK. It is useful for product photos, property images, profile pictures, gallery content, and other visual elements. Depending on the field configuration, the available options include:

• Width x Height - Defines the image dimensions.
• Max Width - Sets the maximum image width.
• Max Height - Sets the maximum image height.
• Allowed - Defines the permitted image formats.
• Max Image - Sets the maximum number of images, where supported.
• Max Upload - Sets the maximum upload size.

For example, a real estate website may need property photos, while a product catalog may need images of individual products. Choose suitable image dimensions and upload limits to maintain a consistent design and avoid unnecessarily large uploads. Common image formats include JPG, PNG, and GIF, subject to the allowed formats configured for your field and website.

10. List Field

The List field lets users select from a list of available options. It is useful when you want visitors to choose from predefined values instead of entering information manually. For example, a property form might let users select a property type, while a booking form could offer a list of available options. The Select Type setting controls how the list or its options are presented. Choose the option that best suits your form and the number of choices you need to display. Using predefined lists can make your data more consistent and easier to organize.

11. Map Field

The Map or Location Map field is useful for displaying or collecting location information. For example, you might use it on a real estate website to show property locations or on a Contact Us page to display a business address. One of the basic settings is Width x Height, which controls the dimensions of the map displayed on the page.

Configure Location Map SettingsFor more detailed configuration, open: Setup Location → Open. According to the available settings in this field, you can choose which fields appear alongside the map. You can also configure the field for different purposes. For example, it may be used to let a user add a location through an input form or to display a location map on a contact page. Choose the configuration that matches your use case, and test the map on the frontend to make sure it displays as expected.

12. Rating Field

The Rating field provides a way to work with rating information in your Joomla CCK layout. It can be useful for websites that include reviews, feedback, or ratings for products, properties, services, or other items. The specific configuration options depend on the Rating field implementation in your Joomla CCK installation. Open the field settings to review the available options and configure the field for your layout.

13. Text Area Field

The Text Area field allows users to enter longer pieces of text. It is useful for descriptions, comments, messages, and other content that requires more space than a standard text field. One of its key settings is Enable Text Editor. You can enable or disable the text editor depending on whether users need text formatting tools. Another useful option is Placeholder. A placeholder displays a short hint inside the field before the user enters text. The hint disappears when the user begins interacting with the field. For example, a placeholder might say: *Enter your message here...* Use clear placeholders to help visitors understand what information they should provide.

14. Text Field

The Text Field is designed for shorter text values, such as names, titles, email addresses, or other brief information. One of its options is Placeholder, which displays a hint inside the input before the visitor enters a value. The field may also include: Check Exp., Error Text. These settings are associated with checking the entered value and displaying an error message when validation fails. The exact behavior depends on the field configuration. For example, you can use validation to help visitors enter information in the expected format. Configure the validation expression and error message according to the type of data you want to collect.

15. Video Field

The Video field allows users to work with video files in Joomla CCK. Its available settings may include:

• Show Add Track - Controls whether the add-track button is displayed.
• Allowed - Defines the permitted file formats.
• Max Upload Size - Sets the maximum file size for uploads.

Configure the allowed formats and upload size based on your website's requirements. As with other upload fields, remember that Joomla and your server may impose additional file upload restrictions.

16. Order By Field

The Order By field lets you configure how instances are sorted in a layout. This is useful when you want to show the newest items first, organize listings by price, or allow sorting by another supported field. Important settings include:

• Default Field for Order - Selects the field used for the default sorting.
• Order - Determines the sorting direction.
• Instance Fields for Order - Specifies the fields available for sorting, where supported by the layout.

For example, to display recently added instances first, you can use the instance ID as the sorting field and select descending order, provided new instances receive higher IDs. Note: Check the exact labels and available sorting options in your installed CCK version. Make sure the selected direction matches the result you want.

17. Alphabetical Field

The Alphabetical field provides an alphabetical navigation option for layouts that support it. It can be useful for directories, catalogs, and other websites where visitors need to find content by its first letter. The setting mentioned for this field is Field Tag. Review the available options and choose the appropriate configuration for your layout. Test the result on the frontend to ensure that alphabetical navigation works as expected with your content.

18. Paginator Field

The Paginator field is related to pagination, which divides a long list of results into multiple pages. Pagination is especially useful when a website contains many properties, products, directory entries, or other instances. The setting described for this field is Field Tag, where you can choose between'span` and'div`. The correct choice depends on how the field output is structured and styled in your layout.

19. Category Title, Category Description, Category Map, and Category Image

Joomla CCK also includes fields related to category information, such as:

• Category Title;
• Category Description;
• Category Map;
• Category Image.

These fields can be useful when creating layouts that display category information. For example, a category page might show the category title, a short description, an image, or a map related to that category. The precise settings available for each field can differ. Open the relevant field configuration to see its options and choose the settings that fit your layout.

20. All Instance Map

The All Instance Map field is intended for layouts that display map information associated with multiple instances. For example, it may be useful for a directory or real estate website where visitors need to explore multiple locations. The exact settings available depend on the field implementation and the layout in which it is used. Review the configuration options in your Joomla CCK installation and test the map output before publishing it.

Other documentations of Joomla CCK - website builder: