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)

payload

ValidateSubmissionEnvelope

> **Note:** The Form Submission service plugin only works with the Wix Forms app.

Validates a 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, invalid fields are highlighted in red.

import { formSubmissions } from '@wix/forms/service-plugins';

formSubmissions.provideHandlers({

  validateSubmission: async ( payload ) => {
    const {request, metadata} = payload;
        // Use the `request` and `metadata` received from Wix and
        // apply custom logic.
      return {
        // Return your response exactly as documented to integrate with Wix.
        // Return value example:
        errors: [
          {
            errorPath: "first_name",
            params: {},
            errorType: "TYPE_ERROR"
          },
          {
            errorPath: "fiend_list/2",
            params: {},
            custom_error_message: "Bob is not a friend."
          }
        ]
      }
    }
});


Example of an `errors` return value @description:

validateSubmission

ValidateSubmissionResponse

# About the Form Submissions Service Plugin

As a form submission provider, you can integrate with Wix to allow allow site owners to request and use your services on their Wix sites. By integrating your service with Wix, the service validates and submits a site visitor's form.

The integration is done via an app in the Wix App Market and by implementing the Form Submissions [service plugin](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/backend-extensions/service-plugins/about-service-plugin-extensions). After the app is installed on a site, Wix triggers a call to your service whenever a form is submitted on the site.

## Before you begin

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

+ The Form Submission service plugin only works with the Wix Forms app.
+ There are several apps that use forms. To validate form submission for a specific Wix app, configure your app in the [Wix Developers Center](https://dev.wix.com/apps/my-apps) for that Wix app by defining the relevant `namespace` field in the extension. For example, the namespace for the Wix Forms app is `"wix.form_app.form"`.

## Terminology
+ **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.
+ **Form:** Online interface that allows site visitors to input and submit data.

## Get started

Follow these steps to begin implementing your service plugin.

### Choose a framework

You can implement this service plugin with the following [frameworks](https://dev.wix.com/docs/build-apps/get-started/overview/wix-s-development-frameworks):

+ **Wix CLI:** Learn how to [implement a service plugin with the CLI and the SDK](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/backend-extensions/service-plugins/add-service-plugin-extensions-with-the-cli).
+ **Self-hosted:** Learn how to [implement a self-hosted service plugin with the SDK and the Wix Dev Center](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/backend-extensions/add-self-hosted-service-plugin-extensions-with-the-sdk).

### Configure your service plugin

To configure and customize your plugin, you need to provide important information in the service plugin configuration file. You can [configure your plugin in the Wix Dev Center](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/backend-extensions/add-self-hosted-service-plugin-extensions-with-the-sdk#step-1--add-a-service-plugin-extension-to-your-app). For details, see [Form Submissions Extension Configuration](https://dev.wix.com/docs/sdk/backend-modules/forms/service-plugins/form-submissions/extension-config).

### Define handler functions

Use [`formSubmissions.provideHandlers()`](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/backend-extensions/add-self-hosted-service-plugin-extensions-with-the-sdk#step-4--define-handler-functions) to define the following handler functions that implement your custom business logic. Make sure you define all required functions.

| Function                    | Required       |
|-----------------------------|----------------|
| [`validateSubmission()`](https://dev.wix.com/docs/sdk/backend-modules/forms/service-plugins/form-submissions/validate-submission)    | Yes            |

## Code examples

Below is an example for implementing the Form Submissions service plugin in your code.

### CLI: Basic code structure

This is the basic code structure for implementing the Form Submissions service plugin with the Wix CLI:

```js
import { formSubmissions } from '@wix/forms/service-plugins'

formSubmissions.provideHandlers({
  validateSubmission: async (payload) => {

    const { request, metadata } = payload;

    // Add your logic here

  }
});
  
```

### Self-hosted: Basic code structure

This is the basic code structure for implementing a self-hosted Form Submissions service plugin:

```js
import { createClient } from '@wix/sdk';
import { formSubmissions } from '@wix/forms/service-plugins'

const wixClient = createClient({
  auth: {
    appId: <YOUR_APP_ID>,
    publicKey: <YOUR_APP_PUBLIC_KEY>
  },
  modules: { formSubmissions }
});

wixClient.formSubmissions.provideHandlers({
  validateSubmission: async (payload) => {

    const { request, metadata } = payload;

    // Add your logic here

  }
});

// Implement a router to process all requests
express.post('/plugins-and-webhooks/*', (req, res) => {
  wixClient.process(req);
});
  
```

## See also

+ [About Service Plugin Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/backend-extensions/service-plugins/about-service-plugin-extensions)
+ [Add a Service Plugin Extension With the CLI](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/backend-extensions/service-plugins/add-service-plugin-extensions-with-the-cli)
+ [Add a Self-hosted Service Plugin With the SDK](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/backend-extensions/add-self-hosted-service-plugin-extensions-with-the-sdk)


forms_form-submissions

To configure and customize your service plugin, you need to provide important details in the `plugin.json` configuration file.

Form Submissions Extension Config

Extension Config

FormSubmissionSpiExtensionConfig

ActionType

AlternativeUri

Custom URI that Wix uses to call your server for this method. The path-suffix documented in the method will not be appended to this URI.
Must be a secured endpoint beginning with `https://`. For example, `https://www.my-shipping-provider.com/my-shipping-rates`.

absoluteUri

string

Name of the method to create a custom URI for.

For `methodName`, use the name of the method in PascalCase.
For example, for Get Shipping Rates use `GetShippingRates`.

methodName

Context

[ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) 3-letter currency code.

currency

An object that describes the identity that triggered this request.

identity

IdentificationData

instanceId

A string representing a language and region in the format of `"xx-XX"`. First 2 letters represent the language code according to ISO 639-1. This is followed by a dash "-", and then a by 2 capital letters representing the region according to ISO 3166-2. For example, `"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

ExtendedFields

Extended field data. Each key corresponds to the namespace of the app that created the extended fields.
The value of each key is structured according to the schema defined when the extended fields were configured.

You can only access fields for which you have the appropriate permissions.

Learn more about [extended fields](https://dev.wix.com/docs/rest/articles/getting-started/extended-fields).

namespaces

FormSubmission

Date and time the form submission was created.

_createdDate

Date and time the form submission was updated.

_updatedDate

Contact ID of a site visitor who created the submission.

contactId

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

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 `Get Submission` to retrieve the namespace.

namespace

Order details. <br>
<b>Note</b>: This object is only applicable when submittng a form in the Wix Payments app.

orderDetails

OrderDetails

Revision number, which increments by 1 each time the form submission is updated. To prevent conflicting changes, the existing revision must be used when updating a form submission.

revision

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

seen

boolean

Status of the submission.
- `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

SubmissionStatus

Submission values where `key` is the form field and `value` is the data submitted for the given field.

submissions

ID of the visitor that submitted the form.

submitter

Submitter

Deployment URI where the endpoints are called. Wix Forms appends the endpoint path to the deployment URI.
For example, to call the Validate Submission endpoint at `https://my-form-submissions.com/v1/validateSubmission`,
the `deploymentUri` you provide here is `https://my-form-submissions.com/`.

deploymentUri

SpiBaseUri

namespaceConfigs

FormsSubmissionsExtensionNamespaceConfig

The ID of the specific form that will trigger the defined methods when a submission is made.
This field is optional. If not provided, submissions from all forms will trigger the methods.

Targeted namespace, with what submissions should trigger defined methods.

submissionValidationEnabled

ID of a site visitor that has not logged in to the site.

anonymousVisitorId

appId

ID of a site visitor that has logged in to the site.

memberId

ID of a Wix user (site owner, contributor, etc.).

wixUserId

identityType

IdentityType

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).

orderId

Alternate, custom URIs to replace the default URIs for specific service plugin methods.

alternativeUris

Base URI where the methods are called. Wix appends the path to the `baseUri`.
For example, to call the Get Shipping Rates method at `https://my-shipping-provider.com/v1/getRates`, the base URI you provide here is `https://my-shipping-provider.com/`.

baseUri

SubmissionErrorType

SubmissionValidationError

Custom error message. The message is displayed instead of an error type.

customErrorMessage

errorType

Path indicating the source of the error, such as `form.fields.target`.

errorPath

params

applicationId

userId

visitorId

UpdateOptions

currentSubmission

metadata

request

ValidateSubmissionRequest

Data for updating an existing submission.

updateOptions

Whether to create or update the submission.

actionType

submission

List of validation errors. <br>
If there are no validation errors, returns an empty array.