フォーム入力の全角強制ストレスをゼロに！espar formがユーザ入力を自動変換するコンバーター機能を搭載【写真詳細】

静的サイト向けフォーム実装ツール「espar form」で、「コンバーター」機能を含む3つの新機能を搭載したv1.11.0の提供が開始されました。最大の特徴は、ユーザーが入力したテキストを、運営側が求める形式にノーコードで自動変換できる「コンバーター」機能です。全角の強制など、従来のフォーム実装ではユーザビリティ低下を招きがちだった制約を取り除くことができ、ユーザと運営側の両方にメリットのある実装が可能になります。そのほか、フォームによくある利用規約等の同意チェックを求める挙動をノーコードで実装できる「同意チェッカー」機能も搭載しています。

静的サイト向けの問い合わせフォーム実装ツール「espar form」を提供する株式会社フィードテイラー（本社：大阪市、代表取締役：大石裕一）は、フォームで入力されたテキストを自動変換する「コンバーター」機能を中心に、Webサイト制作者のフォーム実装工数を削減する3つの新機能が搭載されたv1.11.0を本日より提供開始いたします。

1. コンバーター機能

提供の背景
従来のフォーム実装では、サイト運営側のデータ管理都合が優先されてフォームのユーザビリティを低下させることがありました。例えば、住所入力欄で全角を強要したり、電話番号でハイフンを許容しないなどです。これらの入力制限はサイト運営側の都合に過ぎず、ユーザ視点ではフォーム入力を阻害する要因でしかない場合があります。

当社が日々行うフォームのUX/UI研究において、こうした事例ではフォームの入力条件は厳密にせずメールが送信される際にサイト運営側に都合の良い形式に自動変換されるべきであるという結論に至り、この度の「コンバーター」機能の開発に至りました。「espar form」の他の機能と同様、問い合わせフォームのHTML中にCSSクラスを追加するだけで「コンバーター」機能が発動し、入力内容の自動変換が行われるようになります。

標準コンバーター
標準で以下6種類のコンバーターを提供します。

・全角化 (fullwidth)
・半角化 (halfwidth)
・空白除去 (removespaces)
・ハイフン除去 (nohyphen)
・英文字の大文字化 (uppercase)
・英文字の小文字化 (lowercase)

それぞれに対応したCSSクラスをHTML中に追記するだけで、Webサイト制作者はプログラムコードを1行も書くことなく自動変換処理を搭載することができます。

例えば、フォームの住所入力欄に全角化を意味するCSSクラスを指定すると、ユーザーが「大阪市北区天満1-2-3」と半角で入力しても、「大阪市北区天満１−２−３」と全角に自動変換されます。


[資料: https://files.value-press.com/czMjYXJ0aWNsZSM5NzkwIzM1OTgwOSM5NzkwX3RHb2RsU3FyV3QuanBn.jpg ]
[資料: https://files.value-press.com/czMjYXJ0aWNsZSM5NzkwIzM1OTgwOSM5NzkwX0dVT29nc2NTa2YuanBn.jpg ]
[資料: https://files.value-press.com/czMjYXJ0aWNsZSM5NzkwIzM1OTgwOSM5NzkwX0R6Q1JTaVVsZFMuanBn.jpg ]

この結果、ユーザに「全角入力のみ」という煩わしい制約を課すことなく、サイト運営側に都合の良い全角住所テキストを取得できるようになります。

なお、標準コンバーターにはない自動変換処理を行いたい場合、必要最低限の実装（最小でJavaScript1行）で独自コンバーターを追加して使用することもできます。

2. 同意チェッカー機能

利用規約や個人情報保護方針に同意するチェックなど、チェックボックスをONにしなければ確認画面に遷移できない挙動を、CSSクラス指定のみでノーコードで実装できるようになりました。


[資料: https://files.value-press.com/czMjYXJ0aWNsZSM5NzkwIzM1OTgwOSM5NzkwX29aaUlWQ1ZXVXEuanBn.jpg ]
[資料: https://files.value-press.com/czMjYXJ0aWNsZSM5NzkwIzM1OTgwOSM5NzkwX05Sa1BWRVRMY0kuanBn.jpg ]
[資料: https://files.value-press.com/czMjYXJ0aWNsZSM5NzkwIzM1OTgwOSM5NzkwX2RzRG1WTXNwY1IuanBn.jpg ]

このように、チェックボックスのHTMLに特別なCSSクラスを指定するだけで、「チェックがONになるまで確認ボタンが無効表示となる」仕組みで、Web制作者の実装工数削減に寄与します。複数のチェックボックスにも対応しています。

3. 新バリデーション「requiredChecked」の追加

複数のチェックボックスから「最低N個の選択を必須」とする入力条件(バリデーション)が、ノーコードで実装できるようになりました。例えば、5個のチェックボックスから3個以上選択必須の入力要素をプログラムコードを一行も書くことなく実装できます。


[資料: https://files.value-press.com/czMjYXJ0aWNsZSM5NzkwIzM1OTgwOSM5NzkwX2pDeENkR2trcmYuanBn.jpg ]

 

espar form v1.11.0の提供条件・利用方法

・料金：追加費用なし
・利用開始日：2025年7月29日


espar formについて

espar formは、JavaScriptを貼り付けてCSSクラスを指定するだけで、静的ページに問い合わせフォーム機能を実装できるツールです。詳しくはespar formの公式ページ（https://form.espar.biz/）をご覧ください。

株式会社フィードテイラーについて

株式会社フィードテイラーは、CMSサイトを静的化して高速化・攻撃無効化を一挙両得できる「espar vault」(https://vault.espar.biz/)、静的サイト向けのPHPレスなフォーム実装JavaScriptツール「espar form」(https://form.espar.biz/)など、静的化技術に特化したサービスでWeb制作現場の課題を解決するテクノロジーベンダーです。


 

プレスリリース情報提供元：ValuePress!