AI要約
ほとんどのWordPressフォームはプレーンテキストですが、基本的なお問い合わせフォームとしてはこれで十分です。しかし、ロゴを一番上に表示したり、商品写真を表示したり、プレーンな選択肢よりもスキャンしやすい画像ベースの回答選択肢を表示したりするなど、少し視覚的な工夫をするだけで大きな違いを生むことができます。
WordPressフォームに画像を追加するのは、思ったよりも簡単です。コードを書く必要もありません。プラグインのインストールから画像の挿入、完成したフォームの公開まで、全プロセスをステップバイステップで説明します。
WordPressに画像を追加する方法
WordPressに画像を追加するプロセスは、画像を挿入する場所によって異なります。このチュートリアルでは、WordPressで画像をアップロードする最も一般的なシナリオをいくつか紹介します。
ステップ1：WPForms Proプラグインをインストールする
WPFormsは、WordPressで最も初心者向けのフォームプラグインであり、2,100以上のフォームテンプレートとドラッグ＆ドロップビルダーを備えているため、空白のページからではなく、既製のテンプレートから始めることができます。
この点に関して私がWPFormsで最も気に入っているのは、コンテンツフィールドです。フォームビルダー内に小さなビジュアルエディターがあり、ページを離れたりHTMLに触れたりすることなく、画像をアップロードしたり、見出しを追加したり、ロゴを挿入したりできます。
コンテンツフィールドは有料機能のため、使用するにはWPForms Proライセンスが必要になります。このライセンスにより、フォームが成長するにつれて必要になる可能性のある、完全なテンプレートライブラリ、支払い、アンケート、その他のアドオンも利用できるようになります。
始めるには、WPForms Proライセンスを入手してください。購入したら、サイトにプラグインをインストールして有効化します。以前にプラグインを追加したことがない場合は、WPFormsのインストール方法に関するガイドで手順を確認できます。
ステップ2：フォームを作成する
WPFormsが有効になったら、画像を含むフォームを作成する時間です。WordPressダッシュボードから、WPForms »新規追加に移動してフォームビルダーを開きます。
セットアップ画面で、フォームに名前を付け、開始するテンプレートを選択します。ここではシンプルなコンタクトフォームテンプレートを使用しますので、その上にカーソルを合わせてテンプレートを使用をクリックしてください。
テンプレートがビルダーに読み込まれ、すべての標準フィールドが配置された状態で、カスタマイズの準備が整います。
ステップ3：フォームに画像を挿入する
画像を追加するには、コンテンツフィールドを使用します。これにより、フォームのどこにでも画像、見出し、書式設定されたテキストを配置できます。その機能の全容を知りたい場合は、コンテンツフィールドのドキュメントをご覧ください。
左側のパネルでコンテンツフィールドを見つけて、フォームにドラッグします。一番上にロゴを追加するので、フィールドを他のフィールドの上にドロップします。
追加したフィールドをクリックして、左側にあるフィールドオプションを開きます。そこには、コンテンツを追加するための小さなビジュアルエディターがあります。
エディターのすぐ上にあるメディアを追加ボタンをクリックします。
次に、コンピューターから画像をアップロードするにはファイルを選択をクリックするか、すでにメディアライブラリにある画像を選択します。
画像がアップロードされたら、代替テキストやタイトルなどの詳細を入力できます。準備ができたら、下部にあるフォームに挿入をクリックします。
画像がフィールドに追加されますが、フォームプレビューにはすぐには表示されません。エディターの下にあるプレビューを更新ボタンをクリックすると表示されます。
画像が配置され、プレビューが更新された後のフォームの外観は次のとおりです。
コンテンツの外観をより細かく制御したい場合は、右下にあるエディターを展開ボタンをクリックします。
そこから、配置を変更したり、箇条書きリストを追加したり、投稿と同じようにテキストをフォーマットしたりできます。
すべてが正しく表示されたら、ビルダーの右上にある 保存 をクリックします。この同じコンテンツフィールドは、ヘッダー画像やロゴを追加するために使用するもので、フォームに必要なほとんどの視覚的なタッチをカバーします。
ステップ4：フォームを公開する
画像が配置されたら、最後のステップはフォームをサイトに配置することです。WPFormsには、数回のクリックでこれを処理する組み込みの埋め込みウィザードがあります。
まず、フォームビルダーの上部にある埋め込みボタンをクリックします。
ウィンドウがポップアップ表示され、フォームをどこに配置したいか尋ねられます。新しいページに配置するために 新しいページを作成 をクリックします。
新しいページに名前を付けてから、開始 をクリックします。
WPFormsはWordPressエディターに移動し、フォームはすでに埋め込まれています。これで問題がなければ、公開 をクリックして公開します。
これでフォームが公開され、配置した場所に画像が表示されます。
フォームに画像を追加するその他の方法
コンテンツフィールドはほとんどの状況に対応しますが、WPFormsでは画像を扱うための他の方法がいくつか用意されています。これらはオプションなので、構築しているものに合わせていずれかを使用してください。
フォームフィールドに画像選択肢を追加する
これは、複数選択、チェックボックス、複数項目 などのフィールドで機能し、無料機能なので、WPForms Liteでも試すことができます。
サポートされているフィールドの全リストは、画像選択 ガイドで確認できます。オンにするには、フィールドの フィールドオプション を開き、画像選択を使用 トグルをオンにします。
次に、各選択肢に 画像アップロード ボタンが表示されます。それをクリックして、そのオプションに画像を追加します。
残りの選択肢についても同様に繰り返し、プレーンなリストが訪問者がタップできる視覚的なオプションのセットに変わります。
独自の画像ではなくアイコンを使用したい場合は、代わりに アイコン選択を使用 トグルを切り替えて、組み込みのアイコンライブラリから選択してください。
具体的な例として、フォームに ラジオボタンの横に画像を追加する 方法を次に示します。
HTMLコードで画像を追加する
コードで作業したい場合、またはオンラインでホストされている画像を挿入したい場合は、HTML フィールドも別のオプションです。この場合は画像のURLが必要です。
画像がまだオンラインでない場合は、まずアップロードしてください。ダッシュボードで メディア » 新規メディアファイルを追加 に移動します。
ファイルを選択 をクリックし、コンピューターから画像を選択します。
アップロードが完了したら、URLをクリップボードにコピー をクリックしてリンクを取得します。
次に、編集したいフォームを開くか、新しいフォームを作成します。既存のフォームを編集するには、WPForms » すべてのフォーム に移動します。
フォーム概要 ページから、目的のフォームを選択します。
ビルダーで、HTML フィールドをフォームにドラッグします。
フィールドをクリックして、左側にある フィールドオプション を開きます。
フィールドを後で識別しやすくするためにラベルを追加できますが、フロントエンドには表示されません。画像を コード ボックスの画像タグにドロップして表示します。フォーマットは<img src="[画像のファイルURL]">のようになり、プレースホルダーを独自のURLに置き換えます。
コンテンツフィールドとは異なり、HTMLフィールドはビルダー内でプレビューされません。作業を確認するには、上部にあるプレビューボタンをクリックして、フォーム全体を表示してください。
そこから、以前お見せしたのと同じ方法でフォームを公開してください。
WordPressフォームへの画像の追加に関するFAQ
フォームに画像を追加すると、いくつかの一般的な質問が生じます。ここでは、最もよく聞かれる質問に対する簡単な回答を紹介します。
WordPressフォームに無料で画像を追加できますか？
はい、一部可能です。選択可能なフィールドの画像オプションは、無料のWPForms Liteプラグインで機能します。ロゴやスタンドアロン画像を追加する最も簡単な方法であるコンテンツフィールドは、Basicプランから始まる有料機能です。
訪問者に自分の画像をアップロードしてもらうにはどうすればよいですか？
それはファイルアップロードと呼ばれる別のフィールドで、人々が送信時に画像やドキュメントを添付できるようにします。ファイルアップロード機能ページでその仕組みを確認できます。
フォームにロゴを追加するにはどうすればよいですか？
フォームの上部にあるコンテンツフィールドを使用して、ロゴを画像としてアップロードします。これに特化したチュートリアルについては、WordPressフォームにヘッダー画像またはロゴを追加する方法のガイドに従ってください。
次に、訪問者に自分の画像を送信してもらいましょう
これでフォームに画像を追加できるようになりました。今度は逆に、訪問者がフォームを通じてWordPressに自分の画像をアップロードできるようにしたいと思うかもしれません。設定は同様に簡単です。
フォームの外観をさらに洗練させたいですか？ブロックエディターを使用してWPFormsをスタイリングするガイドをご覧ください。コードなしでフォームをデザインする方法がわかります。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。
こんにちは。
フォームに画像を入れたいのですが、フォームのサイズに合わせず、常に大きすぎます。
どのようにすれば、より「レスポンシブ」にできますか？
ありがとうございます！
Guillaumeさん、ご迷惑をおかけして申し訳ありません！画像をレスポンシブにするには、画像サイズを％で追加してサイズを調整できます。例：
ただし、ご質問に可能な限り徹底的にお答えするために、どのようなことをしたいのか、さらに詳しい情報とともにサポートチームにご連絡いただけますでしょうか？
ありがとうございます！🙂
ユーザーはどのようにして自分の画像をフォームにアップロードできますか？コンピューターからですか、それともウェブカメラを使用しますか？
Sohaibさん、良い質問ですね！まず、コンピューターのストレージ（ウェブカメラでキャプチャされたものも含む）に画像を保存してから、この同じ記事を参照してステップ2の手順に従ってください。
お役に立てば幸いです！ 🙂
私の顧客は、私が作成したフォームを通じて、例えば車や設備を販売するために、私のウェブサイトに写真を投稿するにはどうすればよいですか？
Carlさん、こんにちは！お客様が独自の広告を作成できるようにする最も簡単な方法は、投稿送信アドオン、特に最近リリースされたリッチテキストエディターを使用することです。
この2つを組み合わせることで、ユーザーは希望する広告をデザインし、フォームを送信でき、承認待ちまたは直接サイトに追加されます。
これで明確になったことを願っています 🙂 これについてさらに質問がある場合は、アクティブなサブスクリプションがある場合はお問い合わせください。そうでない場合は、サポートフォーラムに質問を投稿してください。
ウィジェットフォームの検索ロゴを変更するにはどうすればよいですか？
コーリーさん、こんにちは！申し訳ありませんが、何についてお話しされているのかよく理解できませんでした。
お時間のある時に、アクティブなサブスクリプションをお持ちの場合は、こちらのチームにご連絡ください。
お持ちでない場合は、サポートフォーラムまでお気軽にお問い合わせください。
ありがとうございます！
HTMLを使用してフォームに画像を追加しましたが、メールで画像が取得されません。
ヘッダーにいくつかの画像を追加して、ロゴを上に付けてフォームエントリを印刷できるようにしましたが、うまくいきませんでした。
アーマンさん、こんにちは！
お問い合わせいただきありがとうございます！
HTMLフィールド、セクション区切りフィールド、または説明（後半の2つは実質的にHTMLフィールドです）を渡さない理由は、これらの領域が完全なHTMLを許可するため、メール通知を壊したり配信の問題を引き起こしたりするものが含まれることが一般的だからです。
ただし、非入力フィールドをメールに含めることができるフィルターがあります。詳細と必要なコードは、こちらのチュートリアルをご覧ください：https://wpforms.com/developers/include-page-break-section-divider-and-html-fields-in-notifications/。
また、カスタムコードをサイトに追加する方法の詳細については、こちらの役立つチュートリアルもご覧ください：https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/（特に簡単なオプションとして、Code Snippetsプラグインのオプションをお勧めします）。
または、PHPを避けたい場合は、通知の本文を変更して必要なテキストを含めることを検討できます。通常のテキスト、HTML、スマートタグを使用して、通知コンテンツをよりカスタマイズされた方法で構築することで、これを行うことができます。
このオプションは、通知に含めたい詳細を正確に選択できるため、おそらく最も多くの制御を提供します。
お探しのものと少し違うかもしれませんが、これらのアイデアのいずれかがお役に立てば幸いです。他に質問があればお知らせください。
ありがとうございます！
ユーザーがデバイスのカメラを使用して写真を撮り、それを一度に読み込むことはできますか？写真を撮ってデスクトップに保存してから読み込むのではなく。理想的には、ユーザーが既存の写真を持っている場合はライブラリから写真を選択できるようにしたいですが、もし彼らが望むなら、カメラから写真を撮って読み込むこともできます。WPFormsでこれを行う方法はありますか？
アニルさん、こんにちは！ファイルアップロードフィールドは、モバイルデバイスからアクセスされた場合、ユーザーがカメラから直接画像をアップロードするオプションを提供できます。ただし、これはそのユーザーのモバイルがブラウザにカメラへのアクセスを許可するように設定されているかどうかに依存します。設定されていない場合、オプションは利用できません。
これで明確になったことを願っています 🙂 これについてさらに質問がある場合は、アクティブなサブスクリプションがある場合はお問い合わせください。そうでない場合は、サポートフォーラムに質問を投稿してください。
こんにちは。
WP-Formsは、WooCommerceと同じ方法でユーザーの登録データを処理しますか？ユーザーが私のeコマースストアでチェックアウトしてアカウントを登録した場合、彼女のデータはWooCommerceに1回、WP Formsの登録に1回、重複して保存されますか？
アンさん、こんにちは。当社のユーザー登録アドオンは、既存ユーザーを管理または編集するためのインターフェースを提供しておらず、アカウント作成プロセスのみに焦点を当てています。ただし、WooCommerceとの統合はサポートしていません。
とはいえ、ご質問に可能な限り徹底的にお答えし、混乱を避けるために、弊社のチームにご連絡いただけますでしょうか？
WPFormsライセンスをお持ちの場合は、メールサポートをご利用いただけますので、サポートチケットを送信してください。それ以外の場合は、WPForms Lite WordPress.orgサポートフォーラムで限定的な無料サポートを提供しています。
ありがとうございます。
WPFormsはギブメディアをサポートしていますか？または3Dビューアプラグインからショートコードを埋め込むことはできますか？
メリッサさん、こんにちは。喜んでお手伝いさせていただきます！お時間のある時に、サポートまでご連絡いただければ、お手伝いできます。
WPFormsのライセンスをお持ちの場合は、メールサポートをご利用いただけますので、サポートチケットを送信してください。
それ以外の場合は、WPForms Lite WordPress.orgサポートフォーラムで限定的な無料サポートを提供しています。
ありがとうございます 🙂
WordPressで送信ボタンに画像を追加するにはどうすればよいですか？
これまでのところ、アイコンの追加方法しか示されていません。しかし、カスタム画像を追加したいのです。
アセルさん、こんにちは。送信ボタンに画像を追加するには、次のCSSを検討してください。
.wpforms-submit-container .wpforms-submit { background-image: url('image_url'); background-size: cover; padding-left: 40px; }また、参考になれば、このようなカスタムCSSをサイトに追加する方法に関する詳細なチュートリアルはこちらです。
私のコードは次のようになっています。
.wpforms-submit-container .wpforms-submit { background-image: url(‘https://lhamosplane.world/wp-content/uploads/2023/07/th-1787430678.B.png’); background-size: cover; padding-left: 40px; }
しかし、URLが認識されず、画像が表示されません。私が求めていることを理解しているかどうかわかりませんが、送信ボタンの「送信」テキストの左側に.png画像を表示したいのです。
あなたのチュートリアルで見つけたこのコードは、ファンタスティックなアイコンを表示しますが、私が望むほとんどのことを行いますが、選択した画像のURLを追加できません。
.wpforms-form button[type=submit]:hover { background-color: #ac2428 !important; }
.wpforms-form button[type=submit]:before { content: ‘\f1d8’; /* アイコンのUnicode、引用符とスラッシュを保持してください */ margin-right: 10px !important; /* アイコンとボタンテキストの間の距離 */ }
アセルさん、こんにちは。喜んでお手伝いさせていただきます！お時間のある時に、サポートまでご連絡いただければ、お手伝いできます。
WPFormsのライセンスをお持ちの場合は、メールサポートをご利用いただけますので、サポートチケットを送信してください。
それ以外の場合は、WPForms Lite WordPress.orgサポートフォーラムで限定的な無料サポートを提供しています。
ありがとうございます 🙂
フォームの左側に画像を配置するにはどうすればよいですか？
JMさん、こんにちは。画像を表示してフィールドを右側に表示したい場合は、レイアウトフィールドを検討してください。
こんにちは。必要なフォームを作成するために、あなたのモジュールを購入できるかどうかを知りたいのですが、質問があります。最初の行には6つのラジオボタンがあり、その上には画像があります（したがって6つの画像）。ただし、これらは「ラベル」ではありません。画像をクリックすると、より大きな画像と説明テキストが表示されるポップアップが開きます。これはWP-Formsで可能ですか？よろしくお願いします。
フランソワーズ様、お手伝いさせていただきます！お時間のある時に、サポートチケットを送信していただければ、対応させていただきます。