WordPressのコメントフォームにもっとスタイルを与える

あなたがブログを持っていて、それを定期的に書いているときに起こり得る最もエキサイティングなことの1つは、読者からコメントを受け取ることです。 ただし、これを実現するには、作成するコンテンツが面白く、訪問者が入力して送信できるように、コメントを送信するためのフォームが表示され、魅力的である必要があります。

今月の一連のテストに属するこの投稿では、ブログのコメントフォームを少し再設計して、現在のバージョンよりもうまく機能するかどうかを確認することで、ブログのコメントフォームを強調しようとしています。

いつものように、A/Bテスト手法を使用して変更をテストします。 これは、変更が機能するかどうかをWebサイトの訪問者からの実際のデータで確認するための最良の方法です。

WordPressコメントフォームのデザインを改善する

コメントフォームはとてもシンプルです。 デフォルトでは、WordPressはコメントする訪問者のウェブサイトを入力するためのフィールドを追加しますが、このフィールドは何の価値も追加しないと信じています。 それどころか、魅力的なのは、どんな犠牲を払ってもリンクを取得したいボットからのスパムコメントだけです。 このため、元のフォームから削除しました。

次の比較では、ブログコメントフォームの元のバージョンと、変更を加えたバリアントを確認できます。 2つのバージョンを表示するには、中央に表示されるハンドルを一方の側からもう一方の側にスライドさせることを忘れないでください。

コメントフォームに基本的に3つの変更を加えました。

1. コメント領域を強調し、訪問者に書き込みを促すために、タイトルにいくつかの絵文字を追加しました。 今、私たちは手を振って、挨拶の絵文字と手書きで書くように彼らに勧めているようです。 絵文字が好きな人。 これがより多くのコメントを得るのに役立つかどうかを確認します。
2. 情報を入力するときにコメントが保存される場所を説明する法的なテキストでは、小さいフォントが使用されています。 法的な理由でそこにある必要がありますが、あまり関連性を持たせたくありません。
3. フォームの送信ボタンを目立つオレンジ色に変えます。 前に見たように、色は重要です。

新しいデザインの準備ができたので、テストする必要があります。

CSSスタイルのA/Bテストの作成

このデザイン変更をWordPressのブログのコメント形式でテストするには、CSSルールのA/Bテストを使用するのが最も簡単です。 ウェブサイトのバージョンAは元のフォームのものですが、バージョンBには、以前に予想していたフォームデザインの3つの変更を実現するための追加のCSSルールが含まれています。

Nelio A / Bテストを使用して、CSSの新しいA/Bテストを作成します。 次の画像は、そのようなテストの編集画面を示しています。

テスト（この場合は「ハイライトコメントフォーム」）とバリアント（「再設計されたコメントフォーム」）に名前を付けます。 右側のサイドバーの対応するフィールドに、テストに説明を追加することもできます。 前のスクリーンショットでは、追加した説明を見ることができます。これは、将来テストを見る予定のすべてのユーザーの参照として機能します。

また、テストの範囲をhttps://neliosoftware.com/blog/を含むURLに縮小し、テストがブログの投稿にのみ適用されるようにしました。

変換アクションとして、フォームの送信ボタンをクリックするように設定しました。 訪問者がそのボタンをクリックするたびに、訪問者が表示しているバリアントのテストでコンバージョンがカウントされます。

終了する前に、テストのバリアントBを編集する必要があります。 このバリアントの上にマウスを置くと、それを編集するためのオプションが表示されます。 クリックすると、次のスクリーンショットに示すように、プレビュー付きのCSSエディターが開きます。

ご覧のとおり、左側のサイドバーには、以前に見たデザインに変更を加える特定のルールを記述できるCSSエディターがあります。 さらに、右側では、これらの変更の結果をプレビューするためにWebサイトを閲覧できます。 コメントフォームを再設計するために必要なのは、6つの単純なCSSルールだけです。

終了したら、保存してA/Bテストエディターに戻って開始します。 今では、訪問者が私たちの投稿にアクセスするのを待つだけです。 各訪問者には、フォームの元のバージョンまたは再設計されたバージョンのいずれかが表示されます。 これは、何もしなくても、Nelio A/Bテスト自体によって実行されます。

A/Bテスト結果の分析

私たちは約6週間テストを実行し、ブログへの約20,000人の訪問者を分析しました（人口の素晴らしいサンプル）。 次のスクリーンショットで、A/Bテストの完全な結果を確認できます。

テストが受けたコンバージョンの総数は目を見張るものではありません。 その間、私たちのブログは27のコメントを受け取りました（そのため、テスト結果には27のコンバージョンがあります）。

ただし、コメントフォームを再設計したバリアントでは、元のバージョンの変換数が2倍になっていることに注意してください。 したがって、これはA / Bテストの勝利オプションであり、統計的信頼値が高くなります。

ご覧のとおり、いくつかのCSSルールで実現できるデザインの小さな変更は、Webサイトの結果に直接影響を与える可能性があります。 テーマにCSSルールを追加することで、このバリアントをWebサイトに適用しました。

より精巧なデザインは相互作用を促進します

デザインは、当社のWebサイト訪問者の行動を変更するための鍵です。 現在の設計よりもうまく機能する設計を取得するために、リソースを大量に消費する必要はありません。 ここでは、いくつかの簡単なCSSルールを使用して、結果をすばやく得る変更を加えることができることを確認しました。

ウェブサイトのデザインに変更を加えることは、注意して行う必要があります。 そのため、A/Bテストを使用しました。 この手法のおかげで、変更が機能するかどうかを訪問者からの実際のデータで確認できます。 そうでなければ、正しい改善の道を選んだのか、それとも後戻りしているのかわかりません。

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