WordPressのフォームに画像の選択肢を追加する方法（エンゲージメントを高める）

WordPressのフォームに画像の選択肢を追加したいですか？

テキストの選択肢を表示するだけでなく、画像を使用することで WordPress のフォームをより魅力的なものにすることができます。これにより、レスポンシブ率やフォームのコンバージョン率を向上させることができます。

この投稿では、WordPressのフォームに画像の選択肢を簡単に追加し、ユーザーエンゲージメントを高める方法をご紹介します。

なぜWordPressのフォームに画像選択を使うのか？

イメージチョイスとは、WordPressサイトのフォームに入力する際にユーザーが選択できる写真、イラスト、グラフィック、アイコンのことです。

通常のテキスト・オプションではなく、画像の選択肢を使ったフォームの例です。最初の選択肢「イチゴ」が選択されています：

Imagelyを選択することで、フォームがより洗練され、プロフェッショナルで、視覚的に魅力的に見えるようになり、ユーザーがより早く判断できるようになります。

例えば、デリバリーを提供するレストランのサイトを運営している場合、サイト上に注文フォームを設置したいと思うでしょう。その際、様々な料理の画像を使用することで、潜在的なカスタマイザーが欲しいものを選びやすくなります。

その他にも、画像を選択することで、文字を読むことが困難なユーザーや、言語に堪能でないユーザーがフォームに入力しやすくなり、ユーザーエクスペリエンスを向上させることができます。

それでは、WordPressのフォームに画像の選択肢を簡単に追加する方法を見ていきましょう。

動画チュートリアル

Subscribe to WPBeginner

もし、文章での説明がお望みなら、このまま読み進めてほしい。

WordPressのフォームに画像の選択肢を追加する方法

WPFormsを使えば、WordPressのフォームに画像の選択肢を簡単に追加して、エンゲージメントを高めることができます。

WordPress フォームビルダープラグインの最高峰で、ドラッグ＆ドロップで簡単にフォームを作成できます。

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

プラグインを有効化したら、WordPress ダッシュボードのWPForms ” Add Formページに移動し、新しいフォームを作成します。

テンプレートの選択」ページが表示されますので、フォームの名前を入力してください。

その後、お好みのテンプレートの下にある「テンプレートを使う」ボタンをクリックします。このチュートリアルでは ‘Simple Contact Form’ テンプレートを使います。

これでWPFormsフォームビルダーのインターフェースが起動し、画面の右側にフォームのプレビューが表示され、左隅にフォームフィールドのカラムが表示されます。

任意のフォームフィールドをクリックして編集したり、上下に移動したり、削除したりできるようになった。

より詳しい手順については、WordPress でお問い合わせフォームを作成する方法のチュートリアルをご覧ください。

次に、左の列から複数選択フィールドをフォームプレビューに追加し、カスタマイザーに画像の選択肢を作成できるようにします。

コメントまたはメッセージ」ボックスのすぐ上に配置する。

注意：画像の選択はチェックボックスフィールドでも機能します。ユーザーが複数のオプションを設定できるようにしたい場合は、こちらを使用してください。

その後、複数選択肢フィールドをクリックして編集します。これにより、画面の左側にフィールドオプションが表示されます。

このフィールドでは、初期設定でテキストオプションを追加できることにお気づきでしょう。

しかし、「Use Image Choices」スイッチを切り替えることで、簡単に変更することができます。

そうすると、各選択肢の下に「アップローダー」ボタンが表示されます。

次に、フィールドのテキストラベルに好きなものを入力し、「Upload Image」ボタンをクリックします。

コンピューターから画像をアップロードするか、WordPressのメディアライブラリから画像を選択することができます。

250px×250px以内の.jpgまたは.png画像を使用することをお勧めします。

写真はすべて同じサイズにすると、フォームの中で最も美しく見えることを覚えておいてください。

重要:WPFormsは画像のサイズを変更しません。アップロードする前に本当に〜してもよいですか？または、フォームに追加する前にWordPress自体で画像を編集することもできます。

3つ以上のオプションを設定する場合は、(+)ボタンをクリックして新しいオプションを追加してください。(-)ボタンで選択肢を削除することもできます。

フォームに表示するImageの選択方法を変更する

WPFormsでは画像選択フィールドのレイアウトやその他の設定を簡単に変更することができます。

これを行うには、左カラムの「詳細設定」タブに移動します。

画像の選択肢を特定の順番ではなくランダムに表示したい場合は、「選択肢をランダムに表示」スイッチを切り替えることができるようになりました。

これは、アンケートを作成していて、結果の第一選択バイアスを排除したい場合に便利です。

必要であれば、「選択肢のレイアウト」ドロップダウンを使って、選択肢のレイアウトを変更することもできます。

初期設定は「インライン」で、選択肢は改行されるまで隣り合って表示されます。

選択肢を複数のカラムで表示することもできます。縦書きにしたい場合は、ドロップダウンから「1カラム」を選択してください。

また、画像の選択には「ラベルを非表示」にする設定もあります。これは、画像の下にテキストが表示されないことを意味します。場合によっては、これを行うことに意味があるかもしれません。

例えば、どの新しいロゴデザインが一番好きか投票してもらうとか。

本当に〜してもよいですか？これは画像のaltテキストとして表示され、あなたのサイトを視覚障害ユーザーがよりアクセスしやすくします。

そうしたら、左の列から「一般」タブに戻り、「画像選択スタイル」セクションまでスクロールダウンします。

ここから、ドロップダウンメニューから画像のスタイルを選択できます。

初期設定はModernで、選択されている画像にチェックマークが表示されます。

ただし、代わりにクラシック・スタイルを選ぶことができ、オプションを設定するとこのようになる：

また、スタイルに「なし」を選択することもできる。

この場合、画像は枠線もスタイルもない普通の画像になります。ラベルはラジオボタンで表示されます。

フォームが完成したら、画面上部の「保存」ボタンをクリックしてください。

サイトにフォームを追加する

数回クリックするだけで、サイトのどの投稿やページにもフォームを追加することができます。新規ページを作成しましょう。

まず、WordPressの管理画面サイドバーからページ ” 新規追加画面にアクセスし、画面左上の「ブロックを追加」（＋）ボタンをクリックします。

ブロックメニューが開きますので、そこからWPFormsブロックを探してページに追加してください。

その後、ブロック内のドロップダウンメニューから、先ほど作成したフォームを選択します。

最後に、’公開’または’更新’ボタンをクリックしてフォーム設定を保存します。

では、WordPressフォームの画像選択肢を表示するために、あなたのサイトにアクセスしてください。

フォームにさらに変更を加えたい場合は、WordPress ダッシュボードからWPForms ” すべてのフォームページにアクセスして簡単に変更できます。

フォームビルダーでフォームを開きます。

変更後、「保存」ボタンをクリックするだけで、変更が保存されます。あなたのページのフォームも自動的に更新されます。

ボーナス: WordPressフォームで画像を受け入れる

画像の選択肢を与えるだけでなく、WordPressのフォームを使ってさまざまなユーザーから画像を受け付けることもできます。

これは、誰かを雇いたいと思っている写真家や、写真コンテストを開催している場合に便利です。

それ以外にも、ユーザーが作成したコンテンツを受け入れることで、サイトのユーザーエンゲージメントを高めることもできる。

WPFormsは市場で最高のファイルアップロードプラグインなので、WordPressで簡単にファイルアップロードフォームを作成することができます。

ファイルアップロードフォームのテンプレートがあらかじめ用意されており、jpeg、png、gif、pdf、pptなど、あらゆる種類のドキュメンテーションを受け付けることができます。

画像を受け入れるには、’ファイルアップロード’フィールドをクリックして、左カラムの設定を開きます。その後、’Allowed File Extensions’オプションの下に受け入れたい画像ファイルの種類を入力する必要があります。

設定が完了したら、「保存」ボタンをクリックして設定を保存することをお忘れなく。

その後、ユーザーフレンドリーな WPForms ブロックを使ってサイトにフォームを追加できます。より詳細な手順については、WordPressでファイルアップロードフォームを作成する方法のチュートリアルを参照してください。

WordPress のフォームに画像の選択肢を追加する方法について、この投稿がお役に立てれば幸いです。WordPress サイトにインタラクティブな投票を作成する方法についての初心者向けガイドや、WordPress ページビルダー プラグインの比較もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.