> For the complete documentation index, see [llms.txt](https://docs.vwo.gaprise.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vwo.gaprise.jp/testing/editor/2kgqx4341l.md). # フォームウィジェットを操作する VWOは、[ウィジェット](https://help.vwo.com/hc/en-us/articles/360039014073)を使って、コードなしでWebサイトにフォームを追加できます。 これらのフォームを使ったウェブページのバリエーションを、VWOビジュアルエディターから直接作成することができます。Webサイトの訪問者から何らかのデータを収集する場合、一般的にフォームが必要になります。**例えば、**ユーザー登録の際に、氏名、メールアドレス、電話番号などの情報を収集します。 VWOビジュアルエディターを使うと、ウェブページ上の既存のHTMLフォームを修正したり、コード一行も書かずに新しいフォームを作成したりすることができます。VWOウィジェットを使って、Webサイトにポップアップフォームを追加できます。VWOウィジェットの詳細については、「[VWOのウィジェット](https://help.vwo.com/hc/en-us/articles/360039014073)」を参照してください。 フォームは、イベントの登録や簡単な意見調査の作成など、さまざまな方法で訪問者の情報を得ることができる優れた方法です。また、訪問者の正確な情報が入手できれば、訪問者をより深く理解し、引き留めることができるようになります。訪問者の入力を取得するには、テキストフィールド、ボタンのクリック、ラジオボタン、チェックボックス、プルダウンボックスなど、いくつかの方法で訪問者の反応を得ることができます。 ![](/files/Qj1LUleJtL2bX5wArfUz) VWOでは、送信ボタンに関連するアクションを制御することができます。つまり、ユーザーがフォームを送信すると同時に、データが**どのように**、**どこで**送信されるかを決定することができます。これは、VWOエディターを使用して設定できるアクションとメソッドの属性を使用して実現されます。**アクション**属性はデータの送信先を指定し、**メソッド**属性はデータの送信方法を決定します。 **\[アクション属性]** action属性は、ユーザーが送信をクリックしたときに、フォームのフィールドの内容をどこに送信するかを定義することができます。VWOでは、VWOエディターの\[要素の編集]ダイアログでaction属性を設定することができます。このフィールドの値は、有効なURLでなければなりません。**例えば、**訪問者のデータを絶対URLである 「 **\[メソッド属性]** method属性は、データをサーバーに送信する方法を定義することができます。そのためにVWOは、フォームデータの送信方法として最も一般的な「GET」メソッドと「POST」メソッドの2つをサポートしています。この属性は、VWOエディターの\[要素の編集]ダイアログからも設定可能です。 フォームのデータをGETメソッドで送信する場合、サーバーに送信されるデータは、一連の名前と値のペアとしてURLに追加されます。URLの末尾にクエスチョンマーク(?)を付け、その後に名前と値のペアをアンパサンド(&)で区切って記述します。**例えば、**scriptname.php?name=Bob\&age=30とします。 同様に、POSTメソッドを使用してフォームデータを送信する場合、フィールドの値はリクエストボディで渡され、URLでは見えません。POSTメソッドはURL内に実際の値を付加しないため、機密性の高い情報を送信する場合には、こちらの方が安全です。 ### **VWOでフォームを操作する際の注意点** 1. フォームのデータをサーバーに送信する場合は、フロントエンドの要素がバックエンドのコードと通信するようなコードを用意してください。**例えば、**フォームに新しいフィールド、例えば「電話番号」を追加する場合、このフィールドのデータをデータベースに格納するためのバックエンドロジックを書く必要があります。
2. バックエンドでバリデーションのあるフィールドをフォームから削除した場合、実行時エラーが発生し、訪問者がフォームを送信できなくなるため、訪問者にバリエーションを展開する前にバックエンドのコードを変更する必要があります。
3. HTMLフォームを使えば、他ドメインのデータも送信できます。
4. フォームのパフォーマンスを追跡したい場合は、\[インサイト]の下にフォーム分析キャンペーンを設定することができます。フォーム解析キャンペーンの設定方法については、「[VWOを使ったフォームのトラッキング方法](https://help.vwo.com/hc/en-us/articles/360020828093-How-to-Track-a-Form-Using-VWO)」を参照してください。 ### **シナリオ例 - 1** **「サインアップフォームでは、すでに名前とメールアドレスを収集しています。ここで、フォームに会社名のフィールドも追加しておきます。」** 上記のシナリオ例で述べられていることを実現するには、VWO エディターを使用します。ウェブページに新しいコンポーネントを作成することができます。VWOエディターにある\[**追加**]オプションを使用して、Webページに新しいコンポーネントを作成することができます。 **手順** 1. お客様のVWOアカウントにログインします。 2. \[**テスト**]→\[**A/Bテスト**]に進みます。 3. \[**テストを作成**]をクリックして、新しいA/Bテストキャンペーンを作成します。 4. \[**テスト対象のページのURLを入力する**]フィールドに、テストするウェブページのURLを入力します。 **注：**キャンペーンにURLを含める、または除外するには、\[URLs]フィールドの横にある\[**詳細設定**]タブをクリックします。このタブでは、全部または特定のワイルドカードを含む広範なURLや特定のURLを含む高度なパターンマッチオプションを定義することもできます。様々なURLパターンの使用については、「[VWOにおけるURLパターンの使い方](https://help.vwo.com/hc/en-us/articles/360021127714)」をご参照ください。 5. \[**テストする仮説**]のプルダウンから、作業したい仮説を選択します。 これはオプションのステップです。\ **注：**まだ仮説がない場合、または新しい仮説を作成したい場合は、仮説プルダウンの下部にある \[**仮説を新規作成**] オプションをクリックすることで可能になります。仮説の詳細については、「[VWOにおける仮説](https://help.vwo.com/hc/en-us/articles/360019569694)」を参照してください。 6. \[**次へ**]をクリックします。\ フォームを含むテストページがVWOエディターで開きます。 7. フォームに新しい会社名のフィールドを追加するには、\[**追加**]ボタンをクリックします。\ \[要素の追加]ダイアログが表示されます。![Screenshot\_2019-11-21\_at\_4.52.56\_PM.png](/files/Wsz0pAv5jdX2u1Yntox5) 8. \[**要素の追加**]ダイアログから、ラベルとそれに対応する入力要素を追加します。 9. ページ上にカーソルを置くと、要素の配置を選択することができます。マウスを乗せると、緑色のツールチップが表示され始め、要素の配置場所を示します。 **情報：**ツールチップには、どの要素がどこに配置されているかという情報が表示されます。ツールチップのフォーマットは、 "Add \\ \"![Screenshot\_2019-11-21\_at\_4.53.10\_PM.png](/files/Sni3oIXM0to95BcfHv5f) 10. 要素を追加したい箇所をクリックします。 **注：**既存の要素に対して、ページ上の任意の場所（前、後、内側）に要素を配置することができます。これらのオプションは、カーソルを置いている要素の種類と追加する要素に応じて表示されます。 11. 「Label」要素と「Input「要素をウェブページ上に配置したら、次はそのプロパティと属性を変更します。そのためには、「Label」要素をクリックします。\ \[要素の追加]ダイアログが表示されます。 12. \[**一般**]タブを開き、\[**テキスト**]欄にラベル名を入力します。 13. フォームのフィールドの内容をどこに送信するかを設定するには、\[**共通属性**]セクションに移動して、\[**アクション**]フィールドに有効なURLを入力します。
14. アクション属性とメソッド属性は、親要素のフォームタグをクリックしたときのみ表示されます。 15. データをサーバーに送信する方法を設定するには、\[**共通属性**]セクションに移動し、\[**メソッド**]プルダウンから目的のメソッドを指定します。 16. \[**完了**]をクリックして、変更内容を保存します。 17. 同様に、「Input」要素も設定することができます。 **注：**フィールドを必須にするには、\[**共通属性**]セクションにある\[**要求**]属性を有効にします。 18. 次に、フロントエンドとバックエンドの通信を行うようにします。そのためには、バックエンドのコードが整備されている必要があります。 **注：**AJAXフォームの場合、ウィジェットのコンポーネントを使用できますが、ネイティブブラウザのロジックが動作しないため、フロントエンドとバックエンドのロジックを自分で処理する必要があります。\[**コードの編集**] VWOエディターでカスタムコードとして設定することをお勧めします。 ### **シナリオ例 - 2** ***「ウィジェットを使ってゼロから新しいフォームを追加する」*** このシナリオの例を実現するために、VWOエディターを使用してフォームウィジェットを追加します。ウェブページにフォームを追加するには、次の手順を実行します。 **手順** 1. お客様のVWOアカウントにログインします。 2. \[**テスト**]→\[**A/Bテスト**]に進みます。 3. \[**テストを作成**]をクリックして、新しいA/Bテストキャンペーンを作成します。 4. \[**テスト対象のページのURLを入力する**]フィールドに、テストするウェブページのURLを入力します。 **注：**キャンペーンにURLを含める、または除外するには、\[URLs]フィールドの横にある\[**詳細設定**]タブをクリックします。このタブでは、全部または特定のワイルドカードを含む広範なURLや特定のURLを含む高度なパターンマッチオプションを定義することもできます。様々なURLパターンの使用については、「[VWOにおけるURLパターンの使い方](https://help.vwo.com/hc/en-us/articles/360021127714)」をご参照ください。 5. \[**テストする仮説**]のプルダウンから、作業したい仮説を選択します。 これはオプションのステップです。\ **注：**まだ仮説がない場合、または新しい仮説を作成したい場合は、仮説プルダウンの下部にある \[仮説を新規作成] オプションをクリックすることで可能になります。仮説の詳細については、「[VWOにおける仮説](https://help.vwo.com/hc/en-us/articles/360019569694)」を参照してください。 6. \[**次へ**]をクリックします。\ VWOエディターにテストページが表示されます。 7. ここで、VWOエディターを使用して、新しいバナーウィジェットをウェブページに追加する必要があります。 8. ウィジェットを追加するには、\[**追加**]ボタンをクリックします。 9. \[追加]ダイアログに\[**ウィジェット**]タブが表示されます。\[**モーダル**]セクションから、\[**フォームポップアップ**]をクリックします。\ フォームポップアップウィジェットがあなたのウェブページに追加されます。![Screenshot\_2019-11-21\_at\_4.54.15\_PM.png](/files/rjc38gjK3znc2fZNrpm2) 10. 次に、フォームの内容を修正します。そのためには、フォーム上の修正したい内容をクリックします。例えば、\[**見出しを追加**]をクリックするとします。\ バナーを設定するダイアログが表示されます。 11. ダイアログで、\[**要素の編集**]オプションをクリックします。\ \[要素の編集]ダイアログが表示されます。 12. \[**一般**]タブを開き、テキストフィールドに「Please drop us your query, we'll get in contact with you soon」と入力する。 13. \[**完了**]をクリックします。 14. 同様に、フォームウィジェットに存在するすべての要素を要件に応じて変更することができます。 **注：**\[**要素を追加**]ダイアログを使用して、フォームにさらに要素を追加することもできます。この方法については、「[VWOエディターを使ったウェブページへの要素の追加](https://help.vwo.com/hc/en-us/articles/360035250274)」を参照してください。 **事後要件** 上記の手順をすべて実行すると、次のようなフォームになります。 ![](/files/i6c7s1osCDvB0aimX548)