EFO（入力フォーム最適化）のセオリーを詰め込みまくったメールフォームを共同開発した

EFO（入力フォーム最適化）のセオリーを詰め込みまくった
汎用コーポレート用メールフォーム
野村圭 Kei Nomura
@mypacecreator
Frontend Nagoya #3 LT
2018. 01. 27 Sat
ozn-formを共同開発したのだが
オゾン・フォーム

野村だよ！
Kさんでもいいよ！

ところでみなさん、
フォーム難民じゃないですか？

2016年12月のある日
野村さん！EFOやりたいから
めっちゃ使いやすいフォーム作って！
お金は出すよ！某クライアント様
チャンス到来!!!

信頼するプログラマに相談
PHP
JavaScript
HTML
CSS
お金の工面
「私の案件で使いたい」フォームを共同開発

作りました！
詳細経緯はブログに書いてあります。
https://mypacecreator.net/blog/archives/3232

リアルタイムバリデーション
特にメールアドレスでは、エラー内容を細かく指摘

ドメインサジェスト
入力ミスを防ぎ、手間も軽減

フリガナ自動補完
キー入力を感知し、対応するフリガナ欄に
カナを自動入力させることが可能

全角英数字・半角カナ等の自動変換
ユーザーが全角英数字や半角カナで入力を
しても検証エラーを出さず、入力終了時に
半角英数字・全角カナに自動変換

• Datepicker UI
• 郵便番号から住所補完
• ファイル添付機能
• 離脱防止アラート
• 送信ボタンの二重クリッ
ク防止
• エンターキーでの誤送信
防止
• 条件付き必須判定
• SMTP送信可能
• 複数フォーム設置対応
• 1つ前のページから情報
の引渡しが可能
• 履歴のCSVダウンロード
• 空項目は、確認画面や
メール文面で非表示に

詳しくは公式ページを見て！
https://www.ozonenotes.jp/ozn-form/

ご依頼主様からは
使いやすくなった！
CV率もちょっと良くなった！
他のサイトにも自分で設置できた！某クライアント様
おかげさまで好評でした

自分の他の案件でも
使い回しが楽に！

…というだけじゃなかった

他のクライアントからの
フィードバック

必須アイコンの圧、強くない？
真っ赤はやだなー
てか※マークでよくない？別のクライアント様

実は、「必須」の印象の強さを気にされる
クライアント様、わりと頻繁に出会います
この案件では色を薄くしました

一部の携帯メールの人がエラーになる
みたいで、何度も何度も入力
してくるお客さんがいるんだよね別のクライアント様
未だ根強い
キャリアメールRFC違反の闇

キャリアメールRFC違反問題とは
masato.…love…123456@doco(略)
123456.masato.love.@ezw(略)
（例）
• ドットなどの記号が2個以上連続している
• 先頭や@の直前にドットなどの記号がある
※さすがに今は新規での登録はできなくなったけど、今でもこの形式のアドレスは相当数存在

ライブラリの改変はしたくないので
送信不可の時とそれ以外のエラーで画面
を分岐して、お客様の不安を軽減
PHPMailerではRFC違反のアドレスに
メール送信しないようになっていた

メールアドレスのドメイン選ぶやつ、
なんか＠マークがだぶるんだけど
別のクライアント様
？？？

好評のはずのドメインサジェストで謎挙動

• 日本語キーボードの英字入力モードを使うと、
変換未確定部分が補完部分の後ろにくっつく
• iOS11の標準キーボード限定
• iOS10, 標準キーボード以外（Gboard等),
Android では発生せず

対策いまだ不明。
suggest.js ってライブラリ自体が持っている問題、
というところまではわかった

だれかわかる人！教えて!!!

なにはともあれ、
とっても学びがあった

モニター・開発コミッター
募集中！
現状は有償・クローズド開発ですが
Frontend Nagoyaで聞いたよ、とご連絡ください

（再）公式ページはこちら
https://www.ozonenotes.jp/ozn-form/

ご清聴ありがとうございました。

EFO（入力フォーム最適化）のセオリーを詰め込みまくったメールフォームを共同開発した

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)