複数列のレスポンシブなお問い合わせフォームを作成する方法

複数の列を持つレスポンシブな問い合わせフォームを作成することは、簡単なように思えますが、実際に作業を始めると、すぐに複雑になることがあります。

「デザインを壊すことなく、すべてのデバイスで見栄えの良いフォームを作成できるのだろうか？」と疑問に思うかもしれません。特に、モバイルでうまくフィットしない、または使いにくいフォームで苦労した経験がある場合は、これはもっともな懸念です。

良いニュースは、WPFormsを使用して複数の列を持つレスポンシブな問い合わせフォームを設定できることです。始めるには、このガイドの手順に従ってください！

今すぐマルチカラムフォームを作成しましょう！🙂

WPFormsでマルチカラムフォームを作成する方法

WPFormsでマルチカラムフォームを作成するのは非常に簡単です。始める前に、WPForms Proライセンスをお持ちであることを確認してください。このプランには、レイアウトフィールドと数多くの便利な機能が含まれています。

ライセンスを購入し、サイトにWPFormsをインストールしたら、以下の手順に従ってフォームにカラムレイアウトを作成してください。

ステップ1：新しいフォームを作成する

まず、カラムレイアウトを持つ新しいフォームを作成しましょう。WordPressダッシュボードを開き、WPForms » Add Newに移動します。

これにより、WPFormsのフォームビルダーインターフェイスが開きます。フォームの名前を入力し、テンプレートを選択できます。

この例では、最初からフォームを作成しましょう。これにより、まずマルチカラムフォームレイアウトを選択し、その後、必要に応じて各カラムに異なるフィールドを割り当てることができます。

ただし、WPFormsには、マルチカラム問い合わせフォームテンプレートなど、複数のカラムを使用する既製のテンプレートがいくつかあります。

最初からフォームを作成するには、Blank Form（テンプレートリストの最初の項目）にカーソルを合わせ、Create Blank Formを押します。

WPFormsは、簡単なドラッグアンドドロップ操作で構築を開始できる空白のフォームを読み込みます。

次に、このフォームにフィールドを追加し、マルチカラムレイアウトに配置しましょう。

ステップ2：カラムレイアウトにフィールドを追加する

フォームの一部を複数の列に分割するには、レイアウトフィールドを追加するだけです。

左側のペインにあるFancy Fieldsセクションを探し、右側のフォームにLayoutフィールドをドラッグアンドドロップします。

次に、左側のカラムに名前、メールアドレス、電話番号フィールドを追加し、右側のカラムに住所フィールドを追加します。

これを行う最も簡単な方法は、カラムをクリックしてアクティブにし、そのカラムに追加したいフィールドをクリックすることです。

まず、左側のカラムにフィールドを割り当てましょう。左側のカラムをクリックしてアクティブにします（上向き矢印で示されます）。

次に、Name、Email、Phoneフィールドをクリックして、アクティブなカラムに1つずつ直接追加します。

次に、右側の列についても同じプロセスを繰り返し、そこに住所フィールドを追加します。

素晴らしい！この2列フォームは、良い形になってきました。

しかし、2つの列の幅が異なっていたらどうでしょうか？あるいは、2列以上だったら？

WPFormsなら、次のステップで示すように、それらすべてが可能になります。

関連記事：1列フォーム：例とインスピレーション

ステップ3：フォームレイアウトをカスタマイズする

デフォルトでは、レイアウトフィールドはフォーム内に2つの等しいサイズの列を作成します。しかし、8つの異なるレイアウトから選択でき、1つのフォームに最大4列まで追加できます。

レイアウトプリセットを選択するには、フォームに追加された後、単にレイアウトフィールドをクリックします。

その後、あなたにとって最適なレイアウトを選択するだけです。たとえば、左側に狭い列、右側に広い列を配置したい場合は、3番目のレイアウトオプションを選択できます。

フォームに4列配置したい場合は、左側のペインから対応するレイアウトオプションを選択し、フィールドをそれぞれの列にドラッグアンドドロップするだけです。

さまざまなレイアウトを試してみて、フロントエンドでフォームをプレビューしてすべてがうまく表示されることを確認することをお勧めします。私たちのフォームレイアウト設計ガイドは、良い出発点となるでしょう。

場合によっては、選択したフォームレイアウトがページレイアウトとうまく合わず、配置の問題が発生することがあります。しかし、フォームテストをしっかり行い、公開前にすべてを確認すれば、これは問題にならないはずです。

ステップ4：フォームの通知と確認を設定する

通知を設定すると、新しいフォームエントリに関する最新情報を常に把握できます。フォームビルダーで、設定、次に通知に移動します。

ここから、件名行などのデフォルトの通知設定を編集したり、必要に応じて受信者のメールを変更したりできます。

これで、設定メニューで確認を選択して、フォーム送信成功時の応答を設定できます。

あなたのサイトに最適な確認タイプを選択してください – メッセージ、ページ表示、またはリダイレクトです。

変更を保存して、フォームとその設定を最新の状態に保つことを忘れないでください。これで、WordPressサイトにフォームを公開する準備が整いました！

ステップ5：マルチカラムフォームを公開する

次に、公開の最終ステップに進みます。埋め込みプロセスを開始するには、保存の隣にある埋め込みボタンをクリックします。

埋め込みボタンを押した後、既存のページにフォームを埋め込むか、新しいページを作成するかを尋ねるモーダルが表示されます。私たちは新しいページを作成オプションを選択しますが、どちらの場合も手順は非常に似ています。

ページに名前を付けて、開始を押します。

この新しいページにフォームが埋め込まれているのがわかります。WordPressエディターを使用してここで編集を行い、満足したら公開を押します。

公開されたマルチカラムフォームがフロントエンドでどのように表示されるかを示します：

これで完了です！WPFormsを使えば、コードなしで簡単に複数列フォームを作成できます。忘れないでください：ブロックエディターでフォームを簡単にスタイル設定することもできます。

WordPressで複数列フォームを作成する方法に関するFAQ

複数列フォームレイアウトの利点は何ですか？

複数列フォームは、ユーザーエクスペリエンスの観点から非常に有益です。複数列フォームが役立つ一般的なシナリオの1つは、縦スクロールが発生するほど長いフォームがある場合です。

このシナリオでは、フィールドを2列以上に並べることで、フォームの長さを短縮し、よりコンパクトにすることができます。

同様に、長いフォームをサイドバーに埋め込む場合、列レイアウトを使用すると、より適切に収まり、縦スクロールを減らすことができます。

効果的なフォームデザインには万能なアプローチはありません。だからこそ、さまざまなシナリオに合わせてさまざまなレイアウトオプションを利用できることが非常に重要です。

複数列フォームを作成するにはどうすればよいですか？

WordPressで複数列フォームを作成するには、WPFormsとそのドラッグ＆ドロップビルダーを使用できます。フォームがセットアップされたら、レイアウトフィールドを使用してフィールドを簡単に複数の列に分割できます。

WPFormsはフォームがレスポンシブであることを自動的に保証するため、小さい画面でもスムーズなユーザーエクスペリエンスのために調整されます。

データを複数の列に分割するにはどうすればよいですか？

WPFormsを使用すると、データを複数の列に分割するのは簡単です。

フォームを作成する際に、横並びに表示したいフォームフィールドを選択し、ドラッグ＆ドロップ機能を使用してレイアウトフィールドに追加するだけです。

WPFormsが残りを処理し、すべてのデバイスで列が正しく表示されるようにします。

次に、アンケートにネットプロモータースコアを活用する

顧客満足度を測定しようとしている場合、そのために使用できる最良のアンケートツールはネットプロモータースコア（NPS）です。WPFormsを使用すると、このガイドで説明するように、ネットプロモータースケールを使用したアンケートフォームを簡単に作成できます。

ユーザーがメールアドレスを正しく入力しないという問題が発生している場合は、これを防ぐために確認メールアドレスフィールドを追加する方法を説明します。また、「どのようにして私たちを知りましたか？」というアンケートの質問に関するガイドも興味深いかもしれません。

また、フォームで使用すべきスパム防止ツールについて不明な場合は、AkismetとreCAPTCHAの比較をご覧ください。

今すぐWordPressフォームを作成する

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

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