Modifying a Joomla Contact Form with Custom Fields
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.
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:
- 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.
- 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.
- 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:
- I could do this in under an hour with RSForms;
- I shouldn't have to;
- 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.
- Create a custom field called "phone" via the Joomlashack instructions.
- Create a template override of com_contact / contact.
- 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.
- 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. ????