WordPressでフォームヘッダー画像またはロゴを追加する方法

フォームヘッダーに画像を追加したいですか？ロゴ、サイトに合わせたバナー、またはフォームが何であるかを示す写真かもしれません。

あなたが思い描いているものが何であれ、単なる灰色のフィールドのブロックは、あなたのブランドにとって何のメリットもありません。多くの美しいウェブサイトで、他人のサイトから借りてきたように見えるフォームを見かけました。

その解決策は、WPFormsのコンテンツフィールドです。画像、ロゴ、テキストをコード不要で直接フォームにドロップできます。

この記事では、WordPressでフォームヘッダー画像を追加するプロセス全体をステップバイステップで説明します。

今すぐフォームにヘッダー画像を追加する

なぜフォームにヘッダー画像を追加する必要があるのですか？

カスタムフォームヘッダー画像は、フォームが実際にウェブサイトに属しているように見せるための最も簡単な方法の1つです。一般的なフィールドセットの代わりに、訪問者は最初にあなたのブランディングを目にし、1文字入力する前に信頼を築きます。

また、期待を設定します。ヘッダー画像またはロゴは、人々が誰に連絡しており、なぜ連絡しているのかを明確に理解できるようにし、フォームをサイト全体の配色とデザインテーマに結び付けます。

ヘッダーはフォームの主題を反映している場合もあれば、単に会社のロゴである場合もあります。そして、すべてのフォームで同じブランドルックを維持したい場合は、ブランドフォームテンプレートを作成することができるため、新しいフォームごとにヘッダーがすでに配置された状態で開始できます。

ロゴもさまざまなサイズがあります。あなたのロゴのサイズがどのくらいであるべきか疑問に思っている場合は、サイトに最適なロゴサイズに関するガイドをご覧ください。

WordPressでフォームヘッダー画像またはロゴを追加する方法

このステップバイステップガイドでは、コードに触れることなくWordPressフォームにヘッダー画像またはロゴを追加する方法を説明します。このチュートリアルは初心者向けで、カスタムCSS、ページビルダー、またはWordPressカスタムizerは必要ありません。

ステップ1：WPForms基本プラグインをインストールする

WPFormsは、WordPressでブランドフォームを構築する最も簡単な方法です。ドラッグアンドドロップビルダーと2,100以上のテンプレートが用意されているため、どこから始めればよいかわからずに空白のフォームを見つめることはありません。

この特定のジョブでWPFormsを最も気に入っている点は、コンテンツフィールドが、すでに使い慣れているWordPressエディターと同じように機能することです。フォームにロゴを追加することは、ブログ投稿に画像を追加することとまったく同じように感じられます。メディアを追加ボタンまで同じです。

コンテンツフィールドはLiteには含まれていないため、使用するにはライセンスが必要です。良いニュースは、Basic、最初の有料プランでロック解除されるため、フォームのブランド設定のためだけに高価なプランを購入する必要がないことです。

始めるには、Basicライセンスを購入してください。次に、ウェブサイトにWPFormsをインストールします。ヘルプが必要な場合は、WordPressにプラグインを追加する方法の手順に従ってください。

今すぐWPForms Basicを入手！

ステップ2：シンプルな問い合わせフォームテンプレートの選択

プラグインがサイトにセットアップされたら、WordPressダッシュボードのWPForms »新規追加に移動します。

ここから、多数のフォームテンプレートライブラリから選択できます。

しかし、まずフォームに名前を付けましょう。このチュートリアルでは、フォームを「お問い合わせ」と名付けます。これはフォームの上部に表示されます。

次に、シンプルな連絡フォームテンプレートを選択します。

これにより、テンプレートをカスタマイズするドラッグアンドドロップフォームビルダーに直接移動します。

ステップ3：コンテンツフィールドを追加する

フォームビルダーに入ったら、フィールドタブでコンテンツフィールドを見つけます。

単にコンテンツをクリックし、フィールドをフォーム上の好きな場所にドラッグアンドドロップします。

コンテンツフィールドをフォームの上部にドラッグして、アップロードされたメディアがヘッダーセクションとして機能するようにします。

フィールドがプレビューエリアに配置されたら、それをクリックしてフィールドオプションを開きます。ここで、左側のペインにあるエディターを使用してメディアを追加し、テキストを編集します。

コンテンツを視覚的に編集するか、テキストエディターに切り替えてHTMLで作業できます。このフィールドができることのすべてを完全に理解するには、コンテンツフィールドの使用に関する完全ガイドをご覧ください。

素晴らしい！これで、画像をアップロードしてフォームにテキストを追加する準備ができました。

ステップ4：会社ロゴまたは画像をアップロードする

次に、メディアを追加をクリックして、画像をコンテンツフィールドにアップロードします。

新しい画像をアップロードするか、メディアライブラリから選択できます。JPGおよびPNGファイルが受け入れられます。

アップロードする前に、簡単なヒントをいくつかご紹介します。ロゴには、ロゴが白い箱の中に収まらないように透明な背景を持つPNGを使用し、幅は約200ピクセルが良い出発点です。バナースタイルのヘッダー画像の場合は、フォームと同じくらいの幅のものを選択してください。ほとんどのWordPressコンテンツエリアでは、約700〜800ピクセルなので、全体サイズでも鮮明に表示されます。

まだロゴをお持ちでないですか？これらのAIロゴジェネレーターを使えば、数分でしっかりとしたロゴを作成できます。

カスタムロゴを配置したら、画像サイズ、向き、その他の詳細などのカスタマイズオプションを編集できます。

画像が真のフォームヘッダーとして機能するように、詳細設定タブに移動し、フィールドサイズを大に設定しました。

次に、一般設定タブに戻り、テキストエディタ内のフォーマットオプションを使用して、画像がフィールドの中央に配置されていることを確認しました。

フィールド内のテキストを編集することもできます。ここでは、訪問者向けの短いウェルカムメッセージと、お問い合わせフォームに入力するためのフレンドリーなプロンプトを作成しました。

上のメディアと同様に、コンテンツフィールドではテキストを自由にフォーマットできます。テキストボックスの下にあるエディタを展開をクリックすると、さらに多くの編集オプションが表示されます。

ここのロゴについては、テキストを画像全体の中央に配置しました。

フォームの他のフィールドもカスタマイズしたい場合があります。

たとえば、上のヘッダー画像と同じ幅に合わせるために、名前フィールドのサイズを大に拡大しました。

フォームのフィールドを微調整する方法はたくさんあり、変更をプレビューしながら進めることができます。

コンテンツフィールドに加えられた調整を確認するには、必ずプレビューを更新をクリックしてください。

ヘッダーは素晴らしく見えるので、このフォームをページに追加しましょう。

ステップ5：フォームを保存して埋め込む

変更を確定するには、フォームビルダーの右上にある保存ボタンを押してください。

ページプレビューを確認するかどうかに関わらず、先に進む前に保存をクリックする必要があります。

次に、上部にある埋め込みボタンをクリックして、このフォームをWordPressウェブサイトのページに追加します。

埋め込みをクリックした後、新しいフォームをどこに配置するかを選択します。

既存のページを選択するか、新しいページを作成できます。このチュートリアルでは新しいページを作成するので、新しいページを作成をクリックします。

その後、新しいページに名前を付けるように求められます。

テンプレートを選択したときにこのフォームに付けた名前なので、ここでは「お問い合わせ」と呼びます。

これで、WordPressウェブサイト用に新しく作成されたページにフォームが表示されます。ここから、ページをプレビューしたり、下書きとして保存したり、公開したりできます。

もう一つのおすすめです。エディタの右側にあるブロック設定で、フォームのタイトルを非表示にして、新しいヘッダー画像と競合しないようにします。

タイトルを表示トグルがオフの位置にあることを確認してください。

準備ができたら、公開をクリックして、このページをサイトで公開します。

素晴らしい！これでカスタムヘッダー画像またはロゴ付きのフォームが完成しました。おそらく全体で10分もかからなかったでしょう。

WordPressでフォームヘッダー画像を追加することに関するよくある質問

WordPressフォームにヘッダー画像またはロゴを追加することに関しては、いつも同じような質問がいくつか寄せられます。最もよく聞かれる質問に対する簡単な回答を以下に示します。

WPFormsでコンテンツフィールドが見つからないのはなぜですか？

コンテンツフィールドはWPForms Basic以上で利用可能なので、無料のLiteバージョンを使用している場合はフィールドリストに表示されません。有料ライセンスのいずれかにアップグレードすると、フォームビルダーにフィールドが表示されます。

フォームヘッダー画像のサイズはどのくらいにすべきですか？

ロゴの場合は、透明なPNG背景で幅約200ピクセルが適しています。バナースタイルのヘッダーの場合は、フォームの幅に合わせます。通常、標準のWordPressコンテンツエリアでは700〜800ピクセルです。表示サイズに近いサイズから始めると、画像が鮮明に見えます。

フォームの他の場所に画像を追加できますか？

もちろんです。コンテンツフィールドはフォームのどこにでも配置でき、複数使用することも可能です。質問の横やその他のクリエイティブな場所に画像を表示したい場合は、WordPressフォームのどこにでも画像を追加する方法をご覧ください。

フォームをサイトのブランディングに合わせてスタイル設定できますか？

はい。WPFormsブロックを使用してフォームを埋め込む場合、CSSを記述せずにブロックエディターで色、背景、フィールドスタイルを直接変更できます。フォームのスタイル設定に関するガイドで、すべてのオプションを詳しく説明しています。

フォームのヘッダーではなく、サイトのヘッダーを変更できますか？

このチュートリアルでは、フォームのヘッダー領域について説明します。ウェブサイト全体のヘッダーを更新したい場合は、テーマで制御されます。その方法は、WordPressでサイトのヘッダーを編集する方法ガイドで説明しています。

次に、WordPressで問い合わせフォームのスパムを停止する

魅力的な新しいヘッダーがフォームに表示されると、より多くの訪問者が入力するようになります。ただし、その入力の半分がジャンクであってほしくないでしょう。

スパマーをあなたのピカピカの新しいフォームから遠ざけるために、WordPressフォームでのスパム送信を防ぐ方法ガイドをご覧ください。

今すぐブランドフォームを作成する

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

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