今日は、fmail.cgiのテキストやボタンを差し替える方法をご紹介します。
「お問い合わせフォームのテキストを編集したいけど、どのファイルを編集したら良いか分からない」
「フォームに使われているボタンやラベルを差し替えたいけど、どうしたら良いか分からない」
そのような方に向けた記事です。
こんにちは。Webコーダーのはるです。
今日は、fmail.cgiを使用したお問い合わせフォームの編集方法を備忘録としてまとめます。
fmail.cgiのテキストやボタンを差し替える方法【英語化など】
今回はWebサイトのお問い合わせフォームを編集した例です。(対象ファイルまでのパスが間違っていましたら申し訳ございません)
フォーム内のテキストを編集したい
elements.datファイルを編集します。
フォーム内のエラーメッセージを編集したい
index.cgiファイルを編集します。
フォームが埋め込まれているHTMLページを編集したい
fmali.tplファイルを編集します。
フォーム内のボタンを差し替えたい
お問い合わせフォーム内のボタンやラベルのテキストを変えたい場合は、画像ごと差し替える必要があります。fmailではボタンは画像が使用されています。
画像ファイルは以下にあります。
今回は「確認画面へ進む」のボタンを「Confirm」に変更したかったので、 Confirm画像を別途用意して既存のsubmit_btn.jpgと差し替えました。同じ画像ファイル名にして、差し替えれば表示されます。
お問い合わせフォーム以外の編集だと、もしかしたらパスが違うかもしれません。この場合は、対象Webサイトをディベロッパーツールで開き、ボタンの画像パスを調べればわかります。
ファイル送信機能のテキストを英語に編集したい場合
ファイルをアップロード→送信する項目を英語に編集したい場合ですが、「ファイルを選択」「選択できておりません」はinput type=”file”のブラウザの言語設定によるので変更ができません。
JSでUIをカスタマイズできなくはないそうですが、かなり難しいようです。。
ただし、キャンセルボタンは<input>のbuttonで作成されているため編集できます。value=” キャンセル”でディレクトリ内検索をすると、いくつかヒットするので対象を探します。index.cgiのものを編集したはずです..(曖昧です..)
あとがき
編集したいテキストがどのファイルに書かれているか調べるには、VSCodeエディタだと「Command + Shift + F」で出てくる小窓で検索すると良いです。
こちらのコマンドで、今開いているディレクトリ内の検索が可能です。
ファイルを特定した後に、対象のテキストを検索したいときはCommand + Fで検索できます。
今日は短いですが以上です。
もりけん塾に所属しています。
Thanks：師匠「もりけんさん」(@terrace_tec)
もりけんさんのHPはこちら
