WordPressでフォームを個別表示する方法（簡単な方法）

魅力的で使いやすいフォームを作ることは、良いユーザー体験のために不可欠です。

ヘッダー、フッター、サイドバーなどのコンパクトなスペースでは、フォームを個別行で表示することが特に効果的です。

つまり、サイトのトラフィックの多いエリアに簡単にフォームを追加し、コンバージョンを向上させることができるのです。

長年にわたり、リード獲得プロセスを微調整するために、さまざまなお問い合わせフォームの配置を実験してきました。この実践的な経験から、シンプルな個別行のフィールドがより高い完了率につながることを学びました。

この投稿では、WordPressでフォームを簡単に個別行で表示する方法を順を追って紹介します。

WordPressで個別フォームを表示する理由

個別フォームでは、フォームを設置する場所をより柔軟に選ぶことができます。このスタイルのフォームは個別行なので、スペースを取らず、WordPressブログの既存のコンテンツと簡単に統合することができます。

例えば、メールマガジンの登録フォームは、ブログ投稿コンテンツの上か下に個別投稿されることがよくあります。このようなお問い合わせフォームは、ランディングページやお問い合わせページ、その他サイト内の重要なページでも効果的です。

より多くの購読者やリードを生み出すだけでなく、あらゆる種類のフォームを個別フォームに変えることができます。

例えば、WordPressサイトのスペースを節約し、フォームをよりモバイル・レスポンシブにするために、お問い合わせフォームを個別行で表示することは理にかなっているかもしれません。

ということで、WordPressサイトに個別フォームを表示する方法をご紹介しましょう。

WordPressで個別フォームを作成する方法

このチュートリアルでは、WPFormsプラグインを使用して個別フォームを作成します。WPFormsプラグインは、600万以上のサイトで使用されているWordPress用の最高のリードジェネレータプラグインの1つです。

ドラッグアンドドロップビルダーを使って、WordPressのフォームを素早く作成できます。さらに、一般的なメールマーケティングツールと統合されているので、簡単にメールリストを増やすことができます。

詳しくはWPFormsのレビューをご覧ください。

まず、WPFormsプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関する初心者ガイドをご覧ください。

有効化したら、WordPress の管理サイドバーにあるWPForms ” 新規追加のページにアクセスし、フォームの名前を付けます。次に、フォームのテンプレートを選択します。

ここでは「オプトインフォーム」テンプレートを選択します。テンプレートにマウスオーバーして「テンプレートを使う」ボタンをクリックします。

これは画面上でWPFormsドラッグアンドドロップフォームビルダーを起動します。

私たちが選んだテンプレートには、名前とメールのフィールドと送信ボタンが自動的に含まれていることがわかります。

すべてのフィールドは、クリックして左側の列で変更することによって編集することができます。

また、フィールドをドラッグ＆ドロップして順序を変更することもできます。

フィールドのカスタマイザーが終わったら、フォームを個別行で表示することができます。

これを行うには、フォームビルダーの設定 ” 一般タブに切り替え、’高度な設定’ ドロップダウンメニューをクリックします。

次に、’Form CSS Class’ボックスに’inline-fields’と入力します（引用符は使わないでください）。

これでフォームに CSS クラスが適用されます。WPFormsには’inline-fields’クラスのスタイリングが含まれているので、フォーム全体のレイアウトが自動的に変更され、個別行できれいに表示されます。

その後、フィールド・ラベルを非表示にすることで、フォームをさらに小さくすることができる。

これを行うには、フォームのフィールドをクリックして、左カラムの設定を開きます。

そうしたら、「詳細設定」メニューオプションを選択し、「ラベル非表示」トグルをクリックしてオンにする。

次に、すべてのフォーム・フィールド・ラベルに対して同じことをする必要がある。

その後、同じ「詳細」セクションで、「プレースホルダー」ボックスにテキストを入力することができます。

これは各フォームフィールドが何のためにあるのかをユーザーに伝えます。

フォームのカスタマイザーが終わったら、必ず「保存」ボタンをクリックして設定を保存してください。

フォームを使ってリードを生成する場合、フォームをメールマーケティングプロバイダーに接続することができます。詳しくは正しいメールマガジンの作成方法をご覧ください。

WordPressサイトに個別フォームを追加する

さて、いよいよWordPressサイトに個別フォームを追加しましょう。どのページ、投稿、ウィジェットエリアにも追加できます。

今回は既存のページに追加しますが、WordPressブログの別のエリアに追加する場合も手順は同様です。

個別フォームを設置したいページを開き、「ブロックを追加」（＋）ボタンをクリックするだけで、ブロックメニューが開きます。

そして’WPForms’ブロックをクリックしてサイトに追加します。

次に、ブロック自体のドロップダウンメニューから、先ほど作成した個別行フォームを選択する。

フォームを選択すると、プラグインはコンテンツエディター内にフォームのプレビューを読み込みます。その後、’更新’ または ‘公開’ ボタンをクリックして新しいフォームを公開します。

これで、あなたのサイトを訪問して、新しいフォームの動作を確認することができます。

ボーナス：OptinMonsterを使ってポップアップとバナーを作成する

個別お問い合わせフォームを作成する以外にも、フローティングお問い合わせフォーム、オプトインポップアップ、バナーなどをサイトに設置し、リードメールを獲得することができます。

これを行うには、市場で最高のWordPressコンバージョン最適化ツールであるOptinMonsterを使用することができます。

OptinMonsterでは、ユーザーの興味に基づきパーソナライズされた関連情報を表示する美しいオプトインフォームを作成することができ、リードの獲得が非常に簡単になります。

詳しい手順については、WordPressでコンタクトフォームのポップアップを作成する方法のチュートリアルをご覧ください。

その他にも、サイトに魅力的なバナーを作成し、ユーザーにニュースレターに登録してもらうこともできる。

こうすることで、サイトのスペースをとったり、ユーザーに迷惑をかけたりすることなく、ユーザーの詳細を把握することができる。

詳しくは、初心者向けOptinMonsterでメールリストを作成する方法をご覧ください。

この投稿がWordPressでフォームを個別行で表示する方法を学ぶのにお役に立てば幸いです。また、よりインタラクティブなフォームを作成する方法や、Typeformに代わるベストな フォームを専門家が選んだ記事もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.