Our developers are hoping to build multi-language functionality into a future version of the app, but in the meantime, there are a couple of resources that you can take into consideration for translating your form:

Create multiple forms in Customer Fields (one per language) and add some Liquid code to the store's theme to display the appropriate form based on the user's chosen language.
Use a translation app for Shopify to translate the form content. In this article, we discuss the use of LangShop, but you're welcome to use other apps as well -- as long as they can translate the app's embedded forms.

Using Liquid to display multiple forms

This method is best suited for those who are comfortable with Liquid and Shopify's code editor for themes. The idea is to use some Liquid code to automatically display the correct form based on the language selected by the user (also known as their "locale"). This method is great if you're already using an app or a theme that offers a language switcher. Just keep in mind that the number of forms you could create for this purpose would depend on your current Customer Fields plan.

Step 1 - Create form(s)

First, you will need to create forms in Customer Fields for each of the languages that are being used by the store. For the sake of this article, let's say you want to show one form in English and one in French. Remember that you can adjust each form's error messages and buttons to use your desired content using the 'Settings' tab in the form builder.

Step 2 - Prepare for manual install

Each language-specific form must be manually installed on the store's theme using a shortcode. Be sure to check out our help article on manually installing a form via shortcode if you are unsure how to do so.

The custom Liquid code found in Step 3 below is designed to show the appropriate form based on the user's language selection.

Step 3 - Add Liquid to theme code

Next, you'll need to add some extra Liquid code to the theme to detect the user's locale and display the proper form. This is done by editing the template or section that contains the theme's native registration form.

Most themes have the registration form in templates/customers/register.liquid, although this can vary based on how the theme was developed.

Here is an example of the Liquid you can use to show language-specific forms based on the language selected by the user:

{% if request.locale.name == 'English' %}
  [shortcode for English form]
{% else %}
  [shortcode for default language form]
{% endif %}

Note: The code above assumes that the store's default language is not English, so be advised that you may need to adjust the control flow tags ({% if %} and {% else %}) as needed.

Using LangShop with Customer Fields

Please note that for any questions regarding the LangShop app, you should refer to their help center.

After you install LangShop and apply it to the desired theme, you will want to follow LangShop's instructions on translating "dynamic text" (referring to the custom content shown by apps on your store). Here's a link to an article on Langshop's help center with details on how to find and translate text dynamically: Find and translate Dynamic Content

🎉 Pro Tips:

Each of the form's field labels needs to be manually added in LangShop in order to be translated.
When adding a new field to translate, you will need to add the opening and closing HTML tag (i.e. <label> and </label>) to the "Previous char" and "Next char" fields. Then, add the name of the field as it's seen on your storefront into the "Original text" field. See the example below:

Don't forget to translate the form's buttons and checkbox labels, too!
After you've translated your form, be sure to log into Customer Fields and install your form on the translated theme (the title of the theme may be something like "LangShop | Debut").

Questions or concerns?

Reach out to our support team via chat or email, and we'll be happy to assist and advise as needed! 😊