Joomla 4 is around the corners and as the beta updates are getting better each time, our scope for exploring Joomla is also expanding. There are some good features in Joomla 3 that have been carried forward to Joomla 4 as well and one such being the option of adding custom fields in Contact Forms.
The main purpose of adding custom fields in the form is that it gives us more possibilities and options to customize the contact form in Joomla without having to install a special extension for it. So if you wish to make a lightweight Joomla website that has a contact form, then these fields will help you do just that.
Adding custom fields to a contact page is easy if you follow the steps mentioned in this post.
The first step here is to create a Contact page in Joomla 4.
Creating Contact Page with Form
The very first step is to create a Contact page on your Joomla website with the help of the Contacts component.
Navigate to Components > Contact > New. Once you will click on the New button from the top left, you will be redirected to a contact form page where you have to enter the title for the form along with other important details.
Here you will find 5 different tabs.
- New Contact - Add the key person’s contact details here. These details will be displayed along with the contact form. You can add Name, Image, Email, Address, Telephone, etc and if you leave them empty, these will not be displayed on the page.
- Miscellaneous Information - This tab comes with a text editor and you can add any additional details which you want to display on your contact page.
- Display - The display option gives you control for the category, display formats, contact information, etc.
- Form - Here you will find the configurations for the contact form. You can make configurations as per your needs.
- Publishing - Under the publishing tab, you will have additional information such as Meta description, keywords, robots, dates, etc.
Once you are done with all these, save the page and move to the next step.
Assign to Contact Page to Menu Item
In the next step, we will assign the contact page to the menu item.
Now, navigate to Menus > Select Menu > New. Select Menu Item Type Single Contact from Contacts. Select contact which you have created and want to display on this menu item.
Once done, click on the Save button, and you are done with creating a contact us page without using any third-party contact form extensions.
Now, you can open the menu from the frontend to check how it is looking.
Add Custom Fields in Joomla Contact Form
The default Joomla contact form gives you 4 default fields only. But you want to collect more information from the users such as gender or budget or anything else.
To achieve this, you have to use the custom fields. So, let’s check out how to add a custom field in the Joomla contact form.
Creating Field Groups
In order to add a custom field to your Joomla contact form, you first need to create the field group. So navigate to Components > Contacts > Field Groups. You will see a dropdown on the left side and select Mail from there.
Now, click on the New button from the top and add the field group.
Once done, save it and move to create the custom field.
Creating Custom Field
To create a custom field, again navigate to Components > Contacts > Fields.
Before clicking on the New button, make sure you have selected the Mail (See attached screenshot) and then click on the New button.
For this demonstration, I am creating a custom field to ask for the gender. So I will need a radio-type field.
Give a Title to the field and then select the Type Radio from the dropdown. You can add other settings here such as what will be the label, description, or mark it as required.
Under the Radio Values, add your values. According to my example, my values will be Male and Female.
From the right sidebar, select the Field Group and Category on which you want to save this field.
Now, navigate to the Permission tab. Change Edit Custom Field Value to Allowed so the public user of the site can select the checkbox values.
Once done and reload the contact us page on your website. You will be able to see the newly added custom field on the contact form.
This is how you can use custom fields in Joomla 4 Contact form. Feel free to comment if you have any suggestions to improve this article or have any questions.
