AFormsフォームの見た目をカスタマイズ

AFormsのスタイル拡張で、御社の商品・サービスに合わせてフォームの見た目・表現方法をカスタマイズ。

スタイル拡張を使うと、フォームの見た目や表示内容をカスタマイズできます。
「フォームをサイトに馴染ませられるってこと?」
フォームをサイト馴染ませられるのは確かにその通りです。ですが、その一言で片づけてしまっては解像度が低すぎます。

どういうことかと言いますと、そもそもサイトのコンテンツは商品・サービスの性質を反映した形になっているのが普通です。
ところが、AFormsはすべてのユーザーに同じ機能を提供するパッケージソフトですので、AFormsで作ったフォームはどれも同じ表現方法になってしまいます。ユーザーごとに異なるはずの商品・サービスの性質を反映しきれない、ということです。
スタイル拡張では、その問題の解決に取り組みました。つまり、商品・サービスの性質を反映したフォームにカスタマイズできるということです。

スタイル拡張でできること

スタイル拡張を使うとこんなふうにフォームに商品・サービスの性質を反映できます。

例1:販売価格をメーカー希望小売価格と並べて表示して、安さを強調したい

「通常単価」カラムの追加。また小計の行に通常単価ベースと販売価格ベースの金額を表示。

例2:選択肢が多いので複数行で小さく表示したい

選択肢の画像幅を小さくし、選択肢を複数行で並べるように設定変更。

例3:税率は一律で10%だから見積表に税率は不要

見積表から税区分のカラムを削除。また、表がコンパクトになったのでタブレットでも表形式で表示されるように設定。

例4:見積をサイドバー表示して状況を分かりやすくしたい

サイドバーに見積を表示するように設定。見積表の表示内容も設定できます。

例5:客層を鑑みて、説明多めで標準的な見た目にしたい

入力項目を表形式でレイアウト。部品を標準的な見た目にし、任意マークも表示するよう設定。

こういったカスタマイズを、リアルタイムプレビューを見ながら設定していけるのがスタイル拡張です。
もちろん、色味の変更、余白の大きさの変更、ブレークポイント幅の変更、といった当たり前だけど重要なこともできます。設定項目は71個に及びます。

スクリーンショット

スタイル拡張はWordPressプラグインです。
有効化すると「フォーム」メニューの中に「スタイル拡張」という項目が現れます。
画像はスタイルの一覧画面です。

スタイルの詳細画面。
設定項目は「共通」「フロー」「ウィザード(地)」「ウィザード」「見積」「サイドバー」「属性」の7つのグループに分かれています。設定内容を変えるとプレビューに反映されます。
設定項目は全部で71個あります。

右下のボタンでプレビューの画面サイズをスマホ、タブレット、デスクトップに切り替えられます。

こちらはAForms本体の方のフォームビルダーです。
スタイル拡張が有効化されると「拡張」タブが追加されます。
ここで、このフォームでどのスタイルを使うかを設定できます。

ご注文フォーム

お支払い方法は銀行振込(前払い)になります。 ご注文確認メールに記載の口座にお振込みをお願いします。
ご入金が確認できましたら、オンラインにてソフトウェアを引き渡し致します。

サポートメールサポート半年間
ライセンス1サイトライセンス
動作条件動作にはAForms v2.1.9以上が必要です。