Create Multilingual Contact Forms using Contact Form 7 and WPML
Contact Form 7 is a popular plugin that allows you to create forms easily and with WPML you can then translate them. In this short tutorial, you will learn how to create multilingual contact forms using Contact form 7 and WPML.
Please note that the WPML 4.5 release introduced the following changes:
Translation Management module is integrated into the WPML Core plugin so you don't need to install it separately.
Advanced Translation Editor is enabled by default.
🔹Introduction and setup
Contact Form 7 is a popular plugin that allows you to create front-end forms and establish direct communication with your clients.
In this tutorial we will go over the process of translating a contact form built with Contact Form 7 using WPML.
Here's an example of a multilingual website for an interior design agency. It has English as the default language and Spanish as the secondary language. Let’s check out the English contact page. As you can see there is a section that includes some text and an image and in this section, there is a simple contact form on the left and the contact info on the right.
Now let’s go to the WordPress admin. Of course, you need to have the Contact Form 7 plugin activated along with WPML core plugins. You also need to install and activate the “Contact Form 7 multilingual” plugin. You can do that clicking the Add new button. Go to the “Commercial” tab. Choose the Contact Form 7 Multilingual plugin from the list. Tick the “Activate after download” option then hit the Download button. Contact From 7 multilingual plugin is now installed and activated.
To facilitate the translation process we are using WPML’s Advanced Translation Editor which allows you to translate the content of your site automatically using machine translation. To activate it, navigate to WPML ►Settings. Under the How to translate posts and pages section, choose to use the Advanced Translation Editor for new content.
Translating the contact page is a simple 2 step process. First, you want to translate the contact form and then translate the contact page itself.
🔹Translating the contact form
This is the default language contact from. Feel free to customize the form template, the form messages that are displayed to the user on the front-end, and the notification email template. Once done, don’t forget to Save.
To translate this form navigate to WPML ► Translation Management. From the Element Type drop-down, choose “Contact Form”. Here is the contact form that we created. Select the form and choose the language or languages you want to translate your form into. In our example, I will be translating the form to Spanish. Now click the “Add selected content to translated basket”.
Go to the “Translation Basket” tab and assign the translation job to a translator. I will assign this translation job to myself then click on “Send all items for translation”.
To take this translation job, go the “Translations” page and click the “Translate” button. This takes you to the Advanced Translation Editor. Click the “Translate automatically” button to add the machine translation. Review the translation and make sure that it is accurate. You can notice the translated form fields shortcodes match the ones in the default language. Please make sure that you don’t translate the fields’ shortcode as this will break the secondary language form.
You can also see that the messages that are displayed to the user on the front-end and notification email text are translated.
Now, click the Finish button then Complete to publish the translation.
🔹Translating the contact page
Now that we created our form and translated it, it’s time to translate our contact page that we have already inserted the form shortcode into. Go to your pages screen and click the plus icon under the language you want to translate your contact page into. Again, this takes you to the Advanced Translation Editor. Click the “Translate automatically” button. Review the translation and make sure that it is accurate. Now click the Finish button then Complete to publish the translated contact page.
Let’s see how the translated contact page looks on the front-end. As you can see our contact page is translated including the contact form.
📝See the full documentation page on our website:
https://goo.gl/yRmwt1
🔴Subscribe to our channel to see more videos to help you with your multilingual site. If you have any questions, feel free to leave them in the comments below.
🔗Connect with us:
WPML Channel: / wpml-multil. .
Facebook: / wpmlcms
Twitter: / wpml