A few years ago we built a site for a client who didn't need anything fancy on the contact page, just a standard name, email, subject and message, so it was pretty simple to use the core Joomla Contacts extension, create a single Contact, and set up a menu link to that contact.

Usually if we do a contact page this way, we only add the email address to the Contact and hide everything except the form, then create modules for everything around it.

Recently the client came back and asked if we could add a mobile number to the form. Apparently a lot of queries were coming in where people were mistyping their own email address, so a phone number would help them to track down the enquiry.

"Sure!" I said, thinking Custom Fields and Override. A quick Google search revealed this very simple solution by Joomlashack, which took about 5 minutes to set up. Great!

contact custom fields1Problem was, the new Custom Fields were displayed at the bottom, under the Captcha. The client was happy with the new field, but wanted it to display under the email field.

This is where things got difficult. To clarify, I'm not a PHP coder. I can read PHP and see what it's doing, and generally move things around enough to create overrides, and if I ever need more code then I pay someone to do it better than I can.

Here's the issue:

  1. It isn't easy to rearrange the order of fields, because there are actually 2 files that generate the form - default_form.php and default_user_custom_fields.php.
  2. It isn't possible to simply override default_form.php by adding/removing/rearranging lines of code, because default_form.php doesn't actually include the existing fields, but has a single line - renderField(); ?> instead.
  3. The custom fields come from the 2nd file, the default_user_custom_fields.php, which get displayed as an array tacked on at the bottom under the CAPTCHA.

I asked some developer contacts and they said I had to completely rewrite default_form.php, remove the render part, and manually add in each field. Suddenly the simple "add a phone number" request got very complicated! At this point, 3 thoughts crossed my mind:

  1. I could do this in under an hour with RSForms;
  2. I shouldn't have to;
  3. Now you've got me curious, Joomla!

Anyway, I managed it but it's … a bit ugly. Any suggestions on how to improve this are most welcome, please feel free to add suggestions in the comments.

contact custom fields2To do this, you need to:

  1. Create a custom field called "phone" via the Joomlashack instructions.
  2. Create a template override of com_contact / contact.
  3. Click to download this modified default_form.zip and copy it to \templates\your-template\html\com_contact\contact

I've actually included 2 custom fields in the form - "phone" and "mobile", in case you need both. As long as the custom field you create is named either of these, you shouldn't need to modify the PHP. If you want 3 or more custom fields, just copy/paste/modify that file as appropriate.

Visit our Contact page to see this in action.

Key takeaways:

  • The functionality to create custom fields in a contact page is already in the Joomla core. This includes the ability to add the new fields to the core form, AND have the input of those fields included in the email that is sent to the website owner when a visitor submits. Functionally, the process works beautifully, and is a huge improvement to Joomla.
  • Hopefully one day in the future, when custom fields become a bit more integrated into the Joomla core, this type of overriding won't be needed. ????

About The Author

Nicky Veitch

Author: Nicky Veitch

Owner, WebSolutionZ

Website: WebSolutionZ.com.au

linkedin round facebook roundtwitter round

About Us | Contact Us | Disclaimer | Privacy Policy

Want more articles like this?  Subscribe to our newsletter