フォームを使用してページで試す必要のあるA/Bテスト

公開: 2022-06-02

多くのウェブサイトの最も重要な目的の1つは、より多くのリードまたはサブスクライバーを獲得することです。 これを行うには、おそらく1つ以上のページがあり、訪問者が製品に関する詳細情報を要求したり、ニュースレターを購読したりするためのフォームを表示します。

変換の観点からは、フォームを含むページのデザインとコンテンツが重要になる可能性があるため、本日は、変換を最適化するために試すことができるA/Bテストの種類の例をいくつか紹介します。 (訪問者が連絡または購読している)。 次の例では、ページ上のフォームが、WordPressと完全に統合されたフォーム作成プラグインであるNelioFormsで作成されていることがわかります。

ページ内のフォームの場所

ページでのコンバージョンの改善について話すとき、最も頻繁に議論されるポイントの1つは、召喚状の場所です。 ページの訪問者にフォームに記入してもらうことが私たちの目標である場合は、フォームをさまざまな場所に配置して、どれが最適かを分析してみてください。 WordPressのNelioA/BTestingプラグインを使用してこのようなテストを作成する方法の簡単な例を見てみましょう。

Nelio Unlockerページ(任意のWebページをWordPressまたはElementorブロックエディターに変換するプラグイン)のテストを作成し、フォームをページの上位に配置して、より多くの訪問者から連絡があるかどうかを確認するとします。

テストの代わりに、前の画像でわかるように、フォームを上に移動しただけでなく、見栄えを良くするために、例を含むセクションをページのさらに下に配置しました。

Nelio A / B Testingプラグインを使用してこのテストを実行するにはどうすればよいですか? まず、新しいテストページを作成することを選択します。

Nelio A/Bテストのテストのリスト
Nelio A/Bテストのテストのリスト

テストに名前を付け、テストするページを選択した後、デフォルトでは、作成する各バリアントは元のページのコピーであり、必要に応じて編集して変更を加えることができます。

ページフォームプレースメントテストの作成
ページフォームのプレースメントテストを作成します。

Nelio A / Bテスト(WordPressに完全に統合されたプラグインである)の大きな利点は、ブロックエディターでページを編集するのと同じくらい簡単にバリアントを変更できることです。 この場合、移動するページの1つまたは複数のブロックを選択し、それらの場所を変更するだけです。

A/Bテストページバリアントの編集
A/Bテストのページバリアントを編集します。

必要な変更を加えた後、残っているのは、ページを保存し、作成していたテストに戻り、変換の目標とテストのアクションを示すことだけです。 この例では、お問い合わせフォームに記入してもらうことが目標です。 「コンバージョンの目標とアクション」セクションで、ゴールの名前を指定し、コンバージョンアクション「フォームの送信」を追加します。

テストの目的と変換アクションの定義
コンバージョン目標の定義とテストのアクション。

前の画像でわかるように、このテストの変換アクションとして保存するために送信する必要のあるフォームを選択できるドロップダウンがあります。

以上です! これで、テストの開始ボタンを押して、そのページへのトラフィックの半分に1つの選択肢が表示され、残りの半分にもう1つの選択肢が表示されるようになります。 テストの結果ページでは、各バリアントの訪問数とコンバージョンを追跡し、どのオプションが最も効果的かを分析できます。

入力するフィールドの数とタイプ

Hubspotが40,000ページ以上を分析して実施した調査では、入力するフィールドの数と各フィールドのタイプが、取得するコンバージョンに影響を与えることがわかりました。

上のグラフから、おそらくすでにお察しのとおり、入力するフィールドが少ないほど、訪問者があなたに連絡しやすくなることがわかります。 それでも、フォームから取得する情報の品質を比較検討する必要があります。通りすがりの人に連絡してもらいたいのか、それとも本当に興味があり、もう少し情報を提供してくれる人だけを好むのか。彼ら自身?

次の例に示すように、フォームフィールドの数とタイプを変更して、さまざまなA / Bテストを実行し、最適なものを分析してみてください。

このようなテストを作成するには、Nelio Formsのようなプラグインを使用すると、追加のフォームを作成するのと同じくらい簡単です。 フォームエディタは、すでに使い慣れているブロックエディタとほとんど同じであることがわかります。

新しいお問い合わせフォームを作成する
新しいお問い合わせフォームを作成します。

また、テストの代替ページを編集する場合(元のページのコピーであることを忘れないでください)、ドロップダウンから使用可能なフォームのリストを選択して、作成したフォームを新しいフォームに置き換えるだけです。

元のフォームを作成された新しいフォームにバリアントで置き換える
バリアントで元のフォームを作成された新しいフォームに置き換えます。

この場合、変換の目標とテストのアクションを指定するときに、変換アクションとして2つのフォームの送信を追加する必要があることに注意してください。 このように、これら2つのフォーム(テストの各バリアントに1つ)のいずれかを送信すると、コンバージョンとして記録されます。

2つのテスト変換アクションの仕様
2つのテスト変換アクションの仕様。

フォームラベルを表示する場所

何年も前のLukeWroblewskiによる記事、フォームデザインのリファレンスでは、各フィールドの上または左にフィールドラベルを表示することの長所と短所を比較しました。

前の例で気付いた場合、多くのフィールドを持つ垂直フォームの問題の1つは、スペースを取りすぎる可能性があることです。 あなたが試すことができ、私が個人的に見つけた代替案の1つは、フォームを非常にきれいにすることです。フィールドラベルを個別のエンティティとして表示せず、代わりにプレースホルダーを書き込むことです。

Nelio Formsを使用する場合は、フィールド設定でラベルを非表示にする必要があることを示すのと同じくらい簡単です。次に、適切なプレースホルダーを記述するだけです。

フィールドラベルを非表示にし、プレースホルダーを書き込む
フィールドラベルを非表示にし、プレースホルダーを書き込みます。

このようにして、フォームの高さを低くし、ユーザーは各フィールドに何を入力するかを簡単に確認できます。

ラベルなしでプレースホルダー付きのフォーム
ラベルなしでプレースホルダー付きのフォーム。

ボタンのテキストと色を送信

さまざまな色やさまざまな召喚状のテキストをテストすることも、コンバージョンを改善するための非常に人気のあるタイプのテストです。 ある色の方がうまくいく、またはメッセージはそうあるべきだと言う人がいますが、訪問者が最も気に入っているものをテストして確認することをお勧めします。 これは、私たちがWebサイトの1つで行ったこととまったく同じであり、さまざまなボタンの色をテストして、何が最も効果的かを確認しました。

ブロックエディタに完全に統合されているNelioFormsのようなプラグインを使用する場合は、テストしたい代替案と同じ数のフォームを作成し、それぞれに色、スタイル、ボタンテキストを設定するだけです。これを行うには、元のフォームをコピーして、他のページや投稿で行うのと同じようにボタンの特性を変更するのと同じくらい簡単です。

カスタム送信ボタン付きのフォーム
カスタム送信ボタン付きのフォーム。

データプライバシーに関する情報

最後に、フォームで実行できるもう1つのテストは、収集したデータのプライバシーについてさまざまな表現を試し、それがどのような影響を与えるかを確認することです。 人々はスパムを送りたくないので、信頼を築くために、第三者にデータを共有しないことを明示的に強調することが役立ちます。

データプライバシーに関する代替テキストを含むフォーム
データのプライバシーに関する別の表現を使用したフォーム。

さまざまなスタイルでさまざまな代替表現を試して、各代替が持つ可能性のある影響を分析します。

結論

今日は、コンバージョン率を向上させるために、お問い合わせフォームを使用してページでテストできるいくつかのアイデアを共有したいと思いました。 推奨事項がいくつ見つかっても、A / Bテストを実行した後でないと、Webサイトで何が最も効果的かがわかります。ページ内のフォームの場所を変更する場合でも、さまざまなフォームコンテンツをテストする場合でも、いくつか実行してください。テストして、より多くのリード、サブスクライバー、または顧客を獲得する方法を確認します。

NelioFormsなどのネイティブWordPressプラグインを使用してフォームを作成し、Nelio A /BTestingを使用してA/Bテストを実行する場合、フォームを使用したページのテストがこれまでになく簡単になります。

UnsplashのRobertAnaschによる注目の画像。