AFormsフォームの見た目をカスタマイズ | WordPressの自動見積フォーム作成プラグイン AForms

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

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

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

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

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

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

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

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

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

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

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

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

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

スクリーンショット

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

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

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

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

ご注文フォーム

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

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