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ファイルが使用できます。
カスタムロゴを配置した後、画像サイズ、向き、その他の詳細などのカスタマイズオプションを編集することができます。
画像がフォームのヘッダーとして機能するように、「詳細設定」 タブで「フィールドサイズ」を「大」に設定します。
次に、「全般」タブに戻り、テキスト・フィールド内の書式設定オプションを使って、画像がフィールドの中央に配置されるようにした。
また、フィールド内のテキストを編集する機能もあります。ここでは、訪問者への短いメッセージと問い合わせフォームへの入力を促すテキストに編集しました。
その上のメディアと同様に、コンテンツ・フィールドでテキストを自由にフォーマットすることができる。テキストボックスの下にある「エディターを拡張」をクリックすると、さらに編集オプションが追加されます。
このロゴでは、テキストを画像の他の部分と中央揃えにしました。
フォームの他のフィールドもカスタマイズしたいかもしれません。
例えば、名前フィールドのサイズをLargeにして、その上のヘッダー画像の幅に合わせました。
フォームのフィールドの詳細をカスタマイズする方法はたくさんあり、変更をプレビューしながら進めることができます。
コンテンツ」フィールドに加えられた調整を確認するには、必ず「プレビューを更新」をクリックしてください。
素晴らしい！これで、好きなページにフォームを埋め込む準備ができました！
5.フォームを保存して埋め込む
フォームの右上にある保存 ボタンを押すと、変更がページプレビューに反映されます。
ページのプレビューをチェックするかどうかにかかわらず、次に進む前に「保存」をクリックする必要があります。
では、上部にある埋め込みボタンをクリックして、このフォームをWordPressウェブサイトの新しいページに追加します。
埋め込みをクリックした後、新しいフォームをどこに置くかを選択します。
既存のページを選択するか、新しいページを作成するかのオプションがあります。このチュートリアルでは新しいページを作成するので、「新しいページを作成」をクリックします。
その後、新しいページに名前を付けるよう促される。
テンプレートを選択したときにこのフォームに名前をつけたので、私たちのフォームを「お問い合わせ」と呼ぶことにします。
これで、WordPressウェブサイトの新規作成ページにフォームが表示されました。ここから、ページをプレビューしたり、下書きとして保存したり、公開したりすることができます。
もしまだであれば、エディターの右側にあるブロック設定でフォームタイトルを非表示にすることをお勧めします。フォームヘッダー画像の邪魔にならないようにするためです。
タイトルの表示」トグルがオフになっていることを確認してください。
準備ができたら、 Publishをクリックし、このページをあなたのサイトで公開します。
素晴らしい！ これでWordPressサイトに画像やロゴを使ったフォームヘッダーを追加することができました。
次に、WordPressのコンタクトフォームスパムを止めましょう。
あなたが選んだヘッダー画像でカスタマイズされた魅力的な新しいフォームで、多くのウェブサイト訪問者にフォームへの入力を呼びかけることができます。
しかし、新しいフォームでスパムを集めたくはないだろう。
スパマーがフォームに入力しないようにするには、WordPressのフォームでスパム送信を防ぐ方法をこちらの記事でご確認ください。
フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。
この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。
コンテンツフィールドがフィールドリストにありません。
こんにちは、ステファン、
コンテンツフィールドでは、画像、ビデオ、見出し、テキストなどの追加コンテンツをコードを使わずにフォームに追加できます。
詳しくは、コンテンツ・フィールドの使い方ガイドをご覧ください。
お役に立てれば幸いです。