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