多言語化サイトのNetlify Formsで言語別の送信完了ページにリダイレクト

多言語化サイトのNetlify Formsで言語別の送信完了ページにリダイレクトする方法です。
言語毎にaction属性を切り替えるだけではうまくいかなかったので、その解決策です。

やりたいこと

  • 日本語版 お問い合わせページ /contact/ → 送信完了 /thanks/ にリダイレクト
  • 英語版 お問い合わせページ /en/contact/ → 送信完了 /en/thanks/ にリダイレクト

結果

Netlify Formsでは、フォームを設置して最初にNetlifyにアップロードした時のaction属性になるようです。

設置後に、acition属性を変更したり、動的に変えても、最初のaction属性の内容で完了ページに飛びます。

解決策

  • 方法1 言語別にフォームを用意(name属性を言語別に変える)して、action属性もそれぞれの言語ページに設定する
  • 方法2 フォームを1つ 送信完了ページは1つにして、表示側で、言語判別して表示を切り替える

方法1

方法1では、name属性を言語別に変えるなどして、言語別にフォームを用意して、action属性もそれぞれの言語ページに設定する方法です。

Hugoの場合

フォームが記載されているテンプレート
{{/*<!-- 言語別にname属性とaction属性を切り替える -->*/}}
{{ $success := "/en/thanks/" }}
{{ $formName := "en" }}
{{ if eq .Site.Language.Lang "ja" }}
	{{ $success = "/thanks/" }}
	{{ $formName = "ja" }}
{{ end }}

{{/*<!-- フォーム部分 -->*/}}
<form name="{{ $formName }}" method="POST" data-netlify="true" action="{{ $success }}">
	{{/*<!-- Form Content -->*/}}
	<label>Your Name: <input type="text" name="name" /></label> 
	<button type="submit">Send</button>
</form>

方法1の場合は、言語別にフォームが出来上がります

方法1の場合は、言語別にフォームが出来上がります

方法2

準備中

試した環境

  • Netlify
  • Netlify Forms
  • Hugo ※ hugoサイトでなくても参考にできるかもしれません

メモ

  • action属性 “/“から始まる必要があるみたいです

他に考えられる解決策:

  • 方法2で一旦1つの送信完了ページに飛ばしておいて、どのページからきたか?によって、各言語の完了ページに飛ばしてもいいかも?
  • Netlify Functions機能使えば、もっとスマートに実装できる??

追加で検証したいところ:

  • 言語別に一部フォームの項目が違う(Hugo側で出力切り替えしてる)場合は、一つのフォームではどうなんだろう??