フォームウィジェットの利用
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 にフォーム関連の要素が表示されます。
Label をクリックし、マウスを動かしてどこに要素を追加するか決定します。
マウスが動いている間紫の線とツールチップが表示され、どの要素がどこに追加されるか 「Add 要素名 before/after/inside マウスがホバーしている要素のタイプ」という形で表示します。
要素を追加するエリアをクリックします。
ラベルが追加されたら、クリックして GENERAL タブ の Text を編集してラベル名を変更して完了をクリックします。
会社名の入力欄についても、7-10 を繰り返し、Input を追加します。
Tips
入力を必須にするには、 GENERAL タブの Common Attributes ＞required にチェックを入れます。
フォームのデータ送信先と方法を変更する場合は、GENERAL タブの Common Attributes の action 属性と method 属性から設定します。
Attention!
親要素の FORM を選択しないと、action 属性と method 属性は表示されません。
フロントエンドとバックエンドのつなぎ部分の処理にも変更を加えます。
Tips
AJAX フォームではVWOがご用意しているコンポーネントは使用できるものの、フロントエンドとバックエンドの処理は、ご自身にて用意いただくことが必要です。ネイティブブラウザの処理がうまくいかないためです。この場合、コードを編集 をクリックして、カスタムコードを追加してください。
例2：新しいフォームウィジェットを作成する
「各記事ページにメルマガ登録用のポップアップを表示したい」
このような場合は、新しいフォームウィジェットを最初から作成します。
VWOにログイン
左メニューの テスト > A/B を開きます
右上の青い 作成 ボタンから新しいテストキャンペーンを作成します
Select from existing hypotheses ドロップダウンから、仮説 (hypotheses)を選択します
テストしたいページのURLを入力してください から、ウィジェットを表示するURLを入力します。
セグメントを設定することで、誰に対してウィジェットを表示するか設定できます。
画面右下の 次へ をクリックするとビジュアルエディタが開きます。
ウィジェットをサイトに追加するには、画面下部の 追加 ボタンをクリックします。
Add Elements ダイアログの WIDGETS タブから Form Pop-up を選択すると、ページにサンプルのフォームが追加されます。
要素変更 をクリックし、表示されるダイアログからそれぞれの要素を変更します。
Tips
要素を変更するだけでなく、ウィジェットに要素を新たに追加することも可能です。
GENERAL タブの Common Attributes の action 属性と method 属性で、フォームのデータ送信先と方法を設定します。
緑の 完了 ボタンをクリックして保存します。
サーバー側でデータを受け取るロジックを用意します。