AI要約
優れたランディングページフォームの例をお探しですか？誰かがあなたのランディングページを訪れたとき、コンバージョンさせるチャンスは一度きりなので、フォームは最大限の効果を発揮するように設計する必要があります。
完璧なランディングページというものはありませんが、素晴らしい結果を得て貴重なリードを失うことを避けるのに役立つベストプラクティスは間違いなく存在します。
この記事では、優れたランディングページフォームの例を見ていきます。また、同じアイデアを自分のフォームに簡単に盗んで使用する方法もご紹介します。
良いランディングページとは？
あらゆるランディングページの目標は、顧客に目標を達成させることです。ページ上のすべては、そのコンバージョンを獲得するために向けられる必要があります。
たとえば、ランディングページフォームは次のような目的で設計される場合があります。
- メーリングリスト購読者
- リード
- 営業
- ウェビナー登録
これらの各イベントには、わずかに異なる種類のフォームが必要です。
ランディングページフォームの設計を開始する前に、どのような種類のコンバージョンを獲得したいかを理解しておくと役立ちます。基本的なレベルでは、コンバージョンを2つのグループに分けることができます。
- プライマリコンバージョン：顧客が購入する準備ができているときに発生するコンバージョンです。たとえば、ランディングページフォームは注文フォームまたは予約フォームになる可能性があります。
- セカンダリコンバージョン：顧客がまだ選択肢を検討している、ファネルの上位で発生するコンバージョンです。したがって、メールニュースレター登録フォームを作成したい場合は、セカンダリコンバージョンの良い例です。
一般的なルールとして、セカンダリコンバージョンよりもプライマリコンバージョンの方がフォームを長くすることができます。なぜなら、顧客が購入の決定を下したとき、またはそれに非常に近いとき、フォームに入力する時間を費やすことをより喜んで受け入れる可能性が高いからです。
ランディングページの構造を決定する方法を理解したので、ランディングページフォームのベストプラクティスを見てみましょう。
ランディングページフォームのベストプラクティス
この記事の内容
1.フォームの横でメリットを売る
ランディングページでは、オファーのメリットを非常に明確にしたいでしょう。
Asanaのこのフォームは、訪問者に無料トライアルへのサインアップを求めています。しかし、コンバージョンさせるためにそれに頼っているわけではありません。また、ランディングページの右側に、短い箇条書きでオファーを説明するセクションもあります。
「無制限」という言葉が複数回出現していることに気づきましたか？
ユーザーが提供する可能性に興奮していれば、フォームを送信することにもより興奮するでしょう。
WPBeginnerのこの素晴らしい例もチェックしてください。
たくさんの無料特典とボーナスのツールキットが手に入ります。つまり、フォームのすぐ後ろにたくさんの価値が隠されています。あなたがしなければならないのはクリックすることだけです！
覚えておいてください：あなたが提供しているものが素晴らしいことはあなた自身は知っていますが、顧客はそうではないかもしれません。したがって、フォームに入力するメリットを売ることは、彼らに思い出させるための素晴らしい方法です。
Asanaを他のツールと連携して使用する方法を学びたいですか？トップAsanaインテグレーションのリストをご覧ください。
フォームでメリットを販売する方法
これは、実装が最も簡単なベストプラクティスの1つです。
WPFormsを使用すると、コンテンツフィールドをフォームに簡単にドラッグして、必要な場所にテキストを追加できます。このフィールドを使用して、画像やリンクを追加することもできます。
ここに私たちの例があります。2列レイアウトを使用し、このシンプルな連絡フォームの左側にコンテンツフィールドを配置しました。ここでは、回答を待っている間にユーザーがチェックできるブランドリソースのリストを提供しています。
2.訪問者に安心感を与える
顧客が何かを心配している場合、彼らは離れて他の場所で答えを探す可能性が高いです。
たとえば、ほとんどの人は、次のようなことにだまされたくありません。
- 登録していないメールを受け取る
- 予想以上の料金を請求される
- 期待外れの製品にお金を費やす
だからこそ、コンバージョン率の高いランディングページフォームは安心を提供します。これらの懸念を予測し、それに対処することが目的です。フォーム上で直接顧客に安心感を与えることで、信頼が高まり、あなたが彼らの問題を理解していることが示されます。
訪問者に多くの安心感を提供する、WP Rocketからのランディングページフォームの素晴らしい例を次に示します。
このフォームには、訪問者が購入をより安心して行えるようにする3つの別々のエリアがあります。
- 顧客の声：これはフォームにソーシャルプルーフを追加します。写真と実名を使用すると、信頼性が増し、他の顧客がすでにフォームを完了していて結果に満足していることを示します。あなたのフォームのためのこれらの素晴らしいソーシャルプルーフの例をご覧ください。
- 返金保証：何らかの保証を提供することは重要です。特に、顧客が支払う前に製品を試す機会がない場合はなおさらです。ランディングページのこのエリアでは、顧客が満足しなかった場合に返金を受け取ることができることを知らせているため、試してみることで間違いはありません。
- 安全な支払いリマインダー：顧客が初めて訪問する場合、支払い時に適切なセキュリティが設定されていることを思い出させると役立ちます。
ランディングページフォームを見ると、ほとんどすべてがこれらの安心策の1つ以上を使用していることに気づくでしょう。
フォームに安心感を追加する方法
WPFormsを使用すると、HTMLフィールドまたはセクション区切りを使用して、フォームに追加情報を簡単に追加できます。
したがって、無料トライアルのような寛大なオファーを提供している場合は、顧客の自信を高め、フォームで目立つように言及してください。Insightlyは、このフォームの上部と下部で顧客に安心感を与える素晴らしい仕事をしています。
最後に、個人データを安全に保管することを訪問者に思い出させることを忘れないでください。WPFormsを使用すると、フォームにGDPR同意を追加するのが簡単です。
個人情報がどのように処理または保存されるかを正確に説明するように、文言をカスタマイズできます。
3.余分なフィールドを削除する
ECommerceの統計によると、フィールドが3つ以下の場合、コンバージョン率が高くなります。
これは厳密なルールではありません。主要なコンバージョンでは、顧客の関与度が高いため、より多くのフィールドを使用できる場合があります。
しかし、ほとんどの二次的なコンバージョンでは、要求する情報を減らすことが役立ちます。
これはPardotからの短いフォームの優れた例です。これは顧客がデモを予約できるようにします。
会社の情報や意図したユースケースについて大量の情報を収集したくなるでしょう。しかし、Pardotはそれを正しく理解し、フィールドは1つだけです。
予約時間が必要な場合は、時間または日付ピッカーを追加することもできます。これにより、訪問者は入力なしでデモをスケジュールできます。訪問者があなたの会社をチェックアウトしているだけの場合、短いフォームは多くの摩擦を減らします。
これはElementorからのもう一つの優れた例です。これは、各ページに1つの複数選択質問があるマルチステップフォームです。ここでも、このフォームは入力なしですべての情報を提供できるため完璧です。
最後に、Togglからのこの素晴らしい例をチェックしてください。このフォームでは、キーボードに触れることなく無料アカウントにサインアップできます。ただし、メールで参加したい場合は、下部にあるリンクの後ろに2番目のフォームが隠されています。
フィールドが大量にあり、本当に削除できない場合は、フォームをそれほど威圧的に見せないようにするためのトリックがいくつかあります。
長いフォームを短くする方法
WPFormsを使用すると、3つの方法でフォームを短くできます。
まず、私たちのお気に入りはマルチステップフォームです。
この形式は、プログレスバーの後ろに一部のフィールドを隠すことで、フォームをより怖くなく見せます。Dripのサインアップページはこの戦術を使用しており、素晴らしい見た目です。
2番目のオプションは、可能な限りタイピングとクリックを減らすために、適切なフォームフィールドを選択することです。たとえば、Elementorフォームを模倣するために画像選択を使用できます。
最後に、Zoho CRMからのこの例をチェックしてください。
Zohoは私たちの場所を知る必要がありますが、住所を入力するように求める代わりに、ジオロケーションを使用して自動的に検出しました。
このテクニックは、WPForms Geolocation addonを使用することで簡単にコピーできます。訪問者の場所をすべて自動的に保存できます。
オンにするだけで、アドオンはWordPressダッシュボードに訪問者の場所を保存します。
Geolocationアドオンを使用して、フォームで住所の自動入力を有効にすることもできます。Google MapまたはMapboxに接続し、住所または単一行テキストフィールドの自動入力をオンにするだけです。
必要に応じて、フィールドの横にマップを表示して、ピンを移動して場所を見つけられるようにすることもできます。
ジオロケーションとジオターゲティングを使用したい場合は、WordPress向けの最高のジオロケーションプラグインに関するガイドを確認してください。
4.魅力的なコールトゥアクションを作成する
あなたのコールトゥアクション（CTA）は、ランディングページのフォームの中心点です。説得力のあるCTAを作成するには、まずユーザーの最大の課題を考える必要があります。
次に、CTAボタンの言葉が、訪問者が本当に欲しいものを正確に提供していることを確認してください。
このIsItWPのフォームは、対照的な色と、送信ボタンのカスタマイズされたテキストを組み合わせています。
「送信」の代わりに「今すぐダウンロード」という言葉を使うのは強力です。これにより、あなたが望むWordPressチェックリストにすぐにアクセスできるという事実が強調されます。
実際、このフォームは、優れたリードマグネットの機能を示す良い例です。
フルレングスのランディングページとリードフォームのどちらを使用すべきか迷っている場合は、リードフォーム対ランディングページの記事をご覧ください。
行動喚起（CTA）をカスタマイズする方法
WPFormsを使用すると、フォーム設定で送信ボタンのテキストを簡単に変更できます。
そうすれば、訪問者はボタンをクリックしたときに何が期待できるかを正確に知ることができます。
目を引くために色を使用することも忘れないでください。IsItWPは青い背景にオレンジ色のボタンを使用しましたが、このフォームは灰色の背景から目立つように青いボタンを使用しています。
送信ボタンをスタイル設定して対照的な色を追加したい場合は、簡単です。コードスニペットを使用するだけです。
WPFormsで送信ボタンをカスタマイズする方法については、こちらのドキュメントをご覧ください。
5.FOMO（取り残されることへの恐れ）の力を活用する
忙しいときは、最も緊急で差し迫ったタスクが最初に完了する傾向があります。
FOMO（フォーモ）に出会いましょう。
FOMO、または「見逃すことへの恐れ」は、訪問者にすぐに行動してもらうために使用できるテクニックです。訪問者がサイトを離れてすべてを忘れてしまうのではなく、すぐにに行動することを奨励します。
限定オファーは優れたFOMO戦術です。私たちは皆、一番最初に並びたいですよね？
このランディングページのフォームは、常に誰よりも早くアップデートを受け取れることを明確にしています。
また、フォームで割引を提供することも検討してください。期間限定であれば、訪問者はその場で行動するようになります。
これはSeedProdの素晴らしい例です。今すぐチェックして60%オフ、またはそのままにして割引を失うか。どちらを選びますか？
ランディングページフォームにFOMOを追加する方法
WPFormsを使用すると、有効期限などの制限をフォームに簡単に追加できます。
これらの機能を魅力的なランディングページのコピーと組み合わせることで、訪問者の即時行動を促すことができます。
Form Locker addonを使用すると、次のことができます。
- 時間制限：期間限定オファーを設定し、フォームの有効期限を追加して、訪問者がサインアップできる時間を短くします。これは、締め切りがある求人応募フォーム、寄付フォーム、またはあらゆる種類のWordPressフォームにも効果的に使用できます。
- 数量制限： 割引コードを設定し、フォームの確認メールで送信します。次に、フォームロッカーを使用して、フォームの送信回数を制限します。これは、会場のスペースが限られているRSVPフォームにも最適なオプションです。
FOMOをブーストしたいですか？これらの機能の両方を組み合わせて使用できます。
たとえば、ウェビナーランディングページでは、座席数とフォームの有効期限の制限時間を設定できます。
フォームの有効期限を視覚的に表示したいですか？SeedProdのカウントダウンタイマーは素晴らしいです。ドラッグ＆ドロップで簡単に作成できるビルダーを使用して、どこにでもタイマーを追加し、締め切りに向けて自動的にカウントダウンさせることができます。
FOMO（恐怖離脱）のためにSeedProdを使用することについて、もっと知りたいですか？このSeedProdレビューをご覧ください。
6.プロンプトとプレースホルダーを追加する
プレースホルダーは、ランディングページに大量の追加テキストを挿入せずに訪問者を支援したい場合に非常に役立ちます。
このDripサインアップフォームでは、フィールド内にプレースホルダーテキストを使用しています。訪問者を誘導するのに役立ち、フィールドラベルがすべて削除されているため、フォームも短く見えます。
次に、PushEngageの例をご覧ください。すべてが明確に説明されているため、このランディングページフォームは非常に簡単に記入できます。
ここのプレースホルダーにはアイコンさえ含まれているため、何が必要かが簡単にわかります。
ランディングページフォームでプレースホルダーを使用する方法
プレースホルダーをプロンプトとして使用し、訪問者が正しい情報を入力するようにします。これにより、フォームが初回で送信される可能性が高くなるため、フラストレーションを回避するのに役立ちます。
WPFormsを使用すると、訪問者がフォームに記入する際にガイドするために、プレースホルダーテキストを簡単に追加できます。ここでは、訪問者が正確に入力すべきものを知るために、プレースホルダーとしてメールアドレスを追加しました。
フィールドにプレースホルダーを追加したら、WPFormsではフィールドラベルを簡単に非表示にすることもできます。
7.フォームをモバイルレスポンシブにする
スマートフォンでフォームに記入しようとしたのに、フィールドが小さすぎてタップできないことに気づいたことはありませんか？フォームがモバイルフレンドリーでない場合、タップして入力することさえ困難になる可能性があります。
すべてのフォームをどのデバイスでも記入できるようにすることが非常に重要です。これにより、モバイルユーザーの障壁がなくなることを保証できます。
こちらはActiveCampaignによる、明確なランディングページフォームの優れた例です。
モバイル向けのもう1つの優れた戦術は、タッチスクリーンで簡単に選択できる画像選択肢または大きなボタンを使用することです。
モバイルフレンドリーなフォームを作成する方法
WPFormsで作成するすべてのフォームは、デフォルトでモバイルフレンドリーです。そのため、訪問者はどのデバイスや画面サイズでも簡単に使用できます。
これは、WPFormsを使用して他のサービスと統合したい場合に非常に役立ちます。たとえば、通常のGetResponseフォームはモバイルフレンドリーではありませんが、WPFormsを使用してGetResponseサインアップフォームを作成することで、それを克服できます。
このフォームでは、ElementorはCTAボタンと画像を使用しているため、タップする領域が非常に大きくなっています。ここで誤ったオプションを選択することは不可能です。
少しコードを扱う意思がある場合は、チェックボックスをボタンに変換することで、このようなレイアウトを作成できます。
また、スタックレイアウトを検討してください。このトリックを使用すると、すべてのフィールドがモバイルで同じ幅になります。
このランディングページフォームで、スタックレイアウトと通常のレイアウトの違いを確認してください。
コードスニペットを追加する意思がある場合は、WPFormsとカスタムCSSを使用して簡単に実現できます。フォームのスタックレイアウトを作成するドキュメントをご覧ください。
次に、WordPressでランディングページを作成する
最適化されたランディングページフォームの作成方法がわかったので、WordPressで最初のランディングページを作成する番です。
WPFormsにはフォームランディングページアドオンがあり、任意のフォームをスタンドアロンのランディングページに変換できます。すでにフォームを作成していて、それをランディングページに簡単に変換したい場合は、これが最適です。
ランディングページフォームにさらに多くの要素を追加したい場合は、SeedProdをお勧めします。SeedProdはWordPress向けの最高のランディングページビルダーであり、1つのWordPressサイトから複数のドメインをランディングページに接続することもできます。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookとTwitterでフォローしてください。
