CMS: Adding and Setting Up the Switch Input Element

読了目安: 6分
Allow visitors to toggle a switch and submit a binary response to a Boolean (true or false) collection field. For example, you could use the Switch input element to allow visitors to opt-in to a newsletter from a custom form made up of other input elements
Wixエディター
スタジオエディター
  1. 編集者のところに行ってください。
  2. Add the Switch input element: 
    1. Go to the page where you want visitors to use the Switch input to submit a response.
    2. クリック エレメントの追加  エディターの左側にある
    3. Click Input.
    4. Click Switch
    5. Click and drag the relevant Switch input element onto the page. 
Screenshot of adding the Switch input element in the Wix Editor.
  1. Connect the Switch element to the CMS collection where you will store the submissions:
    1. をクリックする。 CMSへの接続 アイコン  on the Switch element. 
    2. Click the Choose a dataset drop-down and select a dataset that connects to the collection where you will store the submissions.
    3. Click the Toggled 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
    4. Set the dataset mode and collection permissions:
      1. Click Dataset Settings
      2. Click the Dataset mode drop-down and select Write or Read & 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 Switch 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 Switch input element: 
    • クリック 設定 to edit the following: 
      • Field title: Edit the title text that lets visitors know what the switch does. 
      • Value: (Velo only) Enter the component's value property used in your JavaScript code.
      • Field type: Select the checkbox if you want the switch to be toggled on by default. 
    • をクリックする。 レイアウト アイコン  to set the handle placement, size, icon display, and direction. 
    • をクリックする。 Design アイコン  to customize the design for both states: Switch On そして Switch Off
Screenshot of adjusting the Switch element's settings.
  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. 変更を公開する準備ができたら、「公開」をクリックします。 

これは役に立ったか?

|