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)

velo-spi_wix-forms

Retrieves the configuration of your form submission plugin.

Set your form submission configuration in the `return` of the `getConfig()` function. Wix calls this function when you publish your site. 
Changes to the configuration don't take effect until you publish your site.

There are several apps that use forms. To validate form submission for a specific Wix app, configure the custom plugin's config file for that Wix app by defining the relevant namespace field. For example, the `namespace` for the Wix Forms app is `wix.form_app.form`.

### Where to find `getConfig()`
When you [add the Form Submission service plugin](https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-forms/tutorial-form-submission-custom-extension), 
a folder is automatically added to your site. Use the `-config.js` file in the folder to set the default configuration for your 
implementation of the service plugin.

For more information on setting your configuration, see [Tutorial: Form Submission Service Plugin](https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-forms/tutorial-form-submission-custom-extension).

getConfig

Validates a form submission.

Validates a site visitor's form submission and returns any validation violations.

Site visitors can see the validation violations on their forms. For example, notification messages can appear on the screen.

validateSubmission

Fulfilled - Form submission validation violations.

# Introduction
The Form Submission [service plugin](https://support.wix.com/en/article/velo-custom-app-extensions-using-spis) (formerly SPI) allows site owners and collaborators to validate a site visitor's filled form. For example, you can validate whether a correct email is entered into the field.
Site owners and collaborators can either write their own custom validation logic, or integrate with a 3rd-party validations provider.

Wix Forms calls [`validateSubmission()`](https://dev.wix.com/docs/velo/api-reference/wix-forms-v2/service-plugins-spis/form-submission/validate-submission) to validate a site visitor's filled form.
The custom validation plugin code validates the request, and returns any validation violation data in a site visitor's form (using the structure provided by Wix Forms).
If there aren't any validation violations, the function should return an object containing an empty array. Site visitors can see validation violations in their forms. 

## Before you begin

- There are several apps that use forms. To validate form submission for a specific Wix app, configure the service plugin's config file for that Wix app by defining the relevant namespace field. For example, the `namespace` for the Wix Forms app is `wix.form_app.form`.

### To add a service plugin
1. [Add the service plugin to your site](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/integrations/custom-extensions-spis/custom-app-extensions-using-sp-is#step-1-create-a-new-extension-on-your-wix-site).
2. Update the [`getConfig()`](https://www.wix.com/velo/reference/spis/wix-forms/form-submission/getconfig) function in the **-config.js** file that is added to your site during step 1.
3. Update the [`validateSubmission()`](https://dev.wix.com/docs/velo/api-reference/wix-forms-v2/service-plugins-spis/form-submission/validate-submission) function in the **.js** file that is added to your site during step 1.

## Use Cases

With the Validations service plugin you can define the validations for a site form that fit your site's needs. Possible validations include:
 - Field validations: Check if the name contains only alphabetic characters.
 - Prevent duplicate submissions: Check for duplicate submissions based on certain criteria and prevent site visitors from submitting the same form multiple times.
 - Verify fields: Call a local post API call to check if the entered postal code is local.

## Terminology

  | Term | Definition |
  | --- | --- |
  | Submission |Data received when a site visitor submits a form. | 
  | Validation |Process that makes sure the information that the site visitor put into a form is correct and meets certain rules. |  
  | Target |Online interface that allows site visitors to input and submit data. |

FormSubmission

Context

[ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) 3-letter currency code representing the currency used in the request sent from Wix. The response should be returned in the same currency.

currency

string

The identity that describes the identity that triggered this request.

identity

Identity

An array of languages in which the response should be returned. Languages are strings in concatenated [ISO 639-1: 2 Alpha language-code](https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes) and [ISO 3166-1: 2 Alpha country-code](https://en.wikipedia.org/wiki/ISO_3166-1) format, such as "en-US".

languages

A unique identifier of the request. You may print this ID to your logs to help with future debugging and easier correlation with Wix's logs.

requestId

CurrentSubmission

Data extension object that holds users' and apps' fields.

extendedFields

ExtendedFields

ID of the form which the submission belongs to.

formId

The app which the form submissions belong to. For example, the namespace for the Wix Forms app is `wix.form_app.form`. Call [`getSubmission`](https://www.wix.com/velo/reference/wix-forms-v2/submissions/getsubmission) to retrieve the namespace.

namespace

Order details.  

**Note:** This object is only applicable when submitting a form in the Wix Payments app.

orderDetails

OrderDetails

Whether a site owner marked a submission as "seen".

seen

boolean

Status of the submission.

Supported values:
- `PENDING`: A submission is created, but has not yet been recorded in the Wix Forms collection.
- `PAYMENT_WAITING`: A form submission requiring payment is created.
- `PAYMENT_CANCELED`: An order of a form submission is canceled.
- `CONFIRMED`: A submission is recorded in the Wix Forms collection.

status

An object containing information about input fields in a form.

submissions

Submissions

An object containing data extension fields in `key:value` pairs.

namespaces

Namespaces

FormSubmissionConfigResponse

namespaceConfigs

ID of a site visitor who has not logged in to the site. Only provided if `identityType` is `ANONYMOUS_VISITOR`.

anonymousVisitorId

ID of an app. Only provided if `identityType` is `APP`.

appId

ID of a site visitor who has logged in to the site. Only provided if `identityType` is `MEMBER`.

memberId

ID of a Wix user (site owner, contributor, etc.). Only provided if `identityType` is `WIX_USER`.

wixUserId

Type of identity that triggered the request. Possible values are:
+ `UNKNOWN`
+ `ANONYMOUS_VISITOR`
+ `MEMBER`
+ `WIX_USER`
+ `APP`

identityType

NamespaceConfigs

The app which the form submissions belong to:
- Wix Forms: `wix.form_app.form`
- Wix Pricing Plans: `wix.pricing_plans.v1.custom_form`
- Wix Online Programs: `wix.achievements.quizzes.v1.quiz`

Whether to enable the submission validation in your app.

submissionValidationEnabled

`key` is the namespace, and `value` is extended fields data in `struct` format.

key:value

Options

Data for creating a submission.

**Note:** The API automatically takes the data from the `submission` object.

createOptions

Data for updating an existing submission.

updateOptions

Whether to create or update the submission. 

Supported values:
- `CREATE`: Create a submission.
- `UPDATE`: Update an existing submission.

actionType

submission

Submission

ID of the checkout related to submission (only applicable if a form has payments).

checkoutId

itemSubtotal

number

ID of the order related to submission (only applicable if a form has payments).

order_id

`key` is the form field name, and `value` is the data submitted for the given field.

validateSubmission( )