Hello Drupalers! Here is another #Tips&Trick to make your placeholder translatable. Recently, I have an opportunity to fix one of the issues in Drupal 8 instance where the website was not multilingual hence unable to handle internationalization. After fixing the issue, the contact form now supports more than 25 languages. Let me explain you, what exactly was the issue over here? And how did we overcome this issue?
Issue: Here, Drupal Contact Form Placeholder was not translatable from User Interface Translation.
As we all know anything passes through t() function is always translatable. The issue is generally found in Drupal 8, not sure whether it occurs in Drupal 7 or not. To check the same in Drupal 7, you need to use contributed locale module and check whether web form placeholder gets transformed or not when we do the translation. Remember, Placeholder does pass through t() function.
Notably, all text that passes through t() are visible in User Interface Translation. However, there is no such option to create the translation of a custom text. There many of us have difficulties in translating the text.
See the screenshot below for an example:
Workaround: To add Custom placeholder through your module in the form field.
Don’t add it through field setting, leave it blank. We will add it through a custom module or custom Twig File. Here, Placeholder text should pass through t().
Adding Placeholder through custom module in the form
Scenario 1: To add custom placeholder to your form.
/**
* Implements hook_form_form_id_alter().
*/
function custom_form_contact_message_feedback_form_alter(array &$form, FormStateInterface $form_state, $form_id) {
$form['field_name']['widget']['0']['value']['#placeholder'] = t('custom placeholder needs to be translate’);
}Way to add through custom Twig file in your form
Scenario 2: To add custom string to your template file or twig.
Once we have added our custom placeholder to custom module or twig, it should start displaying in User Interface Translation. And from there we can add translation for our choice of language. See the screenshot below for an example of ‘Filter Translatable Strings’.
Once it is visible on User Interface Translation, add text for your respective language and save the translation. Here I am adding text for the Hungarian language.
Below is the sample for contact form after applying the solution.
The above step is one of the workarounds to translate custom text in Drupal 8 using custom code and Core User Interface Translation. Possibly, you can import .po file of respective languages by exploring & importing the same file with updated msgid & msgstr. Let me know if you come up with a better solution for the above-mentioned issue.
Valuebound, we are fully on the Drupal 8 bandwagon - from an internal, client site development to consulting services. Our development team has been working with Drupal 8 as a group for over a year. Are you interested in learning more about how Drupal can help your business grow? Contact Us.
