Introduction

In the previous tutorial, we showed you how to create a contact form using the default contact component in Joomla 4. We have successfully created a basic contact form and assigned it to a menu item for everyone to access. In this tutorial, we will guide you on how to add contact custom fields to the same contact form we created earlier to get additional information.

How to Add Contact Custom Fields to Joomla Contact Form

By default, every contact form created with Joomla’s built-in contact component basically provides us with only four fields. If you want to get additional information of your site visitors through the form usage, you can add more fields to the form using contact custom fields. And with the release of Joomla 4 templates keeping forward this amazing feature, custom fields are becoming more and more useful. This way, you’re gonna improve your form with more possibilities and options without having to install any third-party.

And since custom fields are contained within field groups, so before creating custom fields, we will create at least one field group first.

Create Field Groups

From the Home Dashboard, navigate to Components > Contacts > Field Groups to start adding a new contact field group.

Joomla 4 - Contact Custom Fields - Field Groups

Here you see a drop-down with three selections: Contact, Mail, and Category. While choosing Contact or Category will limit your fields to the site admins only, selecting Mail will attach your fields to contact forms that users can rely on to send email messages.

Joomla 4 - Contact Custom Fields - Field Groups - Select Mail

Once you select Mail from the drop-down, click New to add a field group.

Joomla 4 - Contact Custom Fields - Field Groups - Add New

Now, enter a title for the field group, set the status to Published, and click Save & Close when you’re done.

Joomla 4 - Contact Custom Fields - Field Groups - Enter Info

Make sure your field group was successfully saved.

Joomla 4 - Contact Custom Fields - Field Group Saved

Next, we’re moving to add contact custom fields.

Create Contact Custom Fields

Go to Components > Contacts > Fields:

Joomla 4 - Contact Custom Fields - Fields

Again, select Mail from the drop-down:

Joomla 4 - Contact Custom Fields - Fields - Select Mail

Click New:

Joomla 4 - Contact Custom Fields - Fields - Add New

Give your new field a title. This can be any type of sentence, an imperative, a question, etc.

Joomla 4 - Contact Custom Fields - Fields - Provide A Title

On the right side, choose a field group and categories where you want to save this field. I will choose the one I just created above, which is Additional Info.

Joomla 4 - Contact Custom Fields - Fields - Select Field Group

For the Type field (Required), choose one from 16 different options. And as you can see from the screenshot above, my field title is intended to ask what social platforms my users are currently on. So to demonstrate this, I’m going to choose Checkboxes (checkboxes) as the field type for my new custom field.

Joomla 4 - Contact Custom Fields - Fields - Select Field Type

Then under Checkbox Values, add values for your field type. In my case, it would be Facebook, Twitter, LinkedIn, etc. Click + or to add or remove checkbox values as desired.

In addition, you can also add/edit other settings like Name, Label, Description, Default Value, or decide whether to make this a Required field.

Joomla 4 - Contact Custom Fields - Fields - Fill In Other Info

* Important: On the Permissions tab, set Edit Custom Field Value to Allowed so that the public user group can select the field’s checkbox values.

Joomla 4 - Contact Custom Fields - Fields - Change Permission

When you are happy with your settings, click Save & Close and make sure your new contact custom field is successfully saved.

Joomla 4 - Contact Custom Fields - Field Saved

Review and Edit Custom Fields

With all of the above steps set up correctly, your contact form on the front-end should now look something like this:

Joomla 4 - Contact Custom Fields - Review On Frontend

However, keep in mind that you can always group multiple custom fields together into the same field group.

To illustrate this, I’m going to create a custom field within the same field group to collect the gender information of the form submitter.

And for that purpose, I’ll once again have to do the same custom field creation song and dance we just did above (Components > Contacts > Fields > Mail, New, etc.).

Joomla 4 - Contact Custom Fields - Fields - Enter New Field Info

As you can see here, this time I choose the Radio (radio) type for my new field. And at the same time, I also want to force the user to answer this question so I marked this field as required.

And this is the final result:

Joomla 4 - Contact Custom Fields - Final Results

That’s it! You now know how to add contact custom fields to Joomla contact forms using the default built-in contact component in Joomla 4.

Conclusion

Custom fields can be considered as the simplest way to extend the functionality of Joomla contact forms. By using custom fields, you don’t have to interfere with third-party extensions. Hope this article was useful to you. If you have any questions or would like to improve this tutorial, don’t hesitate to share your thoughts in the Comments section. We are happy to hear your feedback.

5/5 - (3 votes)
Lt Digital Team (Content &Amp; Marketing)
Latest posts by LT Digital Team (Content & Marketing) (see all)

The Big Summer Sale! Get 50% Off for everything on today, don't miss it. Coupon code: SUMMER50 Redeem Now
The Big Summer Sale! Get 50% Off for everything on today, don't miss it. Coupon code: SUMMER50 Redeem Now