Written by Kasumi

埋め込み型のフォームメーラーで文字化けしてしまう場合の対処方法

こんにちは。カスミです。

さて以下のようなお悩みをお持ちですか?

html埋め込みタイプの外部のフォームメーラーを使っていて、入力フォームから確認画面へ遷移した後、入力したテキスト項目の内容が文字化けしてしまう。。

確認画面が別ページに送信する場合に起こりうるエラーですね。

本記事で紹介する対処方法を実践すると文字化けが治るかもしれません。

対処方法は以下の通りです。

文字コードを確認

埋め込み先の文字コードとフォームメーラーで使われている文字コードを確認してみましょう。

上記画像は埋め込み先がhtmlの場合の文字コード設定箇所です。

head内のmetaタグのcharset内の値が文字コードになります。

ここで使われている文字コードとフォームメーラーの文字コード設定に相違があったら、それが原因で文字化けしている可能性があります。

どちらかの文字コードに合わせてみて、送信テストしてみましょう。

文字化けが改善されるかもです。

文字コードを変更できない場合の対処方法は次の章を参照。

formタグ内に文字コードを入れる

<form action="" method="post" accept-charset="shift_jis">

formタグ内にaccept-charset=””を追加し、その値に、フォームメーラー送信先の文字コードを入れてみましょう。

こちらの設定は、埋め込み先の送信元が違う文字コードでもaccept-charsetにいれた文字コードに変換して送信してくれます。

但し、IEブラウザでは非対応となるので、IEを無視した場合に限ります。。

IEでも対応させたい場合は以下、参照

javascriptを使って文字をエンコーディング

<script>
function submit_charset_change(f) {
  var charset_code = document.charset;
  document.charset='shift_jis';
  document.getElementById('form-01').submit();
  document.charset = charset_code;
}
</script>
<form id="form-01" action="https://example.com" method="post" accept-charset="shift_jis">
<input type="submit" value="送信" onclick="submit_charset_change();">
</form>

上記JSコードを反映すれば、文字コードをエンコーディングして送信してくれるはずです。

内訳としては以下になります。

script内でdocument.charset(現状の文字コードを取得)を変数に格納。

formタグ内にあるsubmitボタンが押されたら、文字コードをshift_jisに変更する。

※上記コードではshift_jisですが、そこはフォームメーラーの文字コード設定に合わせて変更し入れてください。

確認画面から戻ったら文字コード変更により、逆に入力ページが文字化けしてしまうので、送信ボタンを押し、フォーム内容が送信されたら(POSTされたら)、文字コードを元に戻す。

以上の処理をしています。

あとは上記scriptで宣言した関数を送信ボタンinputタグ内のonclickに実行関数をいれたらOKです。

以上で解説をおわります。

まとめ

最近のフォームメーラーだと上記方法をせずとも、文字コードを変更するタグなどが用意されてる場合が多いので、先にそちらを調べて試す方が良いかと思います。

本記事で、紹介した方法で解決できれば幸いです。

以上で解説を終わります。

目次

関連記事

HTMLCSS プログラミング

【CSS】select(セレクト)要素の矢印を消して画像にする方法

2022.01.09
3151
HTMLCSS プログラミング

CSSのnth-childを使い、子要素の最初、最後、偶数奇数、何番目以降を指定する方法

更新日:2020.06.11
1210
プログラミング

【簡単】サイトからファビコンを取得・保存・ダウンロードする方法

更新日:2020.05.16
48833
PHP プログラミング

phpを使って、ヘッダーやフッターを共通パーツ化・インクルードさせる方法

更新日:2023.09.15
1526