Help Center
    Help Center
  1. Creating your site
  2. Advanced features
  3. CMS
  4. Advanced CMS features
    5. CMS: Managing Collection Content from Your Live Site

CMS: Managing Collection Content from Your Live Site

18 min read
Create a page that allows people to add, edit or delete CMS (Content Management System) collection content from your live site. One useful scenario for this is for visitors submitting text and images to a Members Area. Another example, illustrated below, is a form on a property site. This one allows visitors to add, delete or update entries.
Using the Studio Editor?
We've simplified this process in the Studio Editor where you can add a dynamic manage item page. The dynamic manage page includes a pre-built page that allows collaborators and site members to manage collection content from your live site.
A screenshot of a form where visitors can add, delete, or update entries.
Before you begin:

Step 1 | Create a form with input elements

Build custom forms for your site's specific needs by adding input elements to your site. The elements used to make up your form accept content such as text and file uploads from visitors. Your collection saves the content submitted through the form. Learn more about creating a form with user input elements.
Wix Editor
Studio Editor
  1. Go to your editor.
  2. Go to the page or section where you want to create a custom form. 
  3. Click Add Elements  on the left side of the editor.
  4. Click Input.
  5. Click the type of input element you want to add.
  6. Click and drag the relevant input element onto the page. 
  1. Click the input element you added and select Settings.
  2. Fill out the settings. The options vary depending on which input element you selected.
  3. (Optional) Click the Layout  and Design icons to change the layout or design.
  4. Repeat steps 3-9 above to add as many input elements as your form needs. 

Step 2 | Connect the input elements to your collection

There are two different settings that affect what users can do and who can do it. One is the dataset mode in the dataset, the other is Permissions & Privacy in the collection. 

The dataset mode determines what actions can be done between the connected elements and your collection. The collection's Permissions & Privacy settings determine who can view or edit the collection content. Learn more about the dataset modes and collection permissions.
Wix Editor
Studio Editor
  1. In your editor, click any of the input elements you just added. 
  2. Click the Connect to CMS icon . 
  3. Connect to a dataset that binds to the collection where you will store the submissions: 
    • If you do not have a dataset on the page: 
      1. Click + Add a Dataset on the right. Then choose the collection to connect, enter the dataset name and click Create.  
      2. Click Collect content.
    • If you already have a dataset on the page:
      1. Click Collect content. 
      2. Click the Choose a dataset drop-down and select the relevant dataset. Alternatively, click Add a Dataset to create a new one, then choose the collection to connect, enter the dataset name and click Create.
  4. Connect the input element to an existing or new collection field:
    • Existing: Click the Value connects to drop-down and select the field you want the input to submit to. 
    • New field: Click the Value connects to drop-down and select Add new field:
      1. Enter a Field Name for the new collection field. 
      2. Select the Field Type from the drop-down. The field type determines what kind of data you can store in the field. 
      3. Click Add. 
  1. (If necessary) Click the Connect list items toggle to choose where to manage the element's choices:
    • Enabled: Use a field from another CMS collection for the choices. Connect the relevant dataset and choose the fields to use from the Labels and values connect to drop-down.
    • Disabled: Click Manage Choices to create the choices for the element separate from the CMS. 
  1. Repeat these steps for each of your custom form's input elements. 
  2. In the panel on the right, click Dataset Settings under the first Choose a dataset drop-down. This dataset connects to the collection you will store the submissions in. 
  1. Click the Dataset mode drop-down and select Read & Write.

Step 3 | Add and set up an interactive button

Add a button that visitors can click to interact with your collection data. Then customize the button and connect it to the same dataset as your input elements. 

You can add a submit button to store the user input values in your collection. In the dataset, set the Click action connects to drop-down to "Submit" so the button sends the inputs to your collection. You can choose from several different click actions to create interactive buttons (e.g. apply filters, new, or delete).
Wix Editor
Studio Editor
  1. Click Add Elements  on the left side of the editor.
  2. Click Button.
  3. Click and drag the button you want to use as your submit button onto the page. You can use any of the following button types: Themed Buttons, Text & Icon Buttons, Icon Buttons, or Image Buttons.
    Tip: Alternatively, you can add an image and use it as your submit button. 
A screenshot of adding a button to use as the submit button.
  1. Click Change Text & Icon and enter the text you want to display on the button (e.g. "Submit"). 
  2. Click the Connect to CMS icon .
  3. Click the Choose a dataset drop-down and select the dataset connected to your submissions collection. 
  4. Click the Click action connects to drop-down and select Submit. 
  5. (Optional) Add success and failure messages that appear when submissions are submitted successfully or unsuccessfully:
    1. Click + Add success message then click + Add failure message.
    2. Click and drag both messages to the place where you want them to appear. They can overlap because the messages do not display at the same time.
    3. Click Edit Text on each message to edit the messages.
  6. Select the button and click the Connect to CMS icon . Then click the When successful, navigate to drop-down, and select an option:
    • Stay on this page: The visitor stays on the same page after submitting the form.
    • A link: The visitor is redirected to another page after submitting the form. Click Choose under Choose a link and set up the link. 
  1. Click the button and select the Design icon  to customize the appearance of your submit button. 

Step 4 | Set the collection permissions

Your collection's permissions & privacy settings determine who can view, add, delete, and update the items in the collection. Set custom permissions to choose who you want to have access to editing the collection. You can fine-tune these settings, for example, if you want to restrict edit access to site members. 

Learn more about changing your collection permissions in the CMS.

To set the collection permissions:

  1. Go to CMS in your site's dashboard. Alternatively, you can click CMS  in your editor, then click Your Collections. 
  2. Click the collection that you want to manage from your live site.
  3. Click More Actions at the top and select Permissions & privacy.
  4. Click the What type of content will you store in this collection? drop-down and choose an option:
    • Custom: Define who can view, add, delete, and update content from the relevant drop-downs. 
    • Member-generated: Allow anyone to view content, site members to add content, and site member authors to delete or update content. Click the relevant drop-downs to adjust permissions. 
  5. Click Save.
A screenshot of setting Member-generated permissions in a CMS collection.

Step 5 | Add a table to select and edit specific items

With a custom form complete, you and your site visitors can add content to your collection. To select and edit specific items from your live website, you can add a table.
On the live site, items will appear on your table as content is added. Edit the content for each item using the custom form. You can connect buttons to dataset click actions for more functionality like adding and deleting items from your collection. You can also add buttons to navigate between items by setting them to show the 'next item' or 'previous item'.
A screenshot of a form that includes a table for selecting collection items to update or delete.
Note:
Instead of using a table, you can set up buttons to navigate between items. To do this, use the 'Previous Item' and 'Next item' under the Click action connects to drop-down of your dataset. You can then edit the content that appears in your form and click Submit to update that item. You can also set up buttons to create a new entry or delete an existing one.

To add a table:

Wix Editor
Studio Editor
  1. Go to your editor.
  2. Click Add Elements  on the left side of the editor.
  3. Click List.
  4. Click Tables.
  5. Click and drag the table you want to use onto the page. 
A screenshot of adding a table in the Wix Editor.
  1. Click the Connect to CMS icon .
  2. Click the Choose a dataset drop-down and select the dataset that your input elements also connect to. 
  3. Click the relevant drop-downs under Connections to choose which collection fields connect to each column. 
  4. Customize your table.
  5. Publish your site if you're ready to make the changes go live.

(Optional) Add a filter to display specific items

To only show content that specific visitors can manage, add a filter to the dataset that includes the Owner (Text) field set to the 'logged in' status. 

Set up filters in your dataset, so your site visitors view specific content. For example, if you have a recipe website, you can set a filter for recipes based on a preferred course, like breakfast, lunch, or dinner. Site visitors can then browse your filtered collection items by using a table.

To add a filter to the dataset:

Wix Editor
Studio Editor
  1. Go to the relevant page in your editor.
  2. Go to the relevant dataset settings:
    1. Click CMS  on the left. 
    2. Click Manage Page Connections.
    3. Click the More Actions icon  next to the relevant dataset and select Dataset settings. 
  3. Click + Add Filter under Filter. 
  4. Click the Field drop-down and select the field you want to apply the filter to. 
  5. Click the Condition drop-down and choose the condition you want to use in the filter. The options vary based on the field type that is being filtered. 
  6. (If necessary) Select the Value source: 
    • Manual entry: Enter the value you want to filter by in the Value field. 
    • Another dataset: Select the dataset and field you want to filter from the relevant drop-downs. 
  7. Click Add Filter. 
A screenshot of adding a filter to a dataset in the Wix Editor.
  1. Publish your site when you are ready to make the changes go live. 
Tip:
You can automate the process of creating an entry on the collection using Velo by Wix. Learn more about building a members area where visitors can view and update their personal profiles at any time.

Did this help?

|

In This Article

  • Step 1 | Create a form with input elements
  • Step 2 | Connect the input elements to your collection
  • Step 3 | Add and set up an interactive button
  • Step 4 | Set the collection permissions
  • Step 5 | Add a table to select and edit specific items
  • (Optional) Add a filter to display specific items

Related Content

CMS: Collection Permissions Overview
CMS: Adding and Setting Up a Dataset
CMS: About User Input Elements
CMS: About Datasets

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched