Wix Studio エディタ:フォームを追加・カスタマイズする

読了時間:11分
クライアントのサイトに合わせ、カスタマイズ可能なレイアウトとスタイルで個性的なフォームを作成しましょう。フォームを作成すると、フォームビルダーが Wix Studio エディタ内で直接開きます。複数選択、チェックボックス、ドロップダウンなど、あらゆるタイプの質問に合った項目を追加できます。新しいレイアウトオプションを使用して、フォームのカラム(列)、タイトル、セクションを作成することもできます。
フォームの作成が完了すると、Wix Studio エディタ内で、プリインストールされたフォームテンプレートとともに、選択したサイトの任意のページに追加できるようになります。
カスタマイズ可能な新しい項目を備えた Wix Studio エディタ内の新しいフォームビルダーのスクリーンショット。
この記事では、以下の項目について説明します:

フォームを作成する

ドラッグアンドドロップのフォームビルダーを使用して、Wix Studio エディタ内で直接フォームを作成します。エディタ内でフォームを作成すると、サイト外に移動したり、場所の感覚を失うことなく、フォームとサイトを一緒に作成することができます。
注意:
Wix Studio エディタで利用できるフォームのほとんどは、新 Wix フォームです。ただし、旧 Wix フォームを使用したい場合は、プリセットの注文フォームまたは寄付フォームを追加できます。

フォームを作成する方法:

  1. エディタ左側で「要素を追加 をクリックします。
  2. フォーム」をクリックします。
  3. 新しいフォームを作成」をクリックし、フォームをページにドラッグします。お問い合わせフォームや購読フォーム、注文フォームなど、プリインストールされたテンプレートからフォームを選択することもできます。
  4. エディタでフォームをクリックし、「フォームを編集」をクリックしてフォームビルダーを開きます。
フォーム上部の「フォームを編集」パネルのスクリーンショット。
注文フォームに関する注意事項:
注文フォームは以前のバージョンの Wix フォームを使用して作成されているため、フォーム項目をカスタマイズするオプションが異なります。注文フォームを作成している場合、こちらの手順をご覧ください。
  1. フォームビルダーの左上にある「編集」アイコン  をクリックして、フォームに名前を付けます。
    注意:フォーム名は識別しやすくするために、内部でのみ表示されます。
  2. フォーム項目を追加」下でフォーム項目を選択します。項目の種類は次の通りです:
    • 連絡先項目Wix 連絡先で個人データを収集して、保存する項目を追加します。
    • 基本項目:複数選択、チェックボックス、ドロップダウン、回答ボックスなどのパーツを追加します。
    • 日付項目:プライベート予約や時間に制約のある質問用に日時の項目を追加します。
    • レイアウトパーツ:ヘッダーまたはテキストパーツを追加して、フォームを整理したり、項目についてさらに説明したりします。
注意:
すべてのフォームには既にスパムフィルターが統合されているため、新 Wix フォームには CAPTCHA 項目がありません。スパムフィルターについての詳細はこちら
  1. (オプション)項目をクリックしてさらにカスタマイズします:
    • 項目設定を更新する。
    • 必須項目にする。
    • 項目を削除する。
    • 項目のサイズを変更して複数列のフォームを作成する。フォームにカラムを追加する方法については、この記事の「よくある質問」セクションをご覧ください。
その他の設定オプションが選択された複数選択項目のスクリーンショット。
  1. (オプション)左側で「ルール」または「ページ」をクリックして、フォームに条件付きルールまたは複数のページを追加します:
    • ルール:フォームに条件付きルールを追加します。ルールを使用すると、回答に基づいて情報を収集する方法が改善されます。ある項目に対する訪問者の回答によって、別の項目の表示、非表示、必須、またはオプションが決まります。たとえば、「訪問者が質問 1 でオプション A を選択した場合、質問 2 を非表示にする。オプション B を選択した場合、質問 2 を表示する。」などのルールを追加します。
    • ページ:フォームに複数のページを作成します。これにより、質問や情報が整理されます。
      ヒント:複数のページがある場合、訪問者が「次へ」をクリックしてページ間を移動できるように、各ページに「送信」項目を追加してください。
  2. 右上の「保存する」をクリックします。
重要:
フォームの下部に「送信」項目が追加されていることを確認してください。送信ボタンがない場合、訪問者はフォームを送信することができません。
A screenshot of adding a submit field in the new form builder.

フォームのデザインをカスタマイズする

フォームを作成し、関連する項目とセクションを追加したら、背景色、ボタンのスタイル、フォントなど、ページ上でのフォームの表示方法をカスタマイズします。

フォームのデザインをカスタマイズする方法:

  1. エディタで該当するフォームをクリックします。
  2. 設定」をクリックします。
  3. デザイン」タブをクリックします。
  4. 利用可能なオプションを使用してフォームのデザインをカスタマイズします:
    • フォームの背景:フォームの背景色、枠線の色、太さを選択します。
    • フォームの項目:フォーム項目の色とスタイル、および通常時、ホバー時とエラー時の表示方法を選択します。
    • ヘッダー・段落:フォームテキストのフォントと色を選択します。
    • ボタン:ホバー時の表示方法など、フォームボタンをデザインします。
    • 「送信」ボタン:送信ボタンのスタイルと色をデザインします。
ボタンの色のオプションが選択されたフォームの「デザイン」タブのスクリーンショット。
注意:
以前のバージョンの Wix フォーム(注文フォームなど)をカスタマイズする場合は、「デザイン」アイコン  をクリックします。

A screenshot of the settings panel of the previous version of Wix Forms with the paintbrush icon selected.

サイトに既存のフォームを追加する

Wix Studio エディタで作成されたすべてのフォームは、そのフォームの回答データとともにサイトのダッシュボードに保存されます。サイトに新しいフォームを追加する場合は、既存のフォームとプリセットのフォームテンプレートから選択できます。

サイトに既存のフォームを追加する方法:

  1. エディタ左側で「要素を追加 をクリックします。
  2. フォーム」をクリックします。
  3. 既存のフォームを追加」をクリックします。
  4. エディタで新しいフォーム要素をクリックします。
  5. 設定」をクリックします。
Wix Studio の「フォームを追加」要素のスクリーンショット。
  1. フォーム」タブをクリックします。
  2. サイトで作成されたすべてのフォームから、表示するフォームを選択します。フォームの数が多い場合は、検索バーを使用して適切なフォームを見つけることができます。
  3. (オプション)「レイアウト」タブと「デザイン」タブをクリックして、フォームをさらにカスタマイズします。
「お問い合わせ」フォームが選択され、サイト上のすべてのフォームリストが表示されたエディタ内のフォーム設定パネルのスクリーンショット
ヒント:
フォームはいつでも別のフォームに切り替えることができます。フォームの上部にある「設定」をクリックし、「フォーム」タブで別のフォームを選択します。ページのレイアウトやデザインを損なうことなく、以前のフォームが新しいフォームに自動的に置き換えられます。

フォームの回答を確認する

サイトのダッシュボードから、サイトの各フォームの最も詳細な回答データにアクセスできます。特定のフォームのデータをすばやく確認したい場合は、フォームビルダー内の「回答内容」タブをクリックして回答を確認することもできます。

フォームの回答を確認する方法:

  1. サイトダッシュボードの「フォーム・回答内容」にアクセスします。
  2. フォーム」タブでは、作成したすべてのフォームと、各フォームの提出回数を確認できます。
    詳細を表示する方法:
    1. フォーム横の「その他のアクション」アイコン  をクリックします。
    2. 送信されたフォームを表示」をクリックします。
ヒント:
すべてのフォームの回答は表に表示されます。情報は、追加した項目に応じて列に分けられます。正確な送信日も確認できます。
ヨガフォームの回答集計表のスクリーンショット。

よくある質問

Wix Studio エディタでのフォームの追加に関する詳細については、以下の質問をクリックしてください。

お役に立ちましたか?

|