Skip to main content

Translating

All of the Freeform control panel is translatable. Front end template translating of fields and error messages is also available.

​Overview

To make a translation, follow Craft's instructions for Translating Static Text. Then continue with this Freeform-specific guide.

​Control Panel

To translate the Freeform control panel, you can simply duplicate the freeform.php file inside the Freeform plugin located at the ./vendor/solspace/craft-freeform/packages/plugin/src/translations/en-US folder. Then move it into the language ID folder (e.g. de) of your Craft ./translations/ directory. If the translations directory does not yet exist, you'll need to create it (e.g. ./translations/de/freeform.php). You can then update those language keys inside your Freeform translation file.

​Front End Template Translations

It's important to note that you have full control over what and how it's translated. You need to make sure you're consistent with applying |t or |t('freeform') as that will dictate whether the translation needs to happen inside a file named site.php or freeform.php, respectively.

To see how all parts of form formatting templates are translated, have a look at the examples we've included. When using render helpers, Freeform will generally handle the translation (|t('freeform')) setting for you. However, once you go manual or semi-manual, for example, radio and checkbox field options should look something like this in your templates:

{% elseif field.type == "radio_group" %}

    {{ field.renderLabel({
        labelClass: labelClass,
        instructionsClass: instructionClass,
        errorClass: errorClass,
    }) }}

    {{ field.oneLine ? "<div>"|raw }}

    {% for index, option in field.options %}
        <div class="form-check{{ field.oneLine ? " form-check-inline" }}">
            <input type="radio"
                    name="{{ field.handle }}"
                    value="{{ option.value }}"
                    id="{{ field.idAttribute }}-{{ index }}"
                    class="form-check-input{{ field.hasErrors ? " is-invalid" }}"
                    {{ option.checked ? "checked" : "" }}
            />
            <label class="form-check-label" for="{{ field.idAttribute }}-{{ index }}">
                {{ option.label|t|raw }}
            </label>
        </div>
    {% endfor %}

    {{ field.oneLine ? "</div>"|raw }}

    {{ field.renderInstructions() }}
    {{ field.renderErrors() }}

Some parts are handled with JS and therefore need to be translated differently. Specifically, if you're using the built-in AJAX feature and need to translate the success/error banner, you'll need to override the Freeform JS Plugin and translate those with:

freeform.setOption('successBannerMessage', 'My custom success message');
freeform.setOption('errorBannerMessage', 'My custom error message');

That might look something like the below example, but depending on several factors, please see the AJAX Forms documentation guide for more information about how to use this and where to place it, etc:

const form = document.getElementById('my-form');
form.addEventListener('freeform-ready', function (event) {
  event.target.freeform.setOption(
    'successBannerMessage',
    'This is a custom success message.'
  );
  event.target.freeform.setOption(
    'errorBannerMessage',
    'This is a custom error message.'
  );
});

Please visit the Craft documentation for more information about Setting Up a Localized Site.

​Share a Translation

If you'd like to share your translation with others, send us an email with a link to the translation file, and we'll consider including it in the main Solspace Freeform plugin package.

Page Feedback