Translate Contact Form 7 using TranslatePress

Translate Contact Form 7 using TranslatePress featured image

This tutorial highlights how to create multilingual forms built using Contact Form 7 together with TranslatePress.

Contact Form 7 is the most popular contact form plugin for WordPress. It’s free and powers over 5 million websites.

Translating forms built with Contact Form 7 allows you to offer a single form that will be available in multiple languages. No need to setup multiple forms with different field names for each language.

Below we’ll look into how to translate forms created with Contact Form 7 using TranslatePress.

How to Translate Contact Form 7

We’ll start by setting up a new contact form using Contact Form 7. After installing and activating the plugin, you’ll notice a new menu item “Contact“.

Contact Form 7 Add New Form

We’ll select the “Contact Forms” submenu item, then click the “Add New” button for setting up our first contact form.

Here we can setup the form and control things like:

  • edit the form template and select the fields you want the form to contain
  • edit the email template that the admin receives when a form is submitted
  • modify the validation and success messages
Contact Form 7 Fields and Messages

After you finish editing the form template, click Save. A shortcode will be displayed which you can place in a page or widget, for outputting the form.

We’ll place it inside a newly created “Contact Us” page.

Contact Form 7 shortcode

After saving the page, let’s have a look at how the form looks like in the front-end:

Form built with Contact Form 7

Next, we’ll proceed with installing and activating TranslatePress for translating Contact Form 7.

After activating TranslatePress, you’ll notice a new “Translate Site” item added in the admin bar.

TranslatePress Settings in Admin Bar

Just hover over it and click “Settings”. This will take you to TranslatePress Settings page.

Here we can add the languages in which we want to translate the contact form. We’ll use two languages for this tutorial.

English is our default language, and we’ll also add Spanish. You’ll notice there are a few other settings (like Google Translate integration for automatic translation), but we’ll skip them for now and click “Save Changes”.

TranslatePress add new language

We’re now ready to translate our form built with Contact Form 7.

Translate Contact Form fields

To start translating the contact form fields we’ll simply navigate to the “Contact Us” page ( where the form in located ), then 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.

Translate Contact Form 7 fields using TranslatePress

Once you hover over a certain field label a pencil icon will appear. Clicking it will allow to translate that certain string. Enter the translation and click the “Save translation” button.

This way you’ll be able to translate each form field and description, including the “Send” button text.

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 so you can use it to translate strings that don’t have the pencil icon showing up.

In this case let’s select and translate the options from “Contacting us about” dropdown.

TranslatePress dropdown containing all strings on the page

This concludes the contact form fields translation.

Translate Contact Form Error and Success Messages

Next, there are certain messages a contact form displays after clicking the submit button. Things like validation, errors, or successful submission messages.

For Contact Form 7, they are all located under “Messages” tab, when editing or adding a new form. Have a look at the list of messages and see which ones apply to your form.

In order to translate these with TranslatePress we need to first trigger them in the front-end. Then, once they’re visible we can select and translate each one of them.
For validation messages, trigger the form submission by clicking the “Send” button. Once the errors are displayed click on them and add the translation.

Translate Contact Form 7 Messages and Validations

Do the same for success messages and you’ll have your contact form fully translated.

Wrapping it all up

Creating multilingual contact forms using Contact Form 7 with TranslatePress is really straight-forward due to the intuitive front-end translation approach.

Using tools like automatic user language detection available in TranslatePress, you can display automatically the translated version of the contact form to visitors in their own language.

If you want to see TranslatePress in action, make sure to play with our demo.

Keep in touch!

We'll only notify you of new articles, special promotions and updates. No spam!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.