How to Translate Joomla's Contact Form

: Written by Steve Burge Steve Burge; Published: 22 March 2018 22 March 2018

If you follow our blog, you have a good idea of how to handle content on your multilingual Joomla site.

Now take a look at how you can translate Joomla's extensions.

In this tutorial, you are going to learn how to create a contact form that is available in both English and French.

The process is going to be very similar to the one that we used in previous posts on how to translate Joomla content. Here's the process we're going to use:

Organize categories for the contact forms.
Create the contact forms, and associate them.
Create the menu links, and associate them.

Multilingual Contact Form Categories

Let's see how that process works for contact forms:

In the admin area of your site, go to "Components", and then to "Contacts":

Go to Components and then to Contacts

Click the "Categories" link in the left-hand menu:

Click the Category link

We do have a choice to make with categories:

If you don't have a lot of contact forms, then you can leave it as "Uncategorised" and put both English and French contacts in that category.
If you have many contact forms, then it is probably best to create separate categories.

In this example, we're going to leave the default "Uncategorised" category alone and use it for all our contact forms. If you don't have an "Uncategorized" category, create it now.

Create the Uncategorized category now

Multilingual Contact Forms

Click "Contacts" in the left-hand menu:

Click Contacts

Click on the title of the existing contact form:

Click on the title of the existing contact form

Enter your name in the Name field:

Enter your name in the Name field

Choose English (en-GB) for the Language option.
Click on "Save & Close".

Click Save

Now, we have an English version of the contact form:

Now, we have an English version of the contact form

Let's click the "New" button and create a French version of the contact form:

Click the New button

Enter the French version of your name, if there is one. There is no special version of my name in French, so I will enter Igor Mihaljko again:

Enter the French version of your name

Choose French (FR) for the Language option:

Choose French (FR) for the language options

Put your email address in the Email field:

Put your email address in the Email field

Click on "Save" button to apply your changes:

Click on Save button to apply your changes

After saving, click on the "Associations" tab:

After saving, click on the Associations tab

Click on the "Select" button and associate this French version of the contact form with the English version:

Click on the Select button

Click on "Save & Close" to apply your changes.
You will see that those two contact forms are now related:

You will see that those two contact forms are now related

Multilingual Menu Links to Contact Forms

Go to "Menus", and then "Main Menu (en-GB)".
Click on the "Add New Menu Item" link:

Click on the Add New Menu Item link

Set the title of the menu item to "Contact Me":

Set the title of the menu item to Contact Me

Click on "Select" for the "Menu Item Type" option:

Click on Select for the Menu Item Type option

Choose "Contacts" and then "Single Contact" item from the selection window:

Choose Contacts and then Single Contact item

Choose the English version of your contact form:

Choose the English version of your contact form

Under the "Language" option, choose "English (en-GB)":

Under the Language option, choose English (en-GB)

Click on the "Save & Close" button to finish.
In the "Main Menu (en-GB)", you can see the new menu item is linked to the English version of our Contact form:

You can see the new menu item is linked to the English version of our Contact form

Now let's go to the "Main Menu (fr-FR)":

Now let's go to the Main Menu (fr-FR)

Click on the "New" button:

Click on the New button

For the "Menu Title", put in the French title "Contactez moi":

For the Menu Title, put in the French title Contactez moi

For the menu item type, choose "Contacts" and then "Single Contact":

For the menu item type, choose Contacts and then Single Contact

Choose the French version of your contact form that you set up earlier:

Choose the French version of your contact form that you set up earlier:

Under the "Language" option, choose "French (FR)":

Under the Language option, choose French (FR)

Click on the "Save" button.
Click on the "Associations" tab.
Click the "Select" button:

Click the Select button

Associate the French version of your menu item to the English version of the menu item:

Associate the French version of your menu item to the English version of the menu item

Click "Save & Close":

Click Save & Close

Go to the front of your site. You will now have an English version of the "Contact Me" menu link:

Go to the front of your site. You will now have an English version of the Contact Me menu link

Click on the French flag and you will see the French version of the contact form. Since we uploaded the French language pack for Joomla, all of the default text is already translated into the French language.

You will see the French version of the contact form

Additional Reading

What's Next?

This same process will work for all of the default Joomla extensions. They will all have these multilingual capabilities.

Later on in this blog, we are going to show you how to translate non-core extensions and templates. We are going to concentrate on cleaning up what we see in front of us.

We are going to translate those last little items that haven't yet been fully translated into both English and French.

Would you like to learn more about Multilingual Joomla? Join the Joomlashack Everything Club and instantly download the "Multilingual Joomla Explained" book by Igor Muhaljko and Steve Burge.

The Joomlashack Blog