和田憲幸のブログ

自動翻訳機能付きコンタクトフォーム

メールフォーム機能は絶対付けようと思っていたのだけれど、実装方法をどうしようか悩みました。contact.htmlってファイル名にしたら勝手にフォームもくっつく！みたいな形にしようとか、ページにチェックつけたらフォームを出すとか、モバイルログみたいにページタイプでメールフォームタイプにさせるとか、いろいろ考えた。

しかし、翻訳の事などをアレコレ考えたらAjaxになった。AjaxはAnalyticsのコンバージョンが取れないので避けようと思っていたのだけど、忘れててAjaxにしてしまった。でもIPログも取るのでどこからどうやってたどり着いて送信に至ったかはわかるのでよしとしよう。

いまは出っぱなし状態だけど、どこかにメールアイコンを付けてズルッと出す感じにする。送信に至ったページが日本語以外の場合はメッセージ欄を日本語に翻訳した文章を併せて送信する機能も付いている。べつに翻訳サイトで翻訳してもらっても良いとは思うんだけどね。

フォームをオーバーレイさせる時に困ったのがiOS（iPad、iPhone）のYoutube。iOSでYoutube埋め込みは特別扱いされてz-indexに関係なく最前面に表示される。youtubeの上にオーバーレイできないってこと。wmodeも当然きかない。なので、iOSとAndroidの場合はYoutubeからサムネイル画像を引っ張ってきて普通のリンク画像とした。iPadでのユーザビリティは少し落ちるが、フォームが見えなければ意味が無い。

あとaudioタグ対応ブラウザの場合は送信後に音がなります。Ajaxで画面遷移しないから「送信したった！」感が無かったので。あとはもちろんスマートフォンにも完全対応やで！！

これでとりあえず実装したい機能はほぼ実装できた！あとは売るだけだっ！！
それが一番メンドクセー！！