48 Hour Sale: Save 40% on ALL products for the next 48 hours! Use the coupon: SEPT40  Sale ends in
Joomlashack

How to Add Custom Fields to Joomla Contact Forms

How to Add Custom Fields to Joomla Contact Forms

With the arrival of custom fields in Joomla, it's now possible to create much more powerful contact forms.

I'll walk you through the basics of creating a Joomla contact form, and then you'll see how to add fields.

The examples in this tutorial are taken from the upcoming new version of "Joomla 3 Explained", the best-selling Joomla book.

How to Create a Joomla Contact Form

In Joomla 3 Explained, we build a site for a city called "Joomlaville", so that's explains the naming system we use.

  • Go to "Components", then "Contacts".
  • Click "New".
  • Name: Joomlaville Mayor
  • Email: Enter your e-mail address into the Email field. This e-mail won’t be made public, but whenever anyone uses the contact form, an e-mail gets sent to this address.
  • Category: Type Joomlaville Contacts and then click "Enter" or "Return" on your keyboard. 

new joomla contact form category

When all three fields are filled in, your screen should look like the one below.

new joomla contact form

We’re also going to make a small option change. This is a design change because I personally think another layout is easier to read than the default Contacts layout:

  • Click the "Display" tab.
  • Set the "Display Format" option to "Plain", as shown in the figure below.

joomla contact form display options

Now that you have your contact form ready, the final step is to make it publicly visible via a menu link. Because we already have a Contact Us menu link, we’re going to edit that instead of adding a new link.

  • Go to "Menus, "Main Menu", then "Add New Menu Item".
  • Title: Contact 
  • Menu Item Type: Single Contact
  • Select Contact: Joomlaville Mayor

joomla contact form menu link

Now visit the front of your site, and your contact form will look like the image below:

completed joomla contact form

If anyone uses this form, you will now get an email that looks like this:

joomla contact form email

How to Use Administrator Fields

There are some useful features you can use to improve your form. For example, you can add more data about your organization:

  • Go to "Components", then "Contacts" and edit "Joomlaville Mayor".
  • You will see a variety of contact fields including Address, City or Suburb, State or Province, Telephone, and Website. The image below shows some sample data from OSTraining:

joomla contact form admin fields

Here's how that data will appear on the front of the site:

joomla contact form with admin fields

How to Add User Fields to Your Contact Form

You can also create custom fields to improve this contact form. 

  • Go to "Components" and "Contacts".
  • Click "Field Groups" in the left-hand sidebar.
  • This is the important new task: choose "Mail" from the dropdown menu. This means your fields will be attached to contact forms that users can rely on to send email. If we choose "Contact" or "Category", our fields will only be available to site administrators. If you choose "Contact", this will be similar to the Address, City or Suburb, etc fields we saw above.

new field group joomla contact forms

  • Click "New".
  • Title: Extra Contact Details
  • Save the field group and make sure your next screen looks like this:

new field group joomla contact forms saved

  • Click "Fields" in the left-hand sidebar.
  • Again, choose "Mail" in the dropdown menu:

new joomla contact form field

  • Click "New".
  • Title: What is Your Question About?
  • Type: Checkboxes

new joomla contact form field setting

  • Field Group: Extra Contact Details
  • Checkbox Values: Enter topics that people might be contacting you about.

new joomla contact form field values

  • Click the "Permissions" tab.
  • Set "Edit Custom Field Value" to "Allowed". This will allow anyone to enter data into this field.

new joomla contact form field permissions

  • Visit the front of your site and your contact form will now have a custom field:

new joomla contact form field display

These custom fields will be included the emails you receive:

new joomla contact form field email

All-in-all, there are 15 field types in Joomla. With these fields, you can create some powerful contact forms.


About the author

Steve is the CEO of Joomlashack. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

 

 

Since 2005, Joomlashack has been a leading supplier of free and commercial Joomla templates, Joomla extensions, and Joomla Training.
Joomlashack.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.