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

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でフォームを個別行で表示する方法について、この投稿がお役に立てれば幸いです。また、無料メールドメインの取得方法や、専門家が選ぶ無料オプション付きバーチャルビジネス電話番号アプリもご覧ください。

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.