【多言語化】Contact Form 7とPolylangで日英のお問い合わせフォームを作ってみた

2021-12-152023-09-04

いぬ

Polylangで英語版のWordPressサイトを作ってみたけど、

お問い合わせフォームも「日本語版」と「英語版」の２つを作りたい！

こんな人向けの記事です。

この記事では、Contact Form 7 とPolylangというプラグインを使用して、WordPressサイトに「日本語版お問い合わせページ」と「英語版お問い合わせページ」を設置する方法を解説しています。

WordPressサイトの多言語化についての詳しい解説は、こちらの記事をご覧ください。

あわせて読みたい

【まとめ】WordPressサイトを無料で多言語化する方法「WordPewssのホームページを、日本語版と英語版で切り替えられるようにしたい」という人向けの記事です。多言語化プラグインについての説明と、無料でカスタマイズできる方法についてまとめています。自分のサイトをグローバル化に対応させたい人は、要チェックです。

目次 Contents（Click!）

お問い合わせフォームの設置手順

先に、お問い合わせフォームの設置手順について説明しておきます。

まず準備として、

Polyklangの初期設定の完了
日本語版グローバルメニューと英語版グローバルメニューの設置の完了

まで済ませておきます。

まだPolylangの初期設定とグローバルメニューの設置が終わっていない人は、先に作っておきましょう。

あわせて読みたい

【まとめ】WordPress多言語化プラグインPolylangの使い方 WordPressサイトを英語版と日本語版で切り替えたいときに使えるのがPolylang。多言語化プラグインのPolylangのインストールから設定方法まで網羅して解説しています。「自分のWordPressサイトを、無料で多言語化したい」と考えている人向けの記事です。

次に、以下の手順で、日英それぞれのお問い合わせフォームを設置していきます。

日本語版お問い合わせフォームを作成
日本語版お問い合わせフォームをグローバルメニューに設置
英語版お問い合わせフォームを作成
英語版お問い合わせフォームをグローバルメニューに設置

今回の記事では、この黄色い部分の手順を解説していきます。

①日本語版「お問い合わせフォーム」の作成

まずは日本版のお問い合わせフォームを設置していきます。

Contact Form 7のインストール
Contact Form 7でお問い合わせフォームを作成
作成したフォームを固定ページに設置
グローバルメニューにお問い合わせページへのリンクを追加する

という手順で行います。

すでにContact Form7で日本語版の「お問い合わせ」ページを作成している人は、この手順は省略して大丈夫です。

まだ「お問い合わせ」を作ったことがない人は、以下のページを参考にして作成してみましょう。

投稿が見つかりません。

英語版「お問い合わせフォーム」の作成

ここからは英語版のお問い合わせフォームの作り方について説明していきます。

「お問い合わせ」から英語版のフォームを作成する

日本語版を作成したときと同様に、WordPress管理画面の「お問い合わせ」→「新規追加」をクリックします。

今回はタイトルを「Contact」としておきましょう。

ラベルの基本設定は日本語版と同様で大丈夫ですが、ラベルの表示名を日本語から英語に翻訳しておきましょう。

以下に翻訳例を載せておきます。

氏名→Name
メールアドレス→e-mail
題名→Subject
メッセージ本文（任意）→Message(Optional)

自動送信メールの英訳

自動送信メールの「本文」も、英訳しておきましょう。

「メール」タブを開き、下の「メール（２）を使用」にチェックを入れます。

以下の設定で、お問い合わせ先に送った自動送信メールが、WordPressに登録してある自分のメールアドレスにも届くようになります。

送信先
[your_email]
追加ヘッダー
Reply-To: [_site_admin_email]

「メッセージ本文」の欄も英訳しておきます。

以下に例を載せていますが、タグやメッセージ内容は自分のサイトに合わせて編集してください。

Your name: [your-name] <[your-email]>
Subject: [your-subject]

Message:
[your-message]
—
This email was sent from Contact at [_site_title]([_site_url]) .

Thank you for your inquiry.

It may take a few days for a reply.

Please note that we may not be able to reply to your inquiry due to the server or administrator’s situation.
Thank you for your understanding.

送信メッセージの英訳

送信ボタンを押した後の表示メッセージも英訳しておきます。

以下に例を載せておくので、参考にしてください。

Girl

コピペOKです！

メッセージが正常に送信された
Thank you for sending your message. The message has been sent.
メッセージの送信に失敗した
Failed to send message. Please try again later.
入力内容に不備が見つかった
There is a problem with your input. Please check and try again.
送信がスパムと見なされた
Failed to send message. Please try again later.
承諾が必要な項目が承諾されていない
Confirmation of acceptance is required before sending a message.
入力必須の項目が入力されていない
Please fill in the required fields.
ユーザー入力が最大許容文字数を超える項目がある
The text you entered is too long.
ユーザー入力が最小許容文字数に満たない項目がある
The text you entered is too short.
ファイルのアップロードが何らかの理由により失敗している
An unknown error occurred while uploading the file.
アップロードされたファイルが許可されたファイル形式に適合しない
Files in this format cannot be uploaded.
アップロードされたファイルが大きすぎる
The file is too large.
ファイルのアップロードが PHP のエラーにより失敗している
An error occurred while uploading the file.
入力された日付の形式が正しくない
The date format is incorrect.
日付が最小制約日より小さい
The selected date is too early.
日付が最大制約日より大きい
The selected date is too late.
入力された数値の形式が正しくない
There is a mistake in the format of the value.
数値が最小制約値より小さい
The value you entered is too small.
数値が最大制約値より大きい
The value exceeds the maximum allowable value.
クイズに対する正しい答えが入力されなかった
The answer to the quiz is incorrect.
入力されたメールアドレスの形式が正しくない
The email address you entered is incorrect.
入力された URL の形式が正しくない
There is a mistake in the URL.
入力された電話番号の形式が正しくない
There is a mistake in the phone number.

入力が済んだら、一番下の「保存」ボタンを押しましょう。

④英語版グローバルメニューに「問い合わせフォーム」を追加

次は固定ページに作成したフォームのショートコードを貼りつける作業になります。

手順はほとんど同じですが、最初の部分のみ日本語版の作り方と異なるので、注意してください。

日本語版「お問い合わせフォーム」から英訳記事をつくる

日米お問い合わせフォーム — 英語記事を作成すると「+」マークから「鉛筆」マークになります

WordPress管理画面の「固定ページ」→「固定ページ一覧」をクリックします。

すでに日本語版の「お問い合わせフォーム」を作成しているので、このページを元に英語版のページを作成していきます。

「お問い合わせ」の横にある、「＋」マークをクリックしてください。
（日本国旗の右横にあります）

いぬ

固定ページに国旗マークなんてないよ？

うさぎ

固定ページ上部の「表示オプション」をクリックしてみて！

「日本語」と「English」にチェックを入れれば出てくるよ！

固定ページの作成画面に移るので、日本語版と同様に編集していきます。

タイトルに「Contact」、本文にContact Form 7のブロックを選択します。

今回は「Contact」を選択します。

入力が終わったら、「公開」ボタンを押します。

グローバルメニューに「英語版お問い合わせフォーム」を追加する

WordPress管理画面の「外観」→「メニュー」をクリックします。

「編集するメニューを選択」から、Polylangで「クローバルナビ　English」の位置に設定しているメニューを選択します。

メニュー設定画面 — フッターと共通メニューにしたいときは「フッター　English」にもチェックを入れる

左側の「メニュー項目を追加」から、「固定ページ」→「Contact」にチェックを入れて「メニューに追加」ボタンを押します。

メニューを表示する位置を整えたら、右下の「メニューを保存」ボタンを押して公開します。

これで英語版のお問い合わせフォームも完成しました！

うさぎ

最後に、それぞれのフォームのテストをしてみてください！

コラム：お問い合わせフォーム「だけ」多言語化させたいとき

お問い合わせフォームのみを「日本語版」と「英語版」の２種類を設置したいときは、

①Contact Form 7で「お問い合わせ」と「Contact」を作成する
②グローバルメニューに「お問い合わせ」と「Contact」の両方を設置する

という方法があります。
この場合、英語版のグローバルメニューを作る必要はありません。

いぬ

Polylangも必要ないのでは？

Googleの中の人ではないので断言はできませんが、SEOの観点から、多言語化プラグインを使わずに２つのお問い合わせフォームを作るのは良くないと考えています。

サイト内に同じ内容のページがあると、サイト全体がマイナス評価をされる恐れがあります。

私個人は、Polylang（もしくはBogo）を使って「お問い合わせフォームを多言語化させてますよー！！」と検索エンジンにアピールしておいた方が良いと考えています。

お問い合わせフォームだけを多言語化させたいのであれば、操作が比較的シンプルなBogoの方がおすすめです。

あわせて読みたい

初心者がWordPressで多言語サイトを作るには？プラグインの選び方を解説はじめてWordPressを多言語化する人、自分でWordPressサイトを多言語化させたい人向けの記事です。PolylangとBogoの比較と、それぞれのプラグインがどんな人向きなのかを解説していきます。

まとめ：Contact Form 7とPolylangを使えば、簡単に設置できる！

1つ1つの手順を丁寧に解説したので、少々長くなりましたが、通常の投稿ページの多言語化と似ている部分が多いです。

今回の手順を簡単にまとめると、

Contact Form 7で、日本語と英語のお問い合わせフォームを作る
それぞれの固定ページをPolylangで切り替え表示させる

ということになります。

今回は「日本語版」と「英語版」の２種類のお問い合わせフォームを例にしましたが、Polylangを使えば「中国語版」「フランス語版」など、他の言語のページを作ることもできます。

ブログ運営のお役立ち記事一覧

あわせて読みたい

【SWELL・Polylang】モバイルメニューの言語スイッチャー表示不具合を修正する方法 WordPressテーマ「SWELL」を使ってモバイルフッターメニューを作ったものの、Polylangで設定した言語スイッチャーの表示がおかしくなってしまいました。この記事では、モバイルフッターメニュー内の言語スイッチャーの表示のズレを解消する方法を解説していきます。