AI要約
フォームに画像オプションを追加しますか？ WPFormsを使用すると、複数選択、チェックボックス、複数項目、チェックボックス項目フィールドに画像を追加できるため、ユーザーはリストされたオプションまたは項目を確認できます。
このチュートリアルでは、既存または新規のWPFormsフィールドに画像選択を追加する方法を説明します。
画像選択の設定
開始する前に、まずWPFormsがWordPressサイトにインストールおよび有効化されており、ライセンスが検証済みであることを確認する必要があります。その後、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスできます。
フォームビルダーが開いたら、次のいずれかのフィールドタイプに画像選択を追加できます。
- 複数選択
- チェックボックス
- 複数商品
- チェックボックスアイテム
さらに、これらのフィールドタイプの新規および既存のフィールドの両方に画像を追加できます。
この例では、注文フォームの項目オプションの画像を表示したいと考えています。これを行うには、まずフォームに複数項目フィールドを追加します。
フィールドを追加したら、次のステップはフィールドラベルを変更し、利用可能なオプションのテキストを追加することです。複数項目フィールドを使用するため、各項目の価格も追加する必要があります。
この基本的なセットアップが完了したら、画像選択を使用オプションを選択します。
このオプションが有効になると、各オプションに画像のアップロードボタンが追加されます。また、プレビューエリアの各オプションにプレースホルダー画像が表示されます。
画像の追加
オプションに画像を追加するには、画像のアップロードボタンをクリックしてください。
これにより、WordPressメディアライブラリが開きます。ここから、サイトに既に追加されているファイルを選択するか、新しい画像をアップロードできます。使用したい画像を選択したら、画像の挿入ボタンをクリックします。
この例では、すべての画像を150x150ピクセルに編集しました。これにより、画像オプションがより均一でプロフェッショナルに見えるようになります。
ユーザーには画像選択が次のように表示されます。
画像オプションのカスタマイズ
WPFormsには、画像選択肢をカスタマイズするための組み込みオプションもいくつか用意されています。これらのオプションを表示するには、[フィールドオプション]内の[高度な設定]タブを開きます。
使用しているフィールドで利用可能なその他のカスタマイズオプションに加えて、[画像選択肢を使用]オプションを選択すると、[画像選択肢のスタイル]と[選択肢のレイアウト]の2つのオプションが追加されます。
画像選択肢のスタイル
画像選択肢のスタイルには、モダン、クラシック、なしの3つのオプションがあります。
これらの各オプションについて以下で説明します。
モダン スタイル
[モダン]オプションを選択すると、選択されたオプションは影付きのボックス内に表示され、選択されたオプションの中央に緑と白のチェックマークが追加されます。
クラシック スタイル
[クラシック]オプションを選択すると、選択されたオプションの周りに太いダークグレーの境界線が追加されます。
なし
特別なスタイルを追加したくない場合は、[なし]オプションを選択してください。このオプションを選択すると、各オプションのテキストの横に通常のチェックボックスまたはラジオボタンが表示されます。
選択肢のレイアウト
画像選択肢が許可されているフィールドでは、いくつかのレイアウトオプションがあります。これにより、このフィールド内の選択肢を表示するために使用される列数が決まります。
[選択肢のレイアウト]オプションには、1列、2列、3列、インラインがあります。
デフォルトでは、[画像選択肢を追加]オプションが有効になっている場合、[インライン]オプションが選択されます。これにより、各行に可能な限り多くの選択肢が自動的に配置されます。
これで完了です！フォームの[複数選択肢]、[チェックボックス]、[複数アイテム]、[チェックボックスアイテム]フィールドに画像を簡単に追加できるようになりました。複数アイテムフィールドを使用して支払いを受け取る予定がある場合は、Stripe、PayPal、Authorize.Net、またはSquareとの統合を設定することを忘れないでください。
次に、フォームをサイトに追加する前にテストしたいと思いますか？フォームを公開する前に、公開前チェックリストですべてのヒントと推奨事項を確認してください。