This is a local form test.

### KwesForms NPM Installation and Initialization Source: https://kwesforms.com/docs/v2/form-setup This code demonstrates how to install and initialize the KwesForms library using NPM. First, install the package using `npm install kwesforms`. Then, import or require the module and call `kwesforms.init()` within your component's mounted method or hook. ```bash npm install kwesforms ``` ```javascript // Use import import kwesforms from 'kwesforms'; // Or use require const kwesforms = require('kwesforms'); kwesforms.init(); ``` -------------------------------- ### HTML Form with Fields for KwesForms Source: https://kwesforms.com/docs/v2/form-setup This example demonstrates how to add form fields within the KwesForms structure. Each input field must have a unique `name` attribute, which KwesForms uses to process the submitted data. This includes a label, text input, and a submit button. ```html ``` -------------------------------- ### KwesForms CDN Integration Source: https://kwesforms.com/docs/v2/form-setup This snippet shows how to integrate KwesForms using a Content Delivery Network (CDN). Simply add the provided JavaScript link to your HTML file before the closing `` tag. No explicit import or initialization is required when using the CDN. ```html ``` -------------------------------- ### Basic HTML Form Structure for KwesForms Source: https://kwesforms.com/docs/v2/form-setup This snippet shows the fundamental HTML structure for a KwesForms form. It includes the `method` and `action` attributes, where the `action` attribute should be replaced with the custom form action URL provided by KwesForms. This is the minimum required for sending form data. ```html ``` -------------------------------- ### Applying KwesForms Class to HTML Form Source: https://kwesforms.com/docs/v2/form-setup To enable KwesForms functionality, add the `kf-form` class to your ` ``` -------------------------------- ### Example HTML Form with reCAPTCHA V2 Source: https://kwesforms.com/docs/v2/google-recaptcha-v2 A complete HTML example demonstrating the integration of Google reCAPTCHA V2 with KwesForms using automatic rendering. It includes the form structure, input fields, the reCAPTCHA div, and the KwesForms script. ```html This is a local form test. ``` -------------------------------- ### JavaScript Event Listener for Repeater Add Click Source: https://kwesforms.com/docs/v2/repeater-fields Provides a JavaScript example demonstrating how to listen for and respond to the 'kwRepeaterAddClicked' event. This allows for custom logic execution when the 'Add' button for a repeater group is activated. ```javascript ``` -------------------------------- ### HTML Input with 'numeric' and 'between' Validation Rules Source: https://kwesforms.com/docs/v2/form-validation-rules This example demonstrates validating a numeric field to be between a specified minimum and maximum value. It also includes the 'numeric' rule to ensure the input is treated as a number, not a string. Both 'rules' and 'data-kw-rules' are shown. ```html ``` ```html ``` -------------------------------- ### Adding Simple Headers to Form Steps (HTML) Source: https://kwesforms.com/docs/v2/multistep-forms This code example shows how to add a simple text-based header to individual steps in a multi-step form. The 'form-step-heading' attribute is used on the 'kw-multistep-step' div to define the header text for each step. ```html ``` ```html ``` -------------------------------- ### HTML Form with Frontend Validation and KwesForms Script Source: https://kwesforms.com/docs/index This example demonstrates integrating KwesForms frontend validation and features. It involves adding the 'kf-form' class to the form tag, specifying validation rules in input attributes, and including the KwesForms JavaScript file. ```html ``` -------------------------------- ### Complete HTML Form with Data Attributes for reCAPTCHA V3 Source: https://kwesforms.com/docs/v2/google-recaptcha-v3 This HTML example shows a KwesForms form using data attributes (`data-kw-has-recaptcha-v3` and `data-kw-recaptcha-site-key`) for Google reCAPTCHA V3 integration. It includes the necessary scripts and form elements. ```html This is a local form test. ``` -------------------------------- ### Complete HTML Form with reCAPTCHA V3 Attributes Source: https://kwesforms.com/docs/v2/google-recaptcha-v3 This is a full HTML example of a form integrated with KwesForms and Google reCAPTCHA V3. It includes the reCAPTCHA script, the form tag with `has-recaptcha-v3` and `recaptcha-site-key` attributes, input fields, and the KwesForms script. ```html This is a local form test. ``` -------------------------------- ### HTML Input with Regex Validation Source: https://kwesforms.com/docs/v2/form-validation-rules This example shows how to use the 'regex' validation rule to match an input field against a specified regular expression. The pattern must include valid delimiters, similar to PHP's preg_match function. This rule is powerful for complex pattern matching, such as email formats. It's applied using the 'rules' attribute. ```html rules="regex:/^.+@.+$/i" ``` -------------------------------- ### Apply Combined Validation Rules for Name Field in HTML Source: https://kwesforms.com/docs/v2/form-validation This example illustrates applying a set of combined validation rules ('required', 'min:3', 'max:20') to a 'name' input field. It showcases how to enforce presence, minimum length, and maximum length constraints simultaneously. ```html ``` ```html ``` -------------------------------- ### HTML Inputs for 'confirmed' Email Validation Source: https://kwesforms.com/docs/v2/form-validation-rules The 'confirmed' validation rule requires a matching confirmation field. This example uses it for email, necessitating an 'email_confirmation' field. Both fields are validated as emails. Usage with 'rules' and 'data-kw-rules' is illustrated. ```html ``` ```html ``` -------------------------------- ### Show Field with data-kw-show Attribute (HTML) Source: https://kwesforms.com/docs/v2/conditional-logic This example shows how to conditionally display an input field using the `data-kw-show` attribute, which functions similarly to `kw-show`. The visibility of the `div` containing the input is controlled by the `first` field's value matching 'show'. ```html

``` -------------------------------- ### File Upload Validation Source: https://kwesforms.com/docs/v2/form-validation-rules Validates that a successfully uploaded file meets the criteria of being a file. It supports a predefined list of common file types. The example shows a file input with the 'file' rule. ```html ``` ```html ``` -------------------------------- ### Hide Field with data-kw-hide Attribute (HTML) Source: https://kwesforms.com/docs/v2/conditional-logic This example demonstrates hiding an input field with the `data-kw-hide` attribute. The `div` containing the input will be hidden if the `first` field's value is 'hide', making it visible when the condition is not met. ```html

``` -------------------------------- ### HTML Input with Numeric and Size Validation Source: https://kwesforms.com/docs/v2/form-validation-rules This example demonstrates applying multiple validation rules to a numeric input field. The 'numeric' rule ensures the input is a number, and the 'size:18' rule validates that the numeric value is exactly 18. This combination is useful for age-related fields or similar numeric constraints. Rules can be applied using the 'rules' attribute or the 'data-kw-rules' attribute. ```html ``` ```html ``` -------------------------------- ### HTML Form with reCAPTCHA v2 using Kwes Forms (Data Attribute) Source: https://kwesforms.com/docs/v2/google-recaptcha-v2 This HTML structure is similar to the previous example but uses a data attribute (`data-kw-has-recaptcha-v2`) to indicate the presence of reCAPTCHA v2. It also requires the Kwes Forms JavaScript library and a callback function for reCAPTCHA rendering. The script dynamically sets the reCAPTCHA widget ID using a data attribute (`data-kw-recaptcha-v2-widget-id`). ```html This is a local form test. ``` -------------------------------- ### HTML Input with 'accepted' Validation Rule Source: https://kwesforms.com/docs/v2/form-validation-rules This rule ensures that the input field's value must be true. It's commonly used for checkboxes to confirm agreement to terms or policies. The example shows how to apply the 'accepted' rule using both 'rules' and 'data-kw-rules' attributes. ```html I agree to the terms and conditions. ``` ```html I agree to the terms and conditions. ``` -------------------------------- ### Email Format Validation Source: https://kwesforms.com/docs/v2/form-validation-rules Checks if the input field is formatted as a valid email address. This is a standard validation for email input fields. The example uses an input type 'email' with the 'email' rule. ```html ``` ```html ``` -------------------------------- ### Implementing Multiple Forms with Kwesforms Source: https://kwesforms.com/docs/v2/multiple-forms Demonstrates how to structure HTML to include multiple forms on a single page using the Kwesforms framework. Each form requires the 'kf-form' class attribute for proper recognition and functionality. ```html ``` -------------------------------- ### File Extension Validation (HTML) Source: https://kwesforms.com/docs/v2/form-validation-rules Ensures that an uploaded file has one of the specified extensions. This rule is helpful for allowing only certain types of image files, for example. Multiple extensions can be provided, separated by commas. ```html ``` ```html ``` -------------------------------- ### Basic Multi Step Form Structure (HTML) Source: https://kwesforms.com/docs/v2/multistep-forms This snippet demonstrates the fundamental HTML structure for creating a multi-step form using the 'multistep' attribute. It outlines the necessary container divs and step divs with their respective classes and attributes. ```html ``` ```html ``` -------------------------------- ### HTML Form Redirect Attribute Implementation Source: https://kwesforms.com/docs/v2/form-redirect This snippet demonstrates how to implement a form redirect using the `redirect` attribute in an HTML form. When the form is submitted, the user will be directed to the specified URL. This method is a straightforward way to handle post-submission navigation. ```html

``` -------------------------------- ### URL Validation (HTML) Source: https://kwesforms.com/docs/v2/form-validation-rules Validates that the input field contains a valid URL. The `link` rule performs basic validation, while `link:strict` enforces that the URL must start with `http://`, `https://`, or `www.`. -------------------------------- ### Display Field Data with KwesForms Answer Piping (HTML) Source: https://kwesforms.com/docs/v2/answer-piping Shows an alternative method for piping field data using the 'data-kw-answer-piped' attribute. This syntax is specific to KwesForms and achieves the same result as the 'answer-piped' attribute. The 'fields.name' placeholder ensures the value from the 'name' input is displayed. ```html

Welcome, fields.name!

``` -------------------------------- ### Digits Validation Source: https://kwesforms.com/docs/v2/form-validation-rules Validates that a field contains only numeric characters and has an exact specified length. This is commonly used for fields like PINs or short codes. The example shows a 'year' field requiring exactly 4 digits. ```html ``` ```html ``` -------------------------------- ### Display Field Data with Answer Piping (HTML) Source: https://kwesforms.com/docs/v2/answer-piping Demonstrates how to pipe previously entered field data into a later part of the form using the 'answer-piped' attribute. This allows for dynamic content updates as the user interacts with the form. The 'fields.name' placeholder represents the data from the 'name' input field. ```html

Welcome, fields.name!

``` -------------------------------- ### Image File Validation Source: https://kwesforms.com/docs/v2/form-validation-rules Validates that the uploaded file is an image, specifically supporting JPEG, PNG, BMP, GIF, or SVG formats. This is essential for image upload functionalities. The example uses a file input with the 'image' rule. ```html ``` ```html ``` -------------------------------- ### HTML Input with 'alpha' Validation Rule Source: https://kwesforms.com/docs/v2/form-validation-rules This rule validates that the input field contains only alphabetic characters. It's useful for fields like usernames or names where only letters are permitted. The examples demonstrate its application with both 'rules' and 'data-kw-rules' attributes. ```html ``` ```html ``` -------------------------------- ### Add and Configure Webhook Source: https://kwesforms.com/docs/v2/webhooks This section covers adding a new webhook integration and configuring its settings, including name, mode, URL, content type, and error email notifications. ```APIDOC ## POST /websites/{website_id}/forms/{form_id}/integrations/webhooks ### Description Adds a new webhook integration to a specific form within a website. This endpoint allows you to send form submission data to a specified URL when events occur. ### Method POST ### Endpoint `/websites/{website_id}/forms/{form_id}/integrations/webhooks` ### Parameters #### Path Parameters - **website_id** (string) - Required - The unique identifier for the website. - **form_id** (string) - Required - The unique identifier for the form. #### Query Parameters None #### Request Body - **name** (string) - Required - A descriptive name for the webhook. - **mode** (string) - Required - The mode for the webhook. Accepted values: `Live`, `Test`, `Off`. - **webhook_url** (string) - Required - The URL where the submission data will be sent. - **content_type** (string) - Required - The format of the data sent. Currently only `JSON` is supported. - **error_emails** (string) - Optional - An email address to receive alerts if the webhook encounters an error. ### Request Example ```json { "name": "My New Webhook", "mode": "Live", "webhook_url": "https://example.com/webhook-receiver", "content_type": "JSON", "error_emails": "admin@example.com" } ``` ### Response #### Success Response (201 Created) - **id** (string) - The unique identifier for the created webhook. - **message** (string) - A confirmation message indicating the webhook was added successfully. #### Response Example ```json { "id": "whk_abc123xyz", "message": "Webhook added successfully." } ``` ## Webhook Request Body Examples ### Description These examples illustrate the structure of the JSON payload sent to your webhook URL for different scenarios. ### Method POST (triggered by form submission) ### Endpoint `[Your Webhook URL]` ### Parameters N/A (This is the data payload sent *to* your endpoint) ### Request Example (Standard Submission) ```json { "__kwes_webhook_mode": "Live", "__mode": "production", "field1": "Optio minim omnis a", "field2": "jixuhakad@mailinator.net", "field3": "+1 (133) 277-6592", "field4": "Tiger" } ``` ### Request Example (With Repeater Fields) ```json { "payload":{ "__kwes_webhook_mode":"Test", "__mode":"development", "attendee_info":[ { "name__0":"Erica Hurst", "email__0":"erika@gmail.com", "phonel__0":"5555555555" }, { "name__1":"Amena William", "email__1":"amena@gmail.com", "phonel__1":"5555555555" }, { "name__2":"Rhonda Marks", "email__2":"rhonda@gmail.com", "phonel__2":"5555555555" } ] } } ``` ### Response N/A (Your webhook endpoint should return an appropriate HTTP status code, e.g., 200 OK, to acknowledge receipt.) #### Response Example (Acknowledgement) ```json { "status": "received" } ``` ``` -------------------------------- ### Sample JSON Request for KwesForms Webhook Source: https://kwesforms.com/docs/v2/webhooks This is a sample JSON payload that a KwesForms webhook will send when a form submission is received in 'Live' mode. It includes webhook mode information and submission data. ```json { "__kwes_webhook_mode": "Live", "__mode": "production", "field1": "Optio minim omnis a", "field2": "jixuhakad@mailinator.net", "field3": "+1 (133) 277-6592", "field4": "Tiger" } ``` -------------------------------- ### Add Multiple File Upload Input - HTML Source: https://kwesforms.com/docs/v2/file-uploads To allow users to select multiple files, add the `multiple` attribute to the file input and append square brackets `[]` to the input's name attribute (e.g., `name="uploads[]"`). ```html

``` -------------------------------- ### Add Single File Upload Input - HTML Source: https://kwesforms.com/docs/v2/file-uploads To enable a single file upload, add `enctype="multipart/form-data"` to your form tag and create an input element with `type="file"`. The name attribute should be a simple string. ```html ``` -------------------------------- ### Sample JSON Request with Repeater Fields for KwesForms Webhook Source: https://kwesforms.com/docs/v2/webhooks This sample JSON payload demonstrates how KwesForms sends data when repeater fields are used in a form submission, shown here in 'Test' mode. The 'payload' key contains the webhook mode and submission details. ```json { "payload":{ "__kwes_webhook_mode":"Test", "__mode":"development", "attendee_info":[ { "name__0":"Erica Hurst", "email__0":"erika@gmail.com", "phonel__0":"5555555555" }, { "name__1":"Amena William", "email__1":"amena@gmail.com", "phonel__1":"5555555555" }, { "name__2":"Rhonda Marks", "email__2":"rhonda@gmail.com", "phonel__2":"5555555555" } ] } } ``` -------------------------------- ### Basic HTML Form Endpoint Integration Source: https://kwesforms.com/docs/index This snippet shows the most basic way to connect an HTML form to the KwesForms backend. It requires only the form's action attribute pointing to the KwesForms API endpoint and a submit button. ```html ``` -------------------------------- ### Digits Between Validation Source: https://kwesforms.com/docs/v2/form-validation-rules Ensures a numeric field's length falls within a specified minimum and maximum range. This is useful for validating numerical inputs like ages or ID numbers within certain bounds. The example validates a number between 1 and 2 digits. ```html ``` ```html ``` -------------------------------- ### HTML Data Attribute for Form Redirect Source: https://kwesforms.com/docs/v2/form-redirect This snippet shows an alternative method for form redirects using the `data-kw-redirect` attribute. This approach adheres to HTML5 data attribute standards and achieves the same result as the `redirect` attribute: sending the user to a specified URL upon form submission. ```html

``` -------------------------------- ### HTML Input with 'alpha_num' Validation Rule Source: https://kwesforms.com/docs/v2/form-validation-rules This validation rule enforces that the input field must contain only alphanumeric characters (letters and numbers). It's a common requirement for fields like product codes or specific ID formats. Examples use both 'rules' and 'data-kw-rules'. ```html ``` ```html ``` -------------------------------- ### Listen for KwesForms Multistep Next Button Click Event (JavaScript) Source: https://kwesforms.com/docs/v2/multistep-forms This snippet demonstrates how to add custom logic to a KwesForms multistep form when the 'next' button is clicked. It requires a form with the 'multistep' attribute and an ID, and it uses the 'kwMultistepNextClicked' custom event. ```html ...

... ``` -------------------------------- ### Greater Than Field Validation Source: https://kwesforms.com/docs/v2/form-validation-rules Ensures a field's value is strictly greater than another specified field. This rule works for strings (character count), numbers (integer value), arrays (count), and files (size in KB). The example validates that 'max_price' is greater than 'min_price'. ```html ``` ```html ``` -------------------------------- ### HTML File Input with 'file' and 'between' Validation Rules Source: https://kwesforms.com/docs/v2/form-validation-rules This snippet shows how to validate a file input based on its size. The 'file' rule indicates a file upload, and 'between' specifies the acceptable size range in kilobytes. It demonstrates usage with 'rules' and 'data-kw-rules'. ```html ``` ```html ``` -------------------------------- ### HTML Structure for Repeater Field with Limit Source: https://kwesforms.com/docs/v2/repeater-fields Illustrates how to set a maximum limit for repeating field groups by adding the 'repeater-limit' attribute to the fieldset. This restricts the number of times a user can add a new group of fields. ```html ``` ```html ``` -------------------------------- ### HTML Form with reCAPTCHA v2 using Kwes Forms Source: https://kwesforms.com/docs/v2/google-recaptcha-v2 This HTML structure sets up a form with Kwes Forms and includes a placeholder for the reCAPTCHA v2 widget. It requires the Kwes Forms JavaScript library and a callback function to render the reCAPTCHA. The `has-recaptcha-v2` attribute on the form tag is used to indicate the presence of reCAPTCHA. The script dynamically sets the reCAPTCHA widget ID on the form. ```html This is a local form test. ``` -------------------------------- ### Include reCAPTCHA V3 Script in Head Source: https://kwesforms.com/docs/v2/google-recaptcha-v3 This snippet demonstrates how to include the Google reCAPTCHA V3 script in the `head` section of your HTML document. Replace `YOUR_SITE_KEY` with your actual site key. ```html ``` -------------------------------- ### Default CSS for KwesForms Multistep Form Styling Source: https://kwesforms.com/docs/v2/multistep-forms This CSS provides default styling for the various components of a KwesForms multistep form, including the main wrapper, header, body, footer, and buttons. These styles can be overridden to customize the form's appearance. ```css .kw-multistep { border: 1px solid #ddd; } .kw-multistep-header { padding: 15px; background-color: #f5f5f5; font-size: 24px; } .kw-multistep-body { padding: 15px; } .kw-multistep-footer { padding: 15px; background-color: #f5f5f5; } .kw-multistep-footer .kw-multistep-button-previous { float: left; } .kw-multistep-footer .kw-multistep-button-next, .kw-multistep-footer .kw-multistep-button-submit { float: right; } ``` -------------------------------- ### Hide Uncompiled Code with KwesForms `kw-cloak` Attribute Source: https://kwesforms.com/docs/v2/form-components Demonstrates how to use the `kw-cloak` attribute in HTML forms to hide elements until KwesForms JavaScript is fully loaded and processed. This is useful for dynamic features like answer piping and conditionals. Supported attributes include `kw-cloak` and `data-kw-cloak`. ```html

``` ```html ``` -------------------------------- ### Populate Select with Days using KwesForms Source: https://kwesforms.com/docs/v2/predetermined-lists Automatically populate a select element with the days of the week by setting the 'kw-select-type' attribute to 'days'. KwesForms handles the option generation for days. ```html ``` ```html ``` -------------------------------- ### Checkbox Group without KwesForms Script (HTML) Source: https://kwesforms.com/docs/v2/checkbox-radio-fields Shows the standard HTML structure for a checkbox group when not using the KwesForms script. The `[]` is appended to the field name, and no special KwesForms attributes are used. ```html

Apple Orange Kiwi

``` -------------------------------- ### Adding Complex Headers to Form Steps (HTML) Source: https://kwesforms.com/docs/v2/multistep-forms This snippet illustrates how to implement a complex header within a multi-step form, allowing for richer content like icons or images. The 'kw-multistep-header' div is placed inside 'kw-multistep-step' but outside 'kw-multistep-body'. ```html

Your complex header here...

...

``` ```html ``` -------------------------------- ### Disabling Form Validation in Steps (HTML) Source: https://kwesforms.com/docs/v2/multistep-forms This code shows how to control form validation behavior during step transitions. By adding 'multistep-dont-validate' to the 'kw-multistep' div, validation is skipped for previous/next actions, only occurring on submit. ```html ``` ```html ``` -------------------------------- ### Set Test Mode in Form Tag (HTML) Source: https://kwesforms.com/docs/v2/form-testing Add `mode="test"` to your `

` tag to enable test mode when using the KwesForms script. This attribute clearly indicates the form is in testing. ```html ``` ```html ``` -------------------------------- ### CSS for Hiding Elements with KwesForms `kw-cloak` Source: https://kwesforms.com/docs/v2/form-components Provides CSS rules to hide elements that have the `kw-cloak` or `data-kw-cloak` attribute applied. This CSS should be included in your stylesheet to ensure elements are hidden until the KwesForms JavaScript is ready. ```css [kw-cloak] { display: none; } ``` ```css [data-kw-cloak] { display: none; } ``` -------------------------------- ### Populate Select with Months using KwesForms Source: https://kwesforms.com/docs/v2/predetermined-lists Populate a select element with the months of the year by setting the 'kw-select-type' attribute to 'months'. KwesForms automatically generates the month options. ```html ``` ```html ``` -------------------------------- ### Populate Select with Countries using KwesForms Source: https://kwesforms.com/docs/v2/predetermined-lists Automatically populate a select element with a list of countries by setting the 'kw-select-type' attribute to 'countries'. KwesForms handles the option generation. ```html ``` ```html ``` -------------------------------- ### HTML Input with Size Validation Source: https://kwesforms.com/docs/v2/form-validation-rules This snippet shows how to enforce a specific size constraint on an HTML input field using the 'size' validation rule. The 'size' rule's behavior varies depending on the input type: character count for strings, integer value for numbers, element count for arrays, and kilobyte size for files. It can be applied using the 'rules' attribute or the 'data-kw-rules' attribute. ```html ``` ```html ``` -------------------------------- ### Set Test Mode with Hidden Field (HTML) Source: https://kwesforms.com/docs/v2/form-testing Include a hidden input field with `name="__kf_mode"` and `value="test"` within your form. This method works independently or in conjunction with the KwesForms script to enable test mode. ```html ``` -------------------------------- ### HTML File Input with File and Size Validation Source: https://kwesforms.com/docs/v2/form-validation-rules This snippet illustrates how to validate file uploads using Kwesforms. The 'file' rule ensures the input is a file, and the 'size:400' rule restricts the file size to 400 kilobytes. This is crucial for managing storage and performance. Rules can be applied using the 'rules' attribute or the 'data-kw-rules' attribute. ```html ``` ```html ``` -------------------------------- ### Explicit reCAPTCHA V2 Rendering Script (JavaScript) Source: https://kwesforms.com/docs/v2/google-recaptcha-v2 This JavaScript code snippet demonstrates how to explicitly render a Google reCAPTCHA V2 widget. It requires a specific script URL and a callback function to handle widget rendering and form re-initialization. ```javascript ``` -------------------------------- ### Checkbox Group with KwesForms Validation (HTML) Source: https://kwesforms.com/docs/v2/checkbox-radio-fields Demonstrates how to structure a checkbox group for KwesForms validation. The group is wrapped in a `

` with validation rules in the `rules` attribute. All checkboxes share the same `name`. ```html

Apple Orange Kiwi

``` ```html

Apple Orange Kiwi

```