入力フォームの作成に役立つ、5つのレイアウトパターンとデザイン

お問い合わせや資料請求などのコンタクトに欠かせないWebフォーム。サイト内にフォームを配置する時、ボリュームや目的によって最適なレイアウトのパターン変わります。今回は、それらの特徴ごとに5つの事例をご紹介します。

BiNDupで作成したホームページでは、Webフォームをノーコードで簡単に配置することができます。

→多機能なフォームが簡単に作れる「BiNDup」を30日間無料体験する

1.独立したコンテンツとしてフォームを使う

お問い合わせページなど独立したページに、フォームをメインコンテンツとして配置します。
ページが独立していることで、他ページからのリンクも張りやすくなります。また、ページ全体をフォームの置き場所として使用できるので、入力項目が多いフォームの場合はこのレイアウトパターンがおすすめです。

独立したページにフォーム

ヘッダーなどは他のページと同様に作成し、コンテンツ部分にフォームを設置

2.ランディングページのコンバージョンとしてフォームを設置

ランディングページなどでは縦長にコンテンツを掲載し、ページの最後にフォームを配置することもあります。ページ閲覧の流れで、コンバージョンとしてそのまま問い合わせや申し込みなどをしてもらいたい時に有効なレイアウトです。

ページの最後にフォーム

ページの最後にフォームへ誘導

→多機能なフォームが簡単に作れる「BiNDup」を30日間無料体験する

3.他のコンテンツと合わせて2カラムでフォームを見せる

コンテンツと一緒にフォームを配置することもできます。
ブロックを2カラムに分割して、片方にフォーム、片方に説明などを入れてみてもいいでしょう。

2カラムレイアウトにフォーム

左に説明文、右にフォームを配置した例

4.ウィジェットでいつでもアクセスできる場所に

フォームはウィジェットに配置することもできます。ウィジェットにすることで、いつでもフォームにアクセスできるようになります。
ただし、ウィジェットが大きくなるとページ閲覧の邪魔になることもあるので、項目数の少ないコンパクトなフォームにすることを心がけましょう。

ウィジェットにフォーム

小さなフォームをウィジェットに配置

入力項目の多いフォームの場合であれば、フォームは別の箇所に設置し、ウィジェットにはボタンだけ配置してフォームのあるページにリンクするといいでしょう。

ウィジェットのボタンから誘導

ウィジェットのボタンからフォームへ誘導

→多機能なフォームが簡単に作れる「BiNDup」を30日間無料体験する

5.背景でフォームを彩る

応用編として、フォームを彩ってみます。

同じページ内に他のコンテンツもある場合など、フォームを配置したブロックだけ背景色を変えることでより目に留まりやすくなります。

背景色を敷いたフォーム

ブロックに背景色を設定

背景画像を使って演出してみるのもいいでしょう。

背景画像を敷いたフォーム・その1

ブロックに背景画像を設定

背景画像を敷いたフォーム・その2

ブロックに背景画像を設定し、カラムに背景色を設定

多機能なフォームが使えるホームページ作成ツール

ホームページ作成ツールのBiNDupには、フォーム機能「SmoothContact」が付属しています。さまざまなレイアウトのフォームが作れるのはもちろん、デザインのカスタマイズも簡単です。投稿内容をグラフ付きで視覚化する集計機能も備わっているのでとても便利。
サイトへの設置も簡単なので、今回ご紹介したレイアウトを参考にしてみてください。

フォームのデザイン例

BiNDupのテンプレートよりフォームのデザインと集計グラフの例

ホームページ作成サービスBiNDupを無料で使ってみるBiNDの制作事例を見る

Webデザインに役立つ配色アイディア

色の効果を理解し、ノンデザイナーでも配色が上手になるステップを学びます。業種やターゲットに合う色の選定に役立ちます。

新規登録をして資料をダウンロード
  • POINT

  • 2カラムでフォームを構成するとコンテンツを促しつつ入力を促せる
  • ランディングページはページ下部にフォームを入れると閲覧の流れCVに誘導できる
  • ウィジェットにフォームを入れるといつでもフォームにアクセスできる

RECOMMEND ARTICLE