Contact Form 7 is one of the most popular WordPress plugins, installed on more than one million websites. It will allow you to create, customize, and manage multiple forms for your WordPress site. In this tutorial, we will provide you with step-by-step instructions on how to use it in conjunction with WPML for multilingual sites.
Here is a short video that explains the multilingual workflow of translating contact forms built using Contact Form 7:
- Contact Form 7 plugin (version 4.6 or above)
- A recent version of WPML (version 3.6.2 or above), including the String Translation and Translation Management add-on plugins
- WPML’s Getting Started Guide helps you in setting up WPML in a few minutes. You will want to refer later to some of its subtopics, such as String Translation. We recommend that you keep this guide open while following this tutorial.
- Contact Form 7 documentation will provide you with all the information needed to create and manage your forms.
Follow the steps below to create your default language contact form:
- From your WordPress dashboard, navigate to the Contact -> Add New page.
- Fill in the form title—in our case, “English contact form”—and click Save.
- You will see the shortcode of your contact form that you can paste to any page, post, or widget to embed the form. Keep this code handy as we will use it when creating our default language contact page
- To translate the form, duplicate it and translate the textual contents in the duplicated form. You can translate every element of the form, including the title, mail, and other settings.
- Navigate to Contact -> Contact Forms page to see a list of all the created forms.
Hover over English Contact Form—the one that we just created—and click on the Duplicate link.
- Add your translated text to the title and the body of the contact form, then click Save.
Please note that you can translate the messages that are displayed in specific situations. For example, the error message that shows when the user does not fill a required field (“This field is required.”)
Navigate to the Messages tab of your translated form and add message translations, then click Save.
If you are using Really Simple CAPTCHA, you will want to translate the message that is displayed when the user enters an incorrect code (“Your entered code is incorrect”). In order to translate this message, follow the steps below:
A) Add this line to the wp-config.php file as shown in the image below:
define( 'WPCF7_USE_REALLY_SIMPLE_CAPTCHA', true );
B) To add the CAPTCHA in your form, add this line to the form as illustrated in the image below:
[captchac captcha-1] [captchar captcha-1]
C) Navigate to the Messages tab and add the translated text to the message and click Save.
- You will see the shortcode of your translated contact form, which can be pasted to the translated page(s), post(s), or widget(s) to embed the form. Keep this shortcode handy as it will be needed when translating the contact page.
First, create the default language contact page and add the English form shortcode to it, then translate the page and include the shortcode of the French form.
- Create the English contact page by navigating to Pages -> Add New. Fill in the title and paste the English form shortcode in the body, then click Publish.
- Click on the + icon found on the language meta box on the right to add the translation to the contact page.
- Click on the Copy content from English button and edit the content (title, body) with your translated text; replace the English form shortcode with the French form shortcode and click Publish.
This is what you see on the front end, depending on which language you select:
In order to use forms in widgets, add a Text Widget to any of the widget areas provided by your theme. Fill in the title and add the default language form shortcode to the widget content area and click Save.
Now that you have saved the widget, both the title and widget content (in this case, the form shortcode) are registered as translatable strings. To translate these strings:
- Navigate to WPML -> String Translation.
- Select widgets from the Select strings within domain drop-down menu.
- Find your contact form widget title and shortcode and click on the translations link to add the translated text. Note that you will paste the secondary language form shortcode (in our case, the French form shortcode) when you are translating the default form shortcode.
- Select the Translation is complete option and click Save.
We have many staff members who are ready to provide support six days a week through our WPML forum.