ver.2サポートサイト

複数言語に対応したフォームを設定したい

複数言語に対応したフォームの作成方法と言語切替分岐ページの作成方法について説明します。

複数言語対応に対応したフォーム作成のパターン

多言語に対応したフォームを準備する場合、主に以下のパターンがあり得ます。

括弧内の表記は日本語/英語/韓国語に対応したフォームを用意する場合に必要な設定数です。

１．フォーム項目は共通で、表示が言語違いのみの場合

共通DBと言語分フォームを用意する。(1DB×3フォーム)

　　メリット　：DB設定と登録データが一つな為、設定変更やデータ集計がシンプルです。

　　デメリット：オーソドックスな方法の為、デメリットは特にありません。

２．言語ごとにフォーム項目が異なる場合

(2-1)全ての言語フォームを網羅する共通DBを1つ作成し、フォーム毎に使用する項目を指定する。(1DB×3フォーム)

　　　メリット　：登録データを1DBに集約できます。

　　　デメリット：フォーム設定時に、言語で必要な項目の指定が必要です。

　　　　　　　　　言語毎に項目が異なる為、歯抜けデータが発生しやすくなります。

(2-2)全ての言語分DBとフォームを作成する。([1DB×1フォーム]×3セット)

　　　メリット　：設定が全て別の為、言語間の設定調整など不要です。

　　　デメリット：設定が全て別の為、回答結果の集計などでマージが必要です。

共通DBで、言語別フォームを作成する際の注意点(1,2-1の場合)

共通のDBを使い、言語別にフォームを作成する場合は、フォームのフィールド設定が必要になります。

フィールド設定をしない場合、エラーメッセージ等がSPIRAL ver.2デフォルトの日本語が表示されます。

ラベル、エラーメッセージ、ヘルプテキストの変更

フォームブロック設定のフィールドを開き、各フィールドの設定を変更します。

ラベル、エラーメッセージ、ヘルプテキストをそれぞれ適宜変更します。

セレクト型のフォーム表示項目の変更

セレクト項目の「フォーム表示」をそれぞれ入力します。

コンテンツに戻り、ソースコード挿入ボタン</>から

変更したフィールドをフォームに反映できます。

ボタンのラベル

ボタンのテキストは直接ソースコードを変更します。ボタン部分のコードは最下部にあります。

※デフォルトのソースコード

<div class="sp-form-item sp-form-interaction">
　　<button class="sp-form-prev-button" type="submit" name="action" value="previous" th:if="!${step.isFirst}" th:text="${step.prevButtonLabel}">戻る</button>
　　<button class="sp-form-next-button" type="submit" name="action" value="next" th:text="${step.nextButtonLabel}">次へ</button>
</div>

赤字の部分をそれぞれ変更します。

<div class="sp-form-item sp-form-interaction">
　　<button class="sp-form-prev-button" type="submit" name="action" value="previous" th:if="!${step.isFirst}" th:text="이전">戻る</button>
　　<button class="sp-form-next-button" type="submit" name="action" value="next" th:text="다음에">次へ</button>
</div>

　　※確認画面も同様に変更してください。

各フィールドとボタンの変更例

言語切替分岐ページ

サイト上に多言語対応フォームを設置する場合、前段のランディングページもしくはフォーム上に言語切替のリンクを設置しておくとよいでしょう。

言語切替分岐ページイメージ

フォーム上切替イメージ

リンクは下記HTMLタグを使用します。

<a href="URLを記載">日本語はこちら</a>

※ページの作成方法については、「ページ機能」をご覧ください。

関連情報

・ページ機能

・フォームを多言語対応する際に「必須エラー」や「重複エラー」の日本語を別の言語で表示したい。