> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Tutorial: Form Submission Service Plugin

## Article: Tutorial: Form Submission Custom Extension

## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-forms/tutorial-form-submission-service-plugin.md

## Article Content:

# Tutorial: Form Submission Service Plugin

Wix Service Plugins (formerly SPIs and custom extensions) allow you to implement custom logic to change how your site behaves and displays using Velo SPIs. For example, when you set up a form from the Wix Form app, there are a small number of validations to choose from. The form submission service plugin allows you to implement your own submission validations and options using code. You can also connect your site to form validation providers not currently supported by Wix. Any violations to these validations can be displayed on the form.    

You can manage service plugins from your site's dashboard, and they behave just like the ones Wix already supports. Learn more about using [service plugins](https://support.wix.com/en/article/velo-custom-app-extensions-using-spis).
  
With the Form Submission service plugin you can define the submission validations for a 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.

## About this tutorial

This tutorial explains how to set up and implement a form submission plugin on your site using Velo. We demonstrate how to validate your form submission by checking whether a site visitor entered a name correctly in alphabetical characters only.   

The process has 3 steps:

1. Create a new form submission validation plugin on our site.
1. Implement our plugin with custom code.
1. Deploy the plugin.

## Step 1: Create a new form submission plugin

The first step in setting up your new plugin is to add it to your site. This process creates a new folder in the **Service Plugins** section of the Velo sidebar, which contains the files for your code.

1. [Add the Wix Forms app](https://www.wix.com/app-market/wix-forms) to your site.
1. Enable coding. If necessary, click ![Code icon](https://github.com/wix-incubator/wix-code-docs/assets/50321691/2c41d3df-930f-4e0f-966f-038742adceed) and then **Start Coding**. 
1. Go to the **Service Plugins** section by clicking **Public & Backend**. 
1. Hover over **Service Plugins** and click  ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/11fda387-da5a-430a-ada3-46def885b67f/2022/03/02/65d645bd-dee9-40dc-9f91-c44b06d72492/289e91de-47c5-429c-b61d-67bd8d4fd1ec.png). Then click **Form Submission**.  
1. Follow the prompts to add the plugin and accept any terms and conditions that display. 
1. Enter a name for your integration and click **Add & Edit Code**. The name can't contain spaces or special characters. 
1. **Publish** your site.

![Extension](https://wixmp-833713b177cebf373f611808.wixmp.com/images/wix-forms-tutorial-submission-custom-extension-md_velo-articles_wix-forms-with-velo_images_service-plugin.png)
  
## Step 2: Implement the plugin

The procedure in the previous step creates a folder in the service plugins section of the Velo sidebar. The name of the folder is based on the plugin you chose. Inside this is another folder with the name of the plugin you set up. This folder contains 2 files, **your-plugin-config.js** and **your-plugin.js**. In our case the files are named **submission-config.js** and **submission.js**. We implement the custom code for our plugin in these files.  

## submission-config.js

This file is where we write the code for setting up the plugin's configuration.

The code in this file defines a function named `getConfig()` that returns an object containing the values used to display the form submission validations on your site.    

There are several apps that use forms. To validate form submission for a specific Wix app, we need to configure the file by defining the relevant `namespace` field in the plugin. In our example, we want to validate a form in the Wix Forms app, so we set the `namespace` value as `wix.form_app.form` in the service plugin's configuration file and enable the validation.

```js
import * as formsSubmissionsExtensionProvider from 'interfaces-forms-v4-submission-extension';

export function getConfig() {
  return {
    namespaceConfigs: [
      {
        namespace: "wix.form_app.form",
        submissionValidationEnabled: true
      }
    ]
  };
};
```

## submission.js

This file is where we write the code for validating the first name form field. A site visitor tries to enter a first name with a non-alphabetical character. If there are any violations to the submission validation, a warning message can appear on the form as a text box.

The code in this file defines a function named `validateSubmission()`. This function is called by Wix Forms to retrieve any violations to the validations provided by our plugin. The function accepts the following parameter:    

`options`: An object containing data about the source of the request, and the form submission information to validate. This information must include form ID. For more details, see the [Service Plugin Reference](https://www.wix.com/velo/reference/spis/wix-ecom/ecom-validations).    

The `validateSubmission()` function returns an array of validation objects (any validation violations in a site visitor's form). These validation violations can be displayed in the site visitor's form as text boxes with warnings. If there are no validation violations, the response is an object containing an empty list.

## The code:

```js
import * as formsSubmissionsExtensionProvider from 'interfaces-forms-v4-submission-extension';

const options = {
    "submission": {
        "formId": "e9e8c6ff-a771-401b-b46e-82f7c742ef3d";
    };
};

export const validateSubmission = async (options, context) => {
    const firstNameValidation = options.submission.submissions["first_name_abae"];
    const alphabeticalPattern = new RegExp("^[a-zA-Z]+$");
    if (!firstNameValidation.match(alphabeticalPattern)) {
        return {
            errors: [{
                errorPath: "first_name",
                customErrorMessage: "First name can only contain alphabetical characters!"
            }]
        };
    } else {
        return {}
    };
};

```

**Line 1**: First we import the Wix Forms submission provider module.  
**Line 3-7**: We need to define the form ID so that the code would know which form to validate. To get the form ID, call [`querySubmissionsByNamespace()`](https://www.wix.com/velo/reference/wix-forms-v2/submissions/querysubmissionsbynamespace). We don't need to define the form field values separately in the `submissions` object, as the values will be taken directly from the published site form.  
**Line 9**: Then we export the `validateSubmission()` function where we set the custom logic for our validations.  
**Lines 10**: We save the first name field value into the `firstNameValidation` variable.  
**Line 11**: Define the [Regex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) pattern so that the field only accepts alphabetical characters.  
**Line 12**: Here we check if a first name field value matches the Regex pattern.  
**Lines 13-20**: Set the violation description that can be displayed when there is a violation to the set pattern. If the form field value doesn't match the pattern, you get an error, and also form submission is aborted.

## Optional: Add files to the plugin

If you don't want to keep all of your code in the main files, you can add files to the plugin's folder and import functions and objects into the main files. To do this, create a new file in the plugin's folder. To import from these files to the main files, use the following syntax:

```js
import { functionName } from './myFileName.js';
```

## Optional: Test the plugin

You can test your plugin before publishing your site using [functional testing](https://support.wix.com/en/article/velo-functional-testing-in-the-backend) like you would with any backend Velo code. Make sure your `validateSubmission()` function's return values are properly formatted. 

You can test your plugin after deploying. To do this, add console logs to your code. The results appear in the [Site Events log](https://support.wix.com/en/article/velo-about-site-monitoring).

## Step 3: Deploy the plugin

Once your code files are ready, publish your site. Navigate to your site, and fill in a form. Any violations to the validations you've customized are displayed on the form.

1. Once your code files are ready, click **Save**, and then **Publish** your site.
1. After your service plugins are published, open your site.
1. Your service plugin is then deployed, and any validation violations should appear on your form.  
    
If a site visitor tries to enter a first name with non-alphabetical characters, there will be an error message that could be shown on the site.    
    
The validation violation response looks like this:

```js
{
  "errors": [
    {
      "errorPath": "first_name_abae",
      "customErrorMessage": "First name can only contain alphabetical characters!"
    }
  ]
}
```

## Remove the plugin

You can remove the plugin from your site. Do the following:

1. In the **Public & Backend** section of the Velo sidebar, under **Service Plugins**, hover over the plugin's folder and click **Show More**  ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/76096845-8b12-44f1-91f6-3dc2e838fdd9/2022/09/04/c4ff84cb-4d96-4e1a-966a-9c6b66dca0b2/062297c2-c368-4aee-b705-f0a55abc5bf6.png) .
1. Click **Delete**.
1. Delete the plugin in the prompt.