フォームウィジェットの利用

VWOではウェブサイトにウィジェットを使ってフォームを追加することが可能です。ビジュアルエディタから、コードを書かずに直接フォームを追加したテストパターンを作成できます（フォームから送信された内容をデータベースに格納するバックエンドのロジックの知識が必要です）。フォームは通常、ウェブサイトの訪問者から何らかのデータを収集したい場合に必要になります。

例えば、ユーザー登録で、名前、メールアドレス、電話番号などの情報を収集したいとします。ビジュアルエディタを使うことで、既存のHTMLフォームを編集することもできますし、コードを書かずにポップアップのフォームウィジェットを追加することもできます。詳しくはウィジェットの利用を参照してください。

フィームは、イベント登録、簡単なアンケートなどの用途でビジターの情報を収集するのに最適な手段です。ビジターからの正確な情報にアクセスすることができれば、ビジターの関心を高め、つなぎとめることにつながります。入力方法としては、テキストフィールドや、ボタンクリック、ラジオボタン、チェックボックス、ドロップダウンなどがあります。

フォームデータの送信先と送信方法

VWO では送信ボタンに紐付けられたアクションをコントロールできます。つまり、フォームで入力されたデータの送信先と、どのように送るかを定義できます。ビジュアルエディタから action と method 属性を編集します。action 属性はデータの送信先、method 属性はどのように送るかを定義します。

action 属性

action 属性は、ユーザーが送信ボタンをクリックしたときにフィールドに入力された内容をどこに送信するかを定義できます。ビジュアルエディタで要素変更メニューから編集します。

例えば、ビジターのデータを絶対URL http://example.com/form/submit に送信するときは、action の入力フィールドにURLをそのまま入力します。入力するURLは有効なURLであることが必要です。

method 属性

method 属性では、どのようにデータをサーバーに送信するかを定義します。VWOでは定番の GETメソッドと POSTメソッドをサポートしています。この属性もビジュアルエディタの要素変更ダイアログから編集できます。

GETメソッド

GETメソッドで送信する場合、データはURLに name/value のペアが追加される形で送信されます。URLの最後にクエスチョンマーク (?) の後に name/value のペアがアンパーサンド (&) で区切られて追加されます。

例：scriptname.php?name=Taro&age=30

POSTメソッド

POSTメソッドで送信する場合、入力された値は request body に含まれてURLには表示されません。実際の値はURLに追加されないため、センシティブなデータを送信する際により安全であるといえます。

フォームの利用で気をつけること

サーバーにフォームからデータを送信する場合、フロントエンドの要素とバックエンドのコードをつなぐ処理が必要です。
例：電話番号の入力フィールドを追加した場合、その電話番号をデータベースに格納するバックエンドのロジックが必要。
チェックがバックエンドで走っている入力フィールドをフォームから削除した場合は、バックエンドのコードにも変更が必要です。変更しないと、ランタイムエラーが発生し、ビジターがフォームを送信できなくなります。
HTMLフォームでは、他のドメインにもデータを送信できます。
フォームのパフォーマンスを分析するには、VWO Insights のフォーム分析機能を利用します。フォーム計測キャンペーンの作成方法については、フォーム入力を計測する方法をご参照ください。

VWOでフォームを利用する場面

フォームの変更、追加など利用場面によっては、エディタでの編集方法が異なります。ここでは2つの例を挙げてご説明します。

例1: 既存のフォームに新しいフィールドを追加する

「名前とメールアドレスを収集するメルマガ登録フォームがすでにあり、そこに会社名というフィールドを追加したい」

この場合は、ビジュアルエディタで要素を追加する方法で対応できます。

VWOにログイン
左メニューのテスト > A/B を開きます
右上の青い作成ボタンから新しいテストキャンペーンを作成します
Select from existing hypotheses ドロップダウンから、仮説 (hypotheses)を選択します
テストしたいページのURLを入力してくださいから、フォームがあるURLを入力します。
画面右下の次へをクリックすると、フォームがあるページがビジュアルエディタが開きます。
フォームに会社名のフィールドを追加するには、追加ボタンをクリックします。Add Element ダイアログの ELEMENTS ＞ Form にフォーム関連の要素が表示されます。