ヘルプセンター
    ヘルプセンター
  1. サイトの作成
  2. 高度な機能
  3. CMS
  4. ユーザー入力要素をCMSに接続する
    5. CMS: Setting Up a Single Checkbox Input Element

CMS: Setting Up a Single Checkbox Input Element

14分お読みください

Give visitors a way to filter live site items by a boolean (true or false) collection field or submit binary responses with the single Checkbox input element. 

For example, you could set the checkbox to filter an "available" boolean field, so visitors can click to view only items that are available in a repeater or gallery. Or, you could set the checkbox to collect responses and use it to let visitors subscribe to your newsletter. 
ヒント
This article is about setting up the single Checkbox input element. Alternatively, you can use a Multi-Checkbox input element to let visitors filter or submit multiple choices. 
この記事では、その詳細について説明する： 

Using the Checkbox input element to filter content on your live site

Connect your Checkbox input element to the same dataset as your repeater or gallery to filter content. Choose the boolean field (true or false) that the checkbox will filter and set the condition (checked or unchecked). When visitors click the checkbox, the repeater or gallery will show items based on the boolean field value as per the selected condition.
Wixエディター
スタジオエディター
  1. 編集者のところに行ってください。
  2. Add the Checkbox input element: 
    1. Go to the page or section where you want visitors to filter content by a boolean value. 
    2. クリック エレメントの追加  エディターの左側にある
    3. Click Input.
    4. Click Checkboxes. 
    5. Scroll down to the single Checkbox input elements. 
    6. Click and drag the relevant single Checkbox input element onto the page. 
Screenshot of adding a single Checkbox input element in the Wix Editor.
  1. Connect the Checkbox element to the CMS:
    1. をクリックする。 CMSへの接続 アイコン  on the Checkbox element. 
    2. Select Filter content in the Connect Checkbox panel on the right. 
      Tip: If you haven't added a dataset to the page yet, add a dataset first (see the next step) then select Filter content. 
    3. Click the Choose a dataset drop-down and select the same dataset that connects to the elements (e.g. repeater, gallery, table) that you want visitors to filter. 
    4. Click the Filter content by drop-down and choose the boolean field that visitors will use to filter the content.
      Tip: To add a new field to your collection and use it for filtering content, select Add new field, then enter the field name and click Add. You can add values to the field in your CMS collection later. 
    5. をクリックする。 コンディション drop-down and choose an operator:
      • Selected: Show items that have their boolean field marked as checked (set to True). 
      • Is not selected: Show items that do not have their boolean field marked as checked (set to False). 
Screenshot of the CMS connection options for the Checkbox element.
  1. Customize the Checkbox input element: 
    • をクリックする。 設定 アイコン  to edit the following: 
      • Checkbox text: Edit the text that displays next to the checkbox and lets visitors know what the checkbox does. 
      • Value: (Velo only) Enter the component's value property used in JavaScript code.
      • Field type: Disregard the Required and Checked by default settings, which are only relevant if you set the Checkbox to collect content.
      • Link Settings: Enable the toggle to add linked text next to the Checkbox text. Enter the Link text and set the link destination. 
    • をクリックする。 レイアウト アイコン  to set the checkbox size, spacing and alignment. 
    • をクリックする。 Design アイコン  to choose a preset design and customize it further. 
    • をクリックする。 Animation アイコン  to choose and customize an animation effect. 
Screenshot of the Checkbox input element settings.
  1. Click Preview to test your Checkbox element.
  2. 変更を公開する準備ができたら、「公開」をクリックします。 

Using the Checkbox input element to collect responses from site visitors

Set the Checkbox input element to collect content and connect it to a dataset that binds to a collection where you will store the responses. When visitors click your submit button, their response is saved to a boolean (true or false) field in your collection. 
Wixエディター
スタジオエディター
  1. 編集者のところに行ってください。
  2. Add the single Checkbox input element: 
    1. Go to the page or section where you want visitors to use the Checkbox element. 
    2. クリック エレメントの追加  エディターの左側にある
    3. Click Input.
    4. Click Checkboxes. 
    5. Scroll down to the single Checkbox input elements. 
    6. Click and drag the relevant single Checkbox input element onto the page. 
Screenshot of adding a single Checkbox input element in the Wix Editor.
  1. Connect the Checkbox element to the CMS collection where you will store the submissions:
    1. をクリックする。 CMSへの接続 アイコン  on the Checkbox element. 
    2. Select Collect content in the Connect Checkbox panel on the right. 
      Tip: If you haven't added a dataset to the page yet, add a dataset first (see the next step) then select Collect content. 
    3. Click the Choose a dataset drop-down and select a dataset that connects to the collection where you will store the submissions.
    4. Click the Checked state connects to drop-down and choose the boolean field in which you will store the submissions.
      Tip: To add a new field for storing submissions, select Add new field, then enter the field name and click Add. 
    5. Set the dataset mode and collection permissions:
      1. Click Dataset Settings. 
      2. Click the Dataset mode drop-down and select Write.
      3. (If necessary) Click the permissions type next to Collection Permissions and select Form submissions in the 1st drop-down. You can click the additional drop-downs to refine the permissions. Click Save once you're done setting the permissions. 
      4. Click Back to Checkbox element at the top of the Dataset Settings panel. 
Screenshot of setting the collection permissions and dataset mode in the Wix Editor.
  1. Customize the Checkbox input element: 
    • をクリックする。 設定 アイコン  to edit the following: 
      • Checkbox text: Edit the text that displays next to the checkbox and lets visitors know what the checkbox does. 
      • Value: (Velo only) Enter the component's value property used in JavaScript code.
      • Field type: Select the relevant options:
        • Required: Make it mandatory that visitors check the box before they can send their submissions. 
        • Checked by default: Automatically have the checkbox selected when the page loads. 
      • Link Settings: Enable the toggle to add linked text next to the Checkbox text. Enter the Link text  (e.g. "Terms and conditions") and set the link destination. 
    • をクリックする。 レイアウト アイコン  to set the checkbox size, spacing and alignment. 
    • をクリックする。 Design アイコン  to choose a preset design and customize it further. 
    • をクリックする。 Animation アイコン  to choose and customize an animation effect. 
Screenshot of the settings used for a Checkbox input element.
  1. Add a 'Submit' button for visitors to click to send their submissions. 
Screenshot of adding a Submit button.
  1. Click Preview to test your connections. 
  2. 変更を公開する準備ができたら、「公開」をクリックします。 

よくある質問

Click a question below to learn more about the Checkbox input element.

これは役に立ったか？

|

この記事では

  • Using the Checkbox input element to filter content on your live site
  • Using the Checkbox input element to collect responses from site visitors
  • よくある質問

関連コンテンツ

CMS：ユーザー入力要素について
CMS：データセットについて
CMS：テキスト入力の追加と設定
CMS: Troubleshooting User Input Element Issues
CMS：コレクションに送信する入力要素を持つカスタムフォームの作成

プロを雇う

あなたのサイトの目標達成をお手伝いするWixパートナーをご紹介します。
マッチング