How to Translate Multi-Site Forms in Craft CMS with Freeform 5

Freeform 5 introduced site-aware forms and a translation interface that makes managing multilingual forms much easier. You can now translate everything from field labels to error messages directly in the Craft control panel.

Setting Up Your Multi-Site Structure for Freeform Translation

Before you can translate forms, you need multiple sites in Craft CMS. Each site represents a different language or region.

Creating Sites for Multi-Language Form Support

Navigate to Settings > Sites in your Craft control panel. Add a new site for each language you want to support.

For each site, configure:

• Name: English, French, German, etc.
• Base URL: yoursite.com, yoursite.fr, yoursite.de
• Language: en-US, fr-FR, de-DE

Here's what a typical multi-site setup looks like:

Primary Site: English (yoursite.com) - en-US
Site 2: French (yoursite.fr) - fr-FR  
Site 3: German (yoursite.de) - de-DE

Make sure each site has the correct language code. Freeform uses these codes to determine which translations to display.

Installing and Configuring Freeform 5 for Multi-Language Forms

Install Freeform 5 through the Plugin Store or via Composer:

composer require solspace/craft-freeform

After installation, you need to enable site-aware forms. Go to Freeform > Settings > General and turn on Site-Aware Forms. This tells Freeform that you want to use different content for different sites.

Without this setting enabled, Freeform treats all sites the same. With it enabled, you can translate every aspect of your forms.

Making Forms Translatable Across Multiple Sites

Create a new form or edit an existing one in Freeform > Forms. In the form builder, click the Settings tab and enable the Translatable toggle.

Next, assign the form to the sites where you want it to appear. You can assign a single form to multiple sites and translate it differently for each one.

Translating Form Content for Different Languages

The easiest way to translate forms is through the control panel interface. Here's how it works:

Using the Site Picker for Form Translation

At the top of the form builder, you'll see a site picker dropdown. This lets you switch between different sites to enter translations.

When you select a site, you're entering content specifically for that language. A blue translation icon appears next to fields that have translations for the current site.

What You Can Translate in Freeform 5

You can translate almost everything in your forms:

Form-level content:

• Form name and description
• Submit button text
• Success and error messages

Field-level content:

• Labels and instructions
• Placeholder text
• Default values
• Error messages

Page and section content:

• Page names for multi-page forms
• Section headings

Options for choice fields:

• Dropdown options
• Radio button labels
• Checkbox labels

Step-by-Step Translation Process for Multi-Site Forms

1. Select your primary language site (usually English)

2. Build your form with all the content in your primary language

3. Switch to your secondary language site using the site picker

4. Go through each field and translate the content

5. Save the form

6. Repeat for additional languages

Here's an example of translating a contact form from English to French:

English Version:

• Form Name: "Contact Us"
• First Name: "First Name"
• Submit Button: "Send Message"

French Version:

• Form Name: "Contactez-nous"
• First Name: "Prénom"
• Submit Button: "Envoyer le message"

Advanced Translation Methods for Craft CMS Freeform

For developers who want more control over translations, Freeform 5 supports additional translation methods.

Translation Files for Multi-Language Freeform Support

You can create PHP translation files for each language. Copy the file from ./vendor/solspace/craft-freeform/packages/plugin/src/translations/en/freeform.php to your project's translations/{language}/ folder.

For French translations, create translations/fr/freeform.php:

 'Contactez-nous',
    'First Name' => 'Prénom',
    'Last Name' => 'Nom de famille',
    'Email Address' => 'Adresse e-mail',
    'Message' => 'Message',
    'Submit' => 'Envoyer',
    'Required field' => 'Champ obligatoire',
    'Please enter a valid email address' => 'Veuillez saisir une adresse e-mail valide',
];

Twig Template Translations for Multi-Site Forms

In your custom templates, wrap text in Twig's translation filter:

{{ "First Name"|t('freeform') }}
{{ "Submit"|t('freeform') }}

This method works well when you have custom form templates and want to keep translations separate from the form builder.

Translating Email Notifications for Multi-Language Forms

Email notifications need special attention because they're not automatically translated like form fields.

Using Site Conditionals for Email Translation

In your email templates, use Twig conditionals to change content based on the current site:

{% if currentSite.language == "fr-FR" %}
    
Nouveau message de contact
    
Merci de nous avoir contactés !
{% elseif currentSite.language == "de-DE" %}
    
Neue Kontaktnachricht
    
Danke, dass Sie uns kontaktiert haben!
{% else %}
    
New Contact Message
    
Thank you for contacting us!
{% endif %}

Using Translation Filters in Email Templates

You can also use the translation filter in email templates:

{{ "New Contact Message"|t('site') }}
{{ "Thank you for contacting us!"|t('site') }}

Make sure your translation files include these keys for each language.

Handling AJAX Forms in Multi-Language Sites

AJAX forms require JavaScript to translate success and error messages. Override these messages when the form loads:

document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('[data-freeform]');
    
    form.addEventListener('freeform-ready', function (event) {
        // Get current language from HTML lang attribute
        const currentLang = document.documentElement.lang;
        
        if (currentLang === 'fr-FR') {
            event.freeform.setOption('successBannerMessage', 'Votre message a été envoyé avec succès !');
            event.freeform.setOption('errorBannerMessage', 'Une erreur est survenue. Veuillez réessayer.');
        } else if (currentLang === 'de-DE') {
            event.freeform.setOption('successBannerMessage', 'Ihre Nachricht wurde erfolgreich gesendet!');
            event.freeform.setOption('errorBannerMessage', 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
        }
    });
});

Displaying Translated Forms Across Multiple Sites

Once your forms are translated, displaying them is straightforward. Use the standard Freeform tag:

{{ freeform.form('contactUs') }}

Freeform automatically detects the current site and displays the appropriate translation. You don't need to specify the language - it happens automatically.

Common Problems and Solutions for Multi-Language Freeform

Problem: Translations don't appear
Check that the form is assigned to the correct site and that you've saved your translations. Also verify that site-aware forms are enabled in Freeform settings.

Problem: Email notifications aren't translated
Email templates require manual translation using conditionals or translation filters. They don't automatically inherit form translations.

Problem: AJAX messages appear in wrong language
AJAX messages need JavaScript overrides as shown above. The default messages come from Freeform's English translations.

Problem: Option labels not translating
Make sure you're translating option labels for each choice field (dropdowns, radios, checkboxes) in the form builder, not just the field labels.

Testing Your Multi-Language Form Translations

Before launching, test each form on every site:

1. Visit each language version of your site

2. Fill out and submit the form

3. Check that all text appears in the correct language

4. Verify email notifications are properly translated

5. Test validation messages by submitting invalid data

Create a checklist for each language to ensure nothing is missed.

Best Practices for Multi-Site Freeform Translation

Use the control panel for editors: Non-technical team members can easily manage translations through the form builder interface.

Keep translation files for developers: Use PHP translation files for static text that appears across multiple forms or templates.

Document your process: Write down your translation workflow so team members know which method to use when.

Test early and often: Don't wait until launch to test translations. Check them as you build.

Assign forms strategically: Use the same form across sites when possible. It's easier to manage one translated form than multiple separate forms.

Next Steps for Multi-Language Form Implementation

Start with one simple form and get the translation process working. Once you understand how site-aware forms work, you can apply the same principles to more complex forms.

If you're managing many forms across multiple languages, consider creating templates for common form types. This speeds up the translation process for new forms.

The combination of Craft CMS 5 and Freeform 5 gives you everything you need to create professional multilingual forms. The translation interface makes it accessible to non-developers, while the advanced options give developers the flexibility they need.

Your international visitors will appreciate forms they can actually understand, and you'll see better conversion rates as a result.