AI要約
フォームにアイコンオプションを追加しますか？ 複数選択、チェックボックス、複数項目、チェックボックス項目フィールドでアイコンを使用すると、フォームの視覚的な魅力とユーザーエクスペリエンスを簡単に向上させることができます。
このチュートリアルでは、WPForms の既存または新規フィールドにアイコンの選択肢を追加する方法を説明します。
開始する前に、まずWPFormsがWordPressサイトにインストールおよび有効化されており、ライセンスが検証済みであることを確認する必要があります。その後、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスできます。
フォームの設定
フォームビルダーを開くと、次のいずれかのフィールドタイプにアイコンの選択肢を追加できるようになります。
- 複数選択
- チェックボックス
- 複数商品
- チェックボックスアイテム
例として、電話、テキストメッセージ、またはメールでの連絡方法を選択できるシンプルな連絡フォームを作成します。
開始するには、複数選択フィールドをクリックするか、フォームプレビューエリアにドラッグアンドドロップしてフォームに追加します。
次に、選択肢のラベルを次のものに変更します：電話、テキストメッセージ、メール。
注意：フォームに長い選択肢リストを追加したいですか？一括で選択肢を追加するガイドを確認して、各選択肢を個別に作成する代わりに、複数のアイコン選択肢を一度にフォームに追加する方法を学びましょう。
アイコンの選択肢を有効にする
この基本的なセットアップが完了したら、アイコンの選択肢を使用するオプションをオンにして、アイコンの選択肢を有効にします。
アイコンの選択肢を初めて設定する場合、アイコンライブラリのダウンロードを求めるメッセージが表示されたオーバーレイが表示されます。アイコンライブラリのダウンロードは、フォームで使用できる 2,000 以上のアイコンへのアクセスを許可する必須の手順です。
ダウンロードを続行するには、続行ボタンをクリックします。
注意： WPForms は、アイコン選択肢に最新バージョンのFont Awesome アイコンライブラリを使用しています。
次に、ダウンロードが進行中であることを通知する別のオーバーレイが表示されます。インストール中の予期せぬ中断を防ぐために、ブラウザウィンドウを閉じたりリロードしたりしないでください。
アイコンライブラリが正常にインストールされたら、OK ボタンをクリックしてフォームを保存し、フォームビルダーをリロードします。
アイコンの選択
アイコンの選択肢を有効にしたので、デフォルトのアイコンがフォームに追加されました。フォームビルダーの左側にある各アイコンをクリックして、デフォルトのアイコンを置き換える新しいアイコンを選択します。
次に、アイコンピッカーモーダルが表示されます。ここで、フォームで使用するのに最適なアイコンを検索または参照できます。
検索バーに「phone」と入力して、電話アイコンを検索します。
検索結果には、「phone」という単語がアイコン名に含まれるすべてのアイコンが表示されます。最初のアイコンの選択肢として選択するために、phone アイコンをクリックします。
アイコンピッカーからアイコンを選択すると、フォームビルダーに表示されます。
このプロセスを繰り返して、フォームの残りの選択肢に使用する他のアイコンを選択してください。
アイコンの選択肢のカスタマイズ
フォームで使用したいアイコンを選択したら、見た目をカスタマイズする時間です。WPFormsを使用すると、フォームビルダーから直接、アイコンの色、サイズ、スタイルを簡単にカスタマイズできます。これらのオプションについては、以下で説明します。
注意：カスタマイズは、同じフォームフィールド内のすべてのアイコン選択肢に適用されます。
アイコンの色
デフォルトでは、アイコンの色は青に設定されています。アイコンの色オプションをクリックし、カラーピッカーツールを使用することで、お好みのアイコンの色を簡単に選択できます。
選択した色は、指定されたフィールドのすべてのアイコン選択肢に適用されます。
注意：Conversational Formsアドオンでアイコン選択肢を使用している場合、会話型フォームで選択した配色がアイコンの色を上書きすることに注意してください。
アイコンサイズ
アイコン選択肢には、小、中、大の3つのサイズオプションがあります。サイズを変更するには、アイコンサイズドロップダウンをクリックし、お好みのサイズを選択してください。
サイズオプションがフロントエンドでどのように比較されるかは次のとおりです。
選択したサイズは、指定されたフィールドのすべてのアイコン選択肢に適用されます。
アイコン選択肢のスタイル
アイコン選択肢のスタイルには、デフォルト、モダン、クラシック、なしの4つのオプションがあります。アイコンのスタイルを変更するには、アイコン選択肢スタイルドロップダウンをクリックし、お好みのスタイルを選択してください。
選択したアイコン選択肢スタイルは、指定されたフィールドのすべてのアイコン選択肢に適用されます。
利用可能な各スタイルオプションについては、以下で説明します：
デフォルト
デフォルトスタイルは、丸い境界線を追加し、表示可能なチェックボックスまたはラジオボタンを含み、選択時に色付きの背景と境界線があり、選択肢のラベルを境界線の外側に表示します。
モダン
モダンスタイルは、丸い境界線を追加し、選択肢のラベルを境界線の内側に表示し、選択時にボックスシャドウと色付きの境界線があります。
クラシック
クラシックスタイルは、選択時に正方形の色付き境界線を追加します。選択肢のラベルは、選択された選択肢の境界線の内側に表示されます。
なし
特別なスタイルを含めたくない場合は、なしオプションを選択してください。このオプションは、アイコンの下の1行にチェックボックスまたはラジオボタンを表示します。
選択肢レイアウトの選択
フォームにアイコン選択肢を表示する方法のレイアウトを選択するには、フィールドオプションパネルの詳細設定タブを開きます。
選択肢を表示するために使用する列数を決定する、1列、2列、3列、インラインの4つのレイアウトオプションから選択できます。
選択肢のレイアウトドロップダウンをクリックして、お好みのレイアウトを選択してください。
サイトのフロントエンドでは、フォームはこのように表示されます。
よくある質問
以下は、アイコン選択肢の使用に関するよくある質問の一部です。
なぜフォームにアイコンが表示されないのですか？
フォームに追加したアイコンの選択肢が表示されない場合は、アイコンライブラリが含まれるフォルダに問題がある可能性があります。この問題を解決するには、フォームビルダーでフォームを開き、プロンプトに従ってアイコンライブラリを再インストールしてください。
エントリー、メール通知、印刷されたエントリーなどでアイコンが表示されないのはなぜですか？
アイコンは、フォームの外観を強化し、ユーザーに視覚的な手がかりを提供して、フォームをすばやく完了しやすくするために使用されます。ただし、アイコンの意味の解釈は異なる可能性があるため、ラベルや説明の代わりとしてアイコンに頼るべきではありません。選択されたアイコンの値のみがエントリーやメール通知に含まれ、フォームを通じて送信された情報を効果的に伝達します。
これで、フォームにアイコンの選択肢を追加する方法がわかりました。
次に、フォームにコンテンツを追加しますか？コンテンツフィールドの使用方法に関するガイドをチェックして、フォームに見出し、リスト、メディアなどを追加する方法を学んでください。