Get to know our frameworks

Select an app template built on your preferred framework.

Build apps on our native app editor. Use drag and drop elements, Velo code and Wix APIs to develop custom features.

Streamline your app development process with the Wix CLI. Get a familiar developer experience with minimal setup and configuration.

Take full control over your app's tech stack, deployment, and hosting.

App templates

Wix Blocks templates

Wix CLI templates

Self-hosted templates

Kickstart your app development with templates built on your preferred Wix developer tool. Browse templates for practical foundation and get to know the Wix ecosystem.

Wix App Templates for Developers

This example apps can be used as a starting point for building your own app, for concrete examples of how to use Wix framework, or for inspiration.

Choose a template.<0 />Build an app.

Browse by:

How to build it step by step:

This template is built with:

Read how this template was built, step by step.

How we built this template

Deployment instructions:

Choose a package manager and run the command in your terminal.

Copy command

Before you get started, make sure you have the following:

Prerequisite steps

Get started with Wix CLI

Begin by setting up your Next.js project with your preferred hosting platform.

Select your hosting service

Start the deployment flow and set up your template repo on Netlify. After you finish set up, come back here and add your Netlify custom domain.

Copy the code from our Git repo to deploy your app on any platform that supports Next.js.

Start the deployment flow and set up your template repo on Vercel. After you finish set up, come back here and add your Vercel generated URL.

Add the base URL and give your app a name.

App details

Go to the app dashboard and test your app to ensure a smooth integration within the Wix ecosystem. <0>Learn more about app checks and testing</0>

Define your environment

Terminal

Related templates

Note

Warning

Your app name will be used as the namespace suffix.

Name your app to generate a namespace. This lets you refer to your app in code later on.

Go Headless

Build Apps

Client

API Preview

Ricos

Develop Websites

REST

Velo

GraphQL (Alpha)

eventId

string

options

AddControlOptions

import { forms } from 'wix-events.v2';

async function addControl(eventId, options) {
  try {
    const result = await forms.addControl(eventId, options);
    return result;
  } catch (error) {
    console.error(error);
    // Handle the error
  }
}


addControl example for dashboard page code

import { forms } from 'wix-events.v2';
import { webMethod, Permissions } from 'wix-web-module';
import { elevate } from 'wix-auth';

const elevatedAddControl = elevate(forms.addControl);

export const addControl = webMethod(
  Permissions.Anyone,
  async (eventId, options) => {
    try {
      const result = await elevatedAddControl(eventId, options);
      return result;
    } catch (error) {
      console.error(error);
      // Handle the error
    }
  }
);


addControl example for exporting from backend code

addControl

AddControlResponse

identifiers

DeleteControlIdentifiers

Deletes an input control from the draft form.

import { forms } from 'wix-events.v2';

async function deleteControl(identifiers) {
  try {
    const result = await forms.deleteControl(identifiers);
    return result;
  } catch (error) {
    console.error(error);
    // Handle the error
  }
}


deleteControl example for dashboard page code

import { forms } from 'wix-events.v2';
import { webMethod, Permissions } from 'wix-web-module';
import { elevate } from 'wix-auth';

const elevatedDeleteControl = elevate(forms.deleteControl);

export const deleteControl = webMethod(
  Permissions.Anyone,
  async (identifiers) => {
    try {
      const result = await elevatedDeleteControl(identifiers);
      return result;
    } catch (error) {
      console.error(error);
      // Handle the error
    }
  }
);


deleteControl example for exporting from backend code

deleteControl

DeleteControlResponse

import { forms } from 'wix-events.v2';

async function discardDraft(eventId) {
  try {
    const result = await forms.discardDraft(eventId);
    return result;
  } catch (error) {
    console.error(error);
    // Handle the error
  }
}


discardDraft example for dashboard page code

import { forms } from 'wix-events.v2';
import { webMethod, Permissions } from 'wix-web-module';
import { elevate } from 'wix-auth';

const elevatedDiscardDraft = elevate(forms.discardDraft);

export const discardDraft = webMethod(
  Permissions.Anyone,
  async (eventId) => {
    try {
      const result = await elevatedDiscardDraft(eventId);
      return result;
    } catch (error) {
      console.error(error);
      // Handle the error
    }
  }
);


discardDraft example for exporting from backend code

discardDraft

void

GetFormOptions

Retrieves an event registration form (both the draft and published versions).

import { forms } from 'wix-events.v2';

async function getForm(eventId, options) {
  try {
    const result = await forms.getForm(eventId, options);
    return result;
  } catch (error) {
    console.error(error);
    // Handle the error
  }
}


getForm example

import { forms } from 'wix-events.v2';
import { webMethod, Permissions } from 'wix-web-module';

export const getForm = webMethod(
  Permissions.Anyone,
  async (eventId, options) => {
    try {
      const result = await forms.getForm(eventId, options);
      return result;
    } catch (error) {
      console.error(error);
      // Handle the error
    }
  }
);


getForm example for exporting from backend code

getForm

Form

Currently published event form.
Published form is visible to site visitors.

import { forms } from 'wix-events.v2';

async function publishDraft(eventId) {
  try {
    const result = await forms.publishDraft(eventId);
    return result;
  } catch (error) {
    console.error(error);
    // Handle the error
  }
}


publishDraft example for dashboard page code

import { forms } from 'wix-events.v2';
import { webMethod, Permissions } from 'wix-web-module';
import { elevate } from 'wix-auth';

const elevatedPublishDraft = elevate(forms.publishDraft);

export const publishDraft = webMethod(
  Permissions.Anyone,
  async (eventId) => {
    try {
      const result = await elevatedPublishDraft(eventId);
      return result;
    } catch (error) {
      console.error(error);
      // Handle the error
    }
  }
);


publishDraft example for exporting from backend code

publishDraft

PublishDraftResponse

UpdateControlIdentifiers

UpdateControlOptions

Updates an existing input control in the draft form.

import { forms } from 'wix-events.v2';

async function updateControl(identifiers, options) {
  try {
    const result = await forms.updateControl(identifiers, options);
    return result;
  } catch (error) {
    console.error(error);
    // Handle the error
  }
}


updateControl example for dashboard page code

import { forms } from 'wix-events.v2';
import { webMethod, Permissions } from 'wix-web-module';
import { elevate } from 'wix-auth';

const elevatedUpdateControl = elevate(forms.updateControl);

export const updateControl = webMethod(
  Permissions.Anyone,
  async (identifiers, options) => {
    try {
      const result = await elevatedUpdateControl(identifiers, options);
      return result;
    } catch (error) {
      console.error(error);
      // Handle the error
    }
  }
);


updateControl example for exporting from backend code

updateControl

UpdateControlResponse

UpdateMessagesOptions

Updates draft form messages, as displayed in the Wix UI before, during, and after the registration flow.
Configurable messages include form titles, response labels, "thank you" messages, and call-to-action texts.

import { forms } from 'wix-events.v2';

async function updateMessages(eventId, options) {
  try {
    const result = await forms.updateMessages(eventId, options);
    return result;
  } catch (error) {
    console.error(error);
    // Handle the error
  }
}


updateMessages example for dashboard page code

import { forms } from 'wix-events.v2';
import { webMethod, Permissions } from 'wix-web-module';
import { elevate } from 'wix-auth';

const elevatedUpdateMessages = elevate(forms.updateMessages);

export const updateMessages = webMethod(
  Permissions.Anyone,
  async (eventId, options) => {
    try {
      const result = await elevatedUpdateMessages(eventId, options);
      return result;
    } catch (error) {
      console.error(error);
      // Handle the error
    }
  }
);


updateMessages example for exporting from backend code

updateMessages

UpdateMessagesResponse

---
title: Introduction
---
# Introduction

With the Forms API, you can customize a registration form for site visitors to fill out with their contact details and other relevant information. The form defines which elements are rendered on the site page during the registration process (RSVP or checkout).    

To build a registration form you need to use `controls` (blocks), each of which may contain multiple field inputs. For example, the `address` control may include inputs for street address, city, state, country, and zip code. By default, `name` and `email` controls are already included in the form and they can't be removed.    

You can also include the following additional controls:

- `phone`
- `address`
- `date`
- `additionalGuests`
- `dropdown`
- `checkBox`
- `text`
- `radioButton`

Each event has a published registration form by default which automatically updates when calling one of the API functions. The form becomes a draft and you can publish it by calling the `publishDraft` function.

The Forms API allows you to:  

- Add, delete, update controls with relevant fields on the form.
- Publish changes or discard them in a draft form.
- Update messages displayed on the form.
- Get information about the form.

## Before you begin

It’s important to note the following points before starting to code:  

- Install the **Wix Events & Tickets** app from [Wix App Market](https://www.wix.com/app-market/wix-events?referral=category&appIndex=5&referralTag=booking--events).
- To use the Forms API, import `{ forms }` from the `wix-events.v2` module:

```javascript
import { forms } from 'wix-events.v2';
```

## Terminology

- **Registration form**: An interface provided by an organization, website, or service to collect essential information from individuals who wish to sign up, enroll, or participate in an event, program, service, or membership.
- **Event**: A gathering organized by an individual or business for a group of people.

velo-deps_wix-events.v2_forms

additionalGuests

Single-line or full address input control.

address

Multiple-choice checkbox style input control.

checkbox

date

Single-choice dropdown style input control.

dropdown

phone

Single-choice radio button style input control.

radioButton

text

form

AdditionalGuestsControl

Additional guests control labels for each input.

labels

Labels

maxGuests

number

Whether individual guest names are required.

namesMandatory

boolean

AddressControl

Whether address is multi-line (consisting of multiple fields such as country, city, postal code). When false, address is single-line.

full

AddressControlLabels

mandatory

addressLine

city

country

postalCode

streetAddress

subdivision

CheckboxControl

label

Whether at least one checkbox is required.

Predefined options guests can choose from.

CheckoutFormMessages

Confirmation messages shown after checkout.

confirmation

ResponseConfirmation

submitActionLabel

title

DateControl

DropdownControl

defaultOptionSelection

OptionSelection

EmailControl

controls

messages

FormMessages

checkout

Messages shown when event registration is closed.

registrationClosed

RegistrationClosedMessages

rsvp

RsvpFormMessages

Messages shown when event tickets are unavailable.

ticketsUnavailable

TicketsUnavailableMessages

Input

Additional labels for multi-valued fields such as address.

additionalLabels

array

Preselected option.
Currently only applicable for dropdown.

Maximum number of accepted characters (relevant for text fields).

maxLength

The maximum number of accepted values for array input.
**Note:** Only applicable for `TEXT_ARRAY` input fields.

maxSize

name

Predefined choice options for fields, such as dropdown.

Type which determines field format.
Used to validate submitted response.

type

ValueType

InputControl

deleted

inputs

Field controls are sorted by this value in ascending order.

orderIndex

Whether the control is mandatory (such as `name` & `email`).
When `true`, only the label can be changed.

system

Field control type. Possible values:
- `INPUT`: Single text value field.
- `TEXTAREA`: Single text value field with multiple lines.
- `DROPDOWN`: Single-choice field with predefined values.
- `RADIO`: Single-choice field with predefined values.
- `CHECKBOX`: Multiple-choice field with predefined values.
- `NAME`: Fields for entering first and last names.
- `GUEST_CONTROL`: Fields for additional guests and their respective names.
- `ADDRESS_SHORT`: Single-line address field.
- `ADDRESS_FULL`: Full address field with multiple lines.
- `DATE`: Fields for entering year, month, and day.

addControl( )