CMS: Adding and Setting Up the Switch Input Element

6 min read
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 Editor
Studio Editor
  1. Go to your editor.
  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. Click Add Elements  on the left side of the editor.
    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. Click the Connect to CMS icon  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: 
    • Click Settings 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. 
    • Click the Layout icon  to set the handle placement, size, icon display, and direction. 
    • Click the Design icon  to customize the design for both states: Switch On and 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. Click Publish if you are ready to make the changes go live. 

Did this help?

|