Wednesday, October 18, 2017

Sitecore 9 Forms : translating error messages

Sitecore 9 Experience Forms

Sitecore released a successor for Web Forms for Marketers (WFFM) with the new Sitecore 9 version, called Sitecore Forms.

In a multilingual environment you want to translate your forms, which is easy as the form editor itself has a language switch.  But what about the error messages - those things a visitor gets when (s)he fills in the form not as expected...

Translating error messages

Find the validators in the Sitecore Content Editor: /sitecore/system/Settings/Forms/Validations

Each validator has a Message field. Create versions of the validator item in all the languages needed and fill (or update) the message field as desired. Just check that the message is valid: the parameters in the text need to match the original value. As in the example (image) for email there is "{0}". A developer will recognize this syntax - all translations do need this token as it will be replaced by the field name when displaying the error.

Client-side messages

The messages entered here will be used for client- and server-side error messages. Which is nice. Just be aware that somewhere also jquery validation gets used and that can lead to strange situations. I noticed that the email validation can give two different error messages depending on what the error is.. and one of them is not translated as it comes from jquery. 

Translating the jquery validation is out of scope here as that is documented elsewhere and is not related to the Sitecore solution. Update: https://ggullentops.blogspot.com/2019/04/sitecore-9-forms-translating-client-error.html ;)

Required field

You might notice that the most used validation - required field - is not in the list. That is because this is a special case.. also on a Forms field, you would not select a required validator, but just tick the required checkbox. 

The code for the required field validation works in a different way and the message will come from the Sitecore dictionary. If you want to update or translate it, you need to add a key to that Dictionary. This can be done in the master database - just add an item in the /system/Dictionary - the name doesn't really matter. The key however needs to be exactly "{0} is required.". The phrase can be anything you want, just remember to add the {0} token. 

Create versions and translate in all languages needed - and don't forget to publish.

Update - password/email confirmation fields

As new fields got added in newer versions (9.3) - some new translation requirements were found. AS asked in the comments, the password & email confirmation fields seem to be special cases as well. How to translate them was mentioned on Sitecore StackExchange (https://sitecore.stackexchange.com/q/24129/237): just add "The {0} and {1} do not match." to the dictionary as well.

8 comments:

  1. What gets filled into the token? If it's the field name, then how do you translate that?

    ReplyDelete
    Replies
    1. It's the field title, so that can be translated in the form itself

      Delete
  2. Thank you, I have loaded localized messages from jquery validator https://github.com/jquery-validation/jquery-validation and required validation message is always ignored from localized messagges, I wondered why and you have explained it. Sitecore needs fixing it as its really logical. Thank you.

    ReplyDelete
    Replies
    1. Don't forget to read the post about client-side translating as well: https://ggullentops.blogspot.com/2019/04/sitecore-9-forms-translating-client-error.html

      Delete
  3. I can't find where I would translate the error-messages that come for the Confirm E-mail and Confirm Password fields if a user misspells their e-mail or password in 1 of the two fields.

    ReplyDelete
    Replies
    1. That's a good question.. and I do not know the answer (yet). You might want to ask this one on Sitecore StackExchange or to Sitecore Support.

      Delete
    2. Got my answer on Sitecore StackExchange, it's the same as the Required fields but now with the exact key "The {0} and {1} do not match."

      Delete
    3. StackExchange is the best :) I've updated the post here to include that extra information so it's more complete again.

      Delete