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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ブロックに背景色を設定

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

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

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

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

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

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

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