AI要約
WordPressでフォームヘッダー画像またはロゴを追加する方法を学びたいですか？
画像を追加することは、フォームをパーソナライズし、ユーザーにフォームの内容を伝えたり、ビジネスのロゴを掲載したりするのに最適な方法です。
幸いなことに、WPFormsを使えば簡単です。WPFormsのコンテンツフィールドは、テキストや画像、ロゴなどのメディアを直接フォームにアップロードするプロセスを簡素化します。
この記事では、WordPressでコンテンツフィールドを使用してフォームヘッダー画像を追加するプロセスを説明します。
なぜフォームにヘッダー画像を追加する必要があるのですか？
カスタムヘッダー画像でフォームをパーソナライズすることは、一貫性のあるまとまりのあるデザインでWordPressウェブサイトを補完する簡単な方法です。ドラッグ＆ドロップのフォームビルダーによりフォームのカスタマイズが簡単になるため、画像をさまざまなスタイルで使用できます。
さらに、画像を使用することで、ウェブサイトのユーザーはサイトやフォームで何を期待できるかを明確に把握できます。画像は、フォームに視覚的な興味をもたらし、サイト全体のカラースキームやデザインテーマと結びつけるのに役立ちます。
ヘッダー画像は、フォームの内容の主題を反映している場合もあれば、ロゴなど、ビジネスや組織を表す画像である場合もあります。
ロゴにはさまざまなサイズがあります。ウェブサイトのロゴのサイズがどのくらいであるべきか疑問に思っている場合は、サイトに最適なロゴサイズに関するガイドをご覧ください。
WordPressでフォームヘッダー画像またはロゴを追加する方法
このステップバイステップガイドでは、コードなしでWordPressフォームのヘッダーを編集する方法を説明します。このチュートリアルは初心者向けで、カスタムCSS、ページビルダー、またはWordPressカスタマイザーを使用する必要はありません。
これから示すすべての手順については、この目次に従ってください。
この記事の内容
1. WPFormsプラグインのインストール
まず、WPFormsプラグインをインストールする必要があります。WPFormsライセンスのすべてをこちらで確認するか、WordPressダッシュボードからプラグインをダウンロードしてください。
フォームヘッダー画像を追加するためにコンテンツフィールドのアップロード機能を使用するには、Pro、Plus、Eliteなどのアップグレードされたライセンスを選択する必要があります。
WordPressプラグインのインストール方法に関する役立つチュートリアルはこちらです。
2. シンプルコンタクトフォームテンプレートを選択する
プラグインがサイトにセットアップされたら、WordPressダッシュボードのWPFormsに移動し、新規追加をクリックします。
ここから、フォームを作成するために選択できる多数のテンプレートを見つけることができます。
しかし、まずフォームに名前を付けましょう。このチュートリアルでは、フォームを「お問い合わせ」と名付けます。これはフォームの上部に表示されます。
次に、シンプルコンタクトフォームを選択します。
これにより新しいページに移動し、使いやすいフォームビルダーを使用してこのテンプレートをカスタマイズします。
3. コンテンツフィールドを追加する
フォームビルダーに入ったら、フィールドタブの選択肢からコンテンツフィールドを追加します。
単にコンテンツをクリックし、フォームの目的の場所にフィールドをドラッグ＆ドロップします。
コンテンツフィールドをページの上部にドラッグして、アップロードしたメディアがフォームのヘッダーセクションとして機能するようにします。
コンテンツフィールドがプレビューエリアに配置されたら、それをクリックしてフィールドオプションにアクセスし、メディアを追加して、左側のペインにある簡単なエディターを使用してテキストを編集します。
コンテンツを視覚的に編集するか、テキストエディターを使用してHTMLで編集できます。
素晴らしい！これで、画像をアップロードしてフォームにテキストを入力する準備ができました。
4. 会社ロゴ/画像をアップロードする
次に、メディアを追加をクリックして、コンテンツフィールドに画像をアップロードします。
新しい画像をアップロードするか、メディアライブラリから選択できます。JPGおよびPNGファイルが受け入れられます。
カスタムロゴを配置したら、画像サイズ、向き、その他の詳細などのカスタマイズオプションを編集できます。
画像をフォームヘッダーとして機能させるために、詳細設定タブに移動し、フィールドサイズを大に設定しました。
次に、一般設定タブに戻り、テキストフィールド内の書式設定オプションを使用して、画像がフィールドの中央に配置されていることを確認しました。
フィールド内のテキストを編集することもできます。ここでは、訪問者向けの短いメッセージと、連絡フォームに入力するためのプロンプトとしてテキストを編集しました。
上のメディアと同様に、コンテンツフィールドを使用してテキストを自由にフォーマットできます。さらに多くの編集オプションについては、テキストボックスの下にあるエディターを展開をクリックしてください。
ここのロゴについては、テキストを画像全体の中央に配置しました。
フォームの他のフィールドもカスタマイズしたい場合があります。
たとえば、名前フィールドのサイズを大に増やして、上のヘッダー画像と同じ幅にしました。
フォームの詳細を自由にカスタマイズする方法はたくさんあり、変更を加えながらプレビューできます。
コンテンツフィールドに加えられた調整を確認するには、必ずプレビューを更新をクリックしてください。
素晴らしい！これで、フォームを好きなページに埋め込む準備ができました！
5. フォームを保存して埋め込む
フォームの右上隅にある保存ボタンを押して、変更がページプレビューに反映されるのを確認します。
ページプレビューを確認するかどうかに関わらず、先に進む前に保存をクリックする必要があります。
次に、上部にある埋め込みボタンをクリックして、このフォームをWordPressウェブサイトの新しいページに追加します。
埋め込みをクリックした後、新しいフォームをどこに配置するかを選択します。
既存のページを選択するか、新しいページを作成するオプションがあります。このチュートリアルでは新しいページを作成するので、新しいページを作成をクリックします。
その後、新しいページに名前を付けるように求められます。
テンプレートを選択したときにこのフォームに付けた名前なので、ここでは「お問い合わせ」と呼びます。
これで、WordPressウェブサイト用に新しく作成されたページにフォームが表示されます。ここから、ページをプレビューしたり、ページを下書きとして保存したり、公開したりできます。
エディタの右側にあるブロック設定を構成して、まだ行っていない場合はフォームタイトルを非表示にすることをお勧めします。フォームヘッダー画像から気をそらされたくないでしょう。
タイトルの表示トグルがオフの位置にあることを確認してください。
準備ができたら、公開をクリックして、このページをサイトで公開します。
素晴らしい！これで、WordPressサイトに画像またはロゴ付きのフォームヘッダーを正常に追加できました。
次に、WordPressでスパムお問い合わせフォームを停止します。
選択したヘッダー画像でカスタマイズされた魅力的な新しいフォームがあれば、多くのウェブサイト訪問者がフォームに入力してくれるでしょう。
しかし、新しいフォームでスパムを収集したくはありません。
スパマーがフォームに入力するのを防ぐには、WordPressフォームでのスパム送信を防ぐ方法に関するこの記事をご覧ください。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookとTwitterでフォローしてください。
コンテンツフィールドがフィールドリストに見つかりません。
Stefanさん、こんにちは
コンテンツフィールドを使用すると、コードを使用せずに、画像、動画、見出し、テキストなどの追加コンテンツをフォームに追加できます。
詳細については、コンテンツフィールドの使用方法に関するガイドを必ずご確認ください。
お役に立てば幸いです 🙂