Translating WordPress forms is now easier than ever. Using TranslatePress you can create bilingual or multilingual WordPress forms.
You’ll be able to translate WordPress forms (including all form fields and messages) directly from the front-end in just a few clicks, using a visual translation interface. All this without the need to create separate forms, one for each language.
In this tutorial we’ll focus on how to create multilingual WordPress forms of any type.
Whether it’s a simple contact form, user registration form, job application form or survey form, you can follow the simple steps below to translate it.
Why Translate WordPress Forms
If your business is aiming to reach an international audience, then building a multilingual website is the way to go. This of course implies you need to translate WordPress forms of different types.
By translating your forms, you have the potential to:
- reach a wider, international audience
- increase your form’s conversion rate
- boost your revenue, if you’re collecting payments or donations via an order form
Below we’ll show you how to setup and translate a form in as many languages as you want. This way you’ll keep all your collected data (form submissions) in one place and not have to setup a different form for each language.
How to Translate WordPress Forms
First we’ll go ahead and create a new WordPress form. For the scope of this tutorial we’ll create a simple contact form.
We’ll be using the WPForms plugin, as it’s one of the most popular form builders out there with its free version powering over 3 million websites. However, the translation steps that we’ll outline below will work with any form plugin including Contact Form 7, Gravity Forms, Ninja Forms and more.
Creating a simple contact form with WPForms is really straight forward. After installing and activating the plugin, you’ll be prompted with an interface for creating your first form. Just enter a form name and select a template. There are a few pre-made templates, from which we’ll select “Simple Contact Form”.
This template already has a “First” and “Last Name” field, “Email” and “Message”. We’ll add one more called: “Contacting us about”, which will be a dropdown with a few options to select from.
Now, we’ll simply hit “Save” and close the form editor. Then create a new page called “Contact Us” and place the form inside.
This can be done by simply clicking the “Add Form” button from the Editor, or copy/pasting the form shortcode inside the page.
Publish the page and you’re done. Here’s how our newly created contact form looks in the front-end.
Next, we’ll proceed with installing and activating TranslatePress for translating the form.
We’ll use the free version of TranslatePress, available at wp.org for this tutorial.
After installing and activating TranslatePress, you’ll notice a new “Translate Site” item added in the admin bar.
Just hover over it and click “Settings” (or you can click the “Settings” menu item and select TranslatePress). This will take you to TranslatePress Settings.
Here we can add the languages in which we want to translate the contact form.
English is our default language, and we’ll also add Spanish. There are a few other settings (like integration with Google Translate for automatic translation or customizing the language switcher), but we’ll skip them for now and click “Save Changes”.
We’re now ready to translate our WordPress form.
Translate Form Fields
To start translating your form fields simply navigate to the page where the form in located and click the “Translate Page” button from the admin bar.
This will open up a front-end translation editor where you can translate every string on a page and see the changes in real time.
As you notice, once you hover over a certain field, a pencil icon will appear, allowing you to translate it. This way you can translate all form field labels and descriptions. We also translated the “Submit” button for our form the same way.
The option values for select, checkbox, radio etc. are all found in the “String list” dropdown on the left. This contains all the strings found on that page.
In our case we’ll select and translate all the options from our “Contacting us about” dropdown.
After translating this as well, all our form fields have been translated.
Translate Form Validation and Success Messages
Now, the only thing left to translate are form messages. We need to translate both validation messages as well as the success message displayed after a successful form submission.
For validation messages, we’ll trigger the form submission by clicking the Submit button. Then once the errors are displayed we’ll click on them and add the Spanish translation.
The same goes for the success message. Fill in the form fields and submit a test message. Then when you’re prompted with the success message click and translate it.
That’s it. Your contact form is now multilingual.