WordPressフォームに画像付きラジオボタンを追加する方法

WordPressフォームで、テキストだけでなく画像を選択できるようにしたいと思ったことはありませんか？

考えてみてください。私たちは皆、本能的にインタラクティブで視覚的な要素に惹かれます。プレーンなテキストのみのフォームは機能的には問題ありませんが、選択可能な画像を含むフォームは、はるかに優れたユーザーエクスペリエンスにつながります。

そして、ご存知でしたか？この記事でご紹介するように、WordPressフォームのラジオボタンに画像を追加するのは、実はかなり簡単なのです。

WordPressフォームのラジオボタンの横に画像を追加する方法

WPFormsを使えば、複数の選択肢のラジオボタンやチェックボックスフィールドに画像やアイコンを簡単に追加できます。以下の手順に従ってください。

書き込みによる指示をご希望の場合は、以下をお読みください。

ステップ1：シンプルなWordPressフォームを作成する

まず、WPFormsプラグインをインストールして有効化する必要があります。詳細については、WordPressでプラグインをインストールする方法に関するこのステップバイステップガイドを参照してください。

WPFormsをサイトにインストールしたら、WordPressダッシュボードを開き、**WPForms » 新規追加**に移動してフォームの作成を開始できます。

その後、フォームに名前を付け、テンプレートを選択します。この例では、利用可能な2,100以上のWordPressフォームテンプレートの1つである、シンプルな連絡先フォームテンプレートを使用します。

テンプレートを選択するとすぐに、フォームビルダーに読み込まれます。

開始するための例として、シンプルな連絡先フォームの作成方法に関するチュートリアルもご覧いただけます。

ステップ2：WordPressフォームをカスタマイズする

シンプルな連絡先フォームテンプレートには、以下のデフォルトのフォームフィールドが含まれています：

• 名前
• Eメール
• コメントまたはメッセージ

この例では、シンプルな連絡先フォームに**複数の選択肢**フォームフィールドを追加し、ラベルと選択肢を変更して、ユーザーが連絡してくる理由を尋ねます。

左側のパネルから右側のパネルにドラッグすることで、フォームにフィールドを追加できます。

次に、フィールドをクリックして変更を加えます。フォームフィールドをクリックしてドラッグし、連絡先フォームのフィールドの順序を並べ替えることもできます。

ラジオボタンである**複数の選択肢**および**複数の項目**フォームフィールド、および**チェックボックス**および**チェックボックス項目**フォームフィールドの横に画像を追加できます。

これで、各ラジオボタンの横に画像を追加する時間です。

ステップ3：ラジオボタンに画像を追加する

フォームのラジオボタンに画像を追加するには、複数の選択肢フィールドのフィールドオプションを開き、**画像選択肢を使用する**トグルを有効にします。

画像選択肢を有効にした後、フィールドの各選択肢に画像をアップロードできます。

画像を追加するには、画像をアップロードボタンをクリックします。これによりWordPressメディアライブラリが開かれ、WordPressに新しい画像をアップロードしたり、既存の画像を選択したりできます。

ラジオボタンにアイコンの選択肢を追加する

フォームによっては、画像選択肢よりもアイコン選択肢を使用する方が理にかなっている場合があります。画像選択肢の場合と同じ方法で、フィールドオプションパネルでアイコン選択肢を使用を選択することで、このオプションを簡単にオンにできます。

WPFormsは、既製のアイコンの広範なライブラリを使用しているため、自分でアップロードする必要はありません。利用可能なオプションから必要なアイコンを簡単に選択できます。

詳細については、WPFormsでアイコン選択肢を使用する方法ガイドをご覧ください。

ステップ4：画像選択肢をカスタマイズする

WPFormsは、組み込みのカスタマイズオプションのおかげで、画像選択肢のカスタマイズを非常に簡単にします。まず、好みの画像選択肢スタイルを選択します。

モダンなスタイルは、選択された画像を影付きのボックスに表示し、中央に緑色のチェックマークを追加します。クラシックスタイルは、太い灰色の境界線で選択された画像を表示します。

「なし」オプションは特別なスタイルを追加しません。代わりに、サイト訪問者が選択できるように、各画像の隣に従来のラジオボタンが表示されます。次に、詳細設定タブをクリックすると、その他のオプションを表示できます。

重要なのは、好みの選択肢のレイアウトを選択することです。1列、2列、または3列から選択できます。

インラインを選択することもできます。これは、各行にできるだけ多くの選択肢を配置してから、次の行に追加します。インラインは、画像選択肢を表示するすべてのWordPressフォームのデフォルトの選択肢レイアウトです。

新しいユーザーがウェブサイトにアクセスするたびに画像選択肢の順序をランダムにしたい場合は、選択肢をランダム化オプションを選択することもできます。

ステップ5：アンケートレポートを有効にする

提供する各画像選択肢を何人が選択したかを知りたい場合は、アンケート＆投票アドオンをインストールして有効にすることで、フォームのアンケートレポートを有効にできます。

これを行うには、WPForms » アドオンに移動し、アンケート＆投票アドオンというラベルの付いたものを探します。アドオンをインストールをクリックしてから、有効化をクリックします。

WPFormsでは、次のフォームフィールドの結果を収集できます。

• 一行テキスト
• 段落テキスト
• ドロップダウン
• チェックボックス
• 複数選択
• 評価
• ライカート尺度
• ネットプロモータースコア（NPS）

フォーム内のすべての互換性のあるフィールドのアンケートレポートを有効にするには、フォームビルダーの設定 » アンケート＆投票に移動し、アンケートレポートを有効にするオプションを選択します。

特定のフィールドの結果のみを収集したい場合は、そのフィールドオプションパネルを開き、詳細設定タブをクリックします。次に、アンケートレポートを有効にするをオンにします。

人々がラジオボタンの横に画像が表示されたフォームの入力を開始すると、WordPressダッシュボードでアンケートレポートを生成して結果を確認できるようになります。

アンケートレポートを生成するには、WPForms » すべてのフォームに移動し、フォームにカーソルを合わせてオプションを表示します。次に、アンケート結果をクリックします。

WPFormsを使用すると、データは自動的に、人間が理解しやすい美しいレポートに生成されます。

ラジオフィールドの横に画像を追加する – よくある質問

最近、チームがラジオフィールドと画像について受け取った一般的な質問をいくつかまとめました。このトピックに関する追加の質問がある場合は、これらをお読みください。

WordPressフォームにラジオボタンの横に画像を追加する理由は何ですか？

画像はWordPressフォームの視覚的な補助として驚くほど効果的です。はるかに気づきやすく、訪問者の目をすぐに引き付けます。

その結果、視覚要素を含むフォームは、読み取りと理解に時間がかからないため、入力しやすくなり、ユーザーエンゲージメントの向上と全体的なエクスペリエンスの向上につながります。

フォームに画像を追加するためにコーディング経験は必要ですか？

WPFormsのようなユーザーフレンドリーなプラグインを使用している場合、フォームに画像を追加するために1行のコードも必要ありません。

WPFormsでフォームに画像を追加することは、WordPressメディアギャラリーに画像をアップロードするのと同じくらい簡単です。誰でもできます！

画像を追加するとウェブサイトが遅くなりますか？

画像を追加するとページの読み込み速度に影響しますが、それはあなたの特定のウェブサイトに大きく依存します。追加する画像の量に注意し、すべてが最適化されていることを確認すれば、ページの速度に悪影響はありません。

ラジオボタンと画像の表示をカスタマイズできますか？

はい、WPFormsでラジオボタンと画像の表示をカスタマイズできます。たとえば、インライン、1列、2列、3列の配置など、さまざまなフィールドレイアウトから選択できます。

さらに、WPFormsでは、ラジオフィールドの選択肢にモダンとクラシックのスタイルを選択することもでき、画像がわずかに異なるスタイルで表示されます。

ラジオボタンの横にある画像はアクセシビリティに影響しますか？

背景と画像の間の色のコントラストなどの考慮事項を無視すると、ラジオボタンに付随する画像はアクセシビリティに影響を与える可能性があります。

画像に説明的な代替テキストを追加し、基本的な目視チェックを実行して、画像がすぐに認識でき、コントラストが高いことを確認することをお勧めします。

画像がはっきりと見えるようにするために労力がかかる場合は、理想的なアクセシビリティを確保するためにより多くのコントラストカラーが必要である兆候です。

次に、オンラインでより多くのお金を稼ぐ

これで完了です！WordPressフォームにラジオボタンの横に画像を追加する方法がわかりました。

オンラインでお金を稼ぐことに興味がある場合は、簡単な注文フォームをWordPressで作成する方法に関するチュートリアルを確認し、販売する各アイテムの横に画像を追加してください。

WordPressフォームを今すぐ作成

フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。

この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。