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.
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.
Once you select Mail from the drop-down, click New to add a field group.
Now, enter a title for the field group, set the status to Published, and click Save & Close when you’re done.
Make sure your field group was successfully saved.
Next, we’re moving to add contact custom fields.
Create Contact Custom Fields
Go to Components > Contacts > Fields:
Again, select Mail from the drop-down:
Click New:
Give your new field a title. This can be any type of sentence, an imperative, a question, etc.
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.
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.
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.
* 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.
When you are happy with your settings, click Save & Close and make sure your new contact custom field is successfully 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:
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.).
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:
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.
- How to place menu items in helix joomla 5 ? - December 14, 2024
- How to reduce the size of helix 2 layout ? - December 14, 2024
- What’s J4 starter template and how to use it - December 3, 2024
Recent Comments