The Submit button is one of the most powerful features of the Quik! Forms Engine for enterprise customers. It is often leveraged in use cases when the customer needs users to send form data back to the customer's system for processing, archiving, or validating prior to e-signature. A submit event in the Quik! Forms Engine is very similar to a Save event, as both post form data to a specified location set by the customer. The primary difference between the two functions is that a Submit event always validates any Required Fields that may exist on the form (Required Fields are a type of field rule, discussed here), and a Save event does not. This page explains how to implement some of the most common uses cases of the Submit button.

The Submit button in the Quik! Form Viewer

Above: Submit Button in the Quik! Form Viewer

Above: Error notification when attempting to submit a form without filling out Required Fields

Use Case #1: Submit form data for storage/archiving

The most basic use of the Submit button is to enable users to send form data to a customer's system for further processing, essentially making the Submit event the last step of a Quik! integration workflow. See steps below on how to implement a Submit button for this use case.

1. Determine a location to save the form data

Form data is submitted though a HTTP POST to a URL where customers can receive the posted data. The format of the data sent is value pair format by default, but can be changed to URL Encoded or JSON with with the SubmitContentType property.

Your URL must receive the posted data and process (e.g. save, validate, etc.) it. Typically this information is saved into a database record but can also be saved to an XML file, JSON file or other flat file that is easily accessible to your system. In addition, your URL should also return a reply message to the sending browser (see instructions below under this header: Custom JavaScript for Form Submission Handling).

2. Configure the Submit event in the Quik! API

Set HTMLButtonSubmit.Show property to TRUE to show the Submit button.
Provide a value for the HTMLButtonSubmit.SubmitURL property to set the URL location of where the submitted forms will be posted.
OPTIONAL: Set the content type of the posted data with the SubmitContentType property.
OPTIONAL: Set a value for the HTMLButtonSubmit.SubmitJavascript property with your own javascript function to perform AJAX or custom processes instead of a HTTP POST.

REST Example

Here’s an example execute/html request with the configured Submit button:

{
    "HostFormOnQuik": true,
    "QuikFormID": "12,441",
    "HTMLButtonSubmit": {
        "title": "Submit",
        "submitContentType": "Json", // Other option is "UrlEncoded"
        "show": true,
        "name": "Submit",
        "submitURL": "string"
        //"SubmitJavascript": "string",
    },
    "FormFields": []
}

Note: The Submit button first triggers the SaveURL from the Save Button (if configured), followed by the SubmitURL.

We will soon introduce a property that allows you to toggle this feature off, with an estimated release by the end of 2024.

Custom JavaScript for Form Submission Handling

You can configure the SubmitJavaScript property to processes the response from the Submit event based on the server's reply.

JavaScript Example:
The following code customizes the form submission process by using an AJAX request to send the form data as JSON to the specified server URL. It handles the server's response, showing success or error messages based on the result, and ensures users are notified if the request fails.

var form = document.getElementById('QFVFormPage');
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST', form.action, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function () {
    if (xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        if (response.ErrorCode === '0') {
            alert('Success: ' + response.ErrorMessage);
        } else if (response.ErrorCode === '1') {
            alert('Failed: ' + response.ErrorMessage);
        } else {
            alert('Unexpected response received.');
        }
    } else {
        alert('Unexpected error occurred. Please try again.');
    }
};
xhr.onerror = function () {
    alert('Request failed. Please try again.');
};
xhr.send(JSON.stringify(Object.fromEntries(formData)));

Usage

In your “Submit” button configuration, place this script in the SubmitJavaScript property under the HTMLButtonSubmit section. This will ensure that custom submission behavior is applied whenever the user clicks the submit button.

Example Configuration using the above JavaScript:

"HTMLButtonSubmit": {
    "title": "Submit",
    "submitContentType": "Json", // Other option is  "UrlEncoded"
    "show": true,
    "name": "Submit",
    "SubmitURL": "string",
    "SubmitJavaScript": "var form = document.getElementById('QFVFormPage'); var formData = new FormData(form); var xhr = new XMLHttpRequest(); xhr.open('POST', form.action, true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function () { if (xhr.status === 200) { var response = JSON.parse(xhr.responseText); if (response.ErrorCode === '0') { alert('Success: ' + response.ErrorMessage); } else if (response.ErrorCode === '1') { alert('Failed: ' + response.ErrorMessage); } else { alert('Unexpected response received.'); } } else { alert('Unexpected error occurred. Please try again.'); } }; xhr.onerror = function () { alert('Request failed. Please try again.'); }; xhr.send(JSON.stringify(Object.fromEntries(formData)));"
  }

Sample Successful Server Response:

This server response triggers the success alert in the JavaScript:

Below is a screenshot of the sample server response that the user would see in the Quik! Form Viewer:

Sample Failed Server Response:

In the case of a failure, the following server response would trigger the failure alert, notifying the user of the issue:

Below is a screenshot of the sample server response that the user would see in the Quik! Form Viewer:

Additional Notes:

You can modify this JavaScript to suit your own business requirements.

Use Case #2: Submit form data prior to E-Signature

Another common use of the Submit button is to enable users to send form data to a customer's system prior to E-Signing with Quik!. This is a useful approach for storing and running validations on form data prior to sending for e-signature (at which point users will not be able to edit field information). See steps below on how to implement a Submit button for this use case.

1. Determine a location to save the form data

Form data is submitted though a HTTP POST to a URL where customers can receive the posted data. The data is sent the same way as any other HTTP POST event in value-pair format (field name:field value). Your URL must receive the posted data and process (i.e. save) it. Typically this information is saved into a database record but can also be saved to an XML file, JSON file or other flat file that is easily accessible to your system.

2. Configure the Submit event in the Quik! API

Configure all required e-sign settings in your Quik! implementation (more information in the E-Signature Integration section)
Set HTMLButtonSubmit.SubmitURL property to TRUE to set the URL location of where the submitted forms will be posted.
Set SignSubmitCombined property to TRUE. This will cause the submit event to fire when the Sign button is clicked.

REST Example

Here’s an example execute/html request with the configured SignSubmitCombined button:

When a user clicks the Sign button, a submit event will fire to first validate all the required fields (if any) are completed on the form, and then to post the data to the assigned URL. The E-Sign pop-up will then open, allowing the user to fill out all signer information and e-sign settings before sending the forms off for e-signatures.

Quik! API Guide

Configuring the Submit Button

Use Case #1: Submit form data for storage/archiving

1. Determine a location to save the form data

2. Configure the Submit event in the Quik! API

REST Example

Custom JavaScript for Form Submission Handling

Usage

Sample Successful Server Response:

Sample Failed Server Response:

Additional Notes:

Use Case #2: Submit form data prior to E-Signature

1. Determine a location to save the form data

2. Configure the Submit event in the Quik! API

REST Example