KwesForms

https://kwesforms.com/docs
Admin
KwesForms is a form builder platform that enables developers to create, validate, and manage forms...
Tokens:23,008
Snippets:280
Trust Score:7
Update:9 months ago
Show doc for...
Tokens:
Raw
### 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
<form method="POST" action="YOUR_CUSTOM_FORM_ACTION">
    <label for="name">Your Name</label>
    <input type="text" name="name">
    <button type="submit">Submit</button>
</form>
```

--------------------------------

### 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 `</body>` tag. No explicit import or initialization is required when using the CDN.

```html
<script src="https://kwesforms.com/v2/kf-script.js" defer></script>
```

--------------------------------

### 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
<form method="POST" action="YOUR_CUSTOM_FORM_ACTION">
    ...
</form>
```

--------------------------------

### 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 `<form>` tag. This class allows the KwesForms script to identify and process your form for features like validation and spam protection.

```html
<form ... class="kf-form">
    ...
</form>
```

--------------------------------

### 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
<!DOCTYPE html>
<html>
<head>
    <title>This is a local form test.</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
    <form 
        class="kf-form" 
        action="YOUR_FORM_ACTION"
        has-recaptcha-v2
    >
        <label for="your_name">Your Name</label>
        <input type="text" name="your_name">  

        <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>  

        <button type="submit">Submit</button>
    </form>  

    <script src="https://kwesforms.com/v2/kf-script.js" defer></script>
</body>
</html>
```

--------------------------------

### 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
<form ... class="kf-form" id="myForm">
    ...
</form>  

<!-- Add this script after your KwesForms script -->
<script>
    var form = document.getElementById('myForm');  

    form.addEventListener('kwRepeaterAddClicked', function () {
        alert('The add button has been clicked!');
    });
</script>
```

--------------------------------

### 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
<input type="number" name="age" rules="numeric|between:21,30">
```

```html
<input type="number" name="age" data-kw-rules="numeric|between:21,30">
```

--------------------------------

### 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
<form ... class="kf-form" multistep>
    <div class="kw-multistep">
        <div class="kw-multistep-step" form-step-heading="Step 1">
            <div class="kw-multistep-body">
                ...
            </div>
        </div>
    </div>
</form>
```

```html
<form ... class="kf-form" data-kw-multistep>
    <div class="kw-multistep">
        <div class="kw-multistep-step" data-kw-form-step-heading="Step 2">
            <div class="kw-multistep-body">
                ...
            </div>
        </div>
    </div>
</form>
```

--------------------------------

### 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
<form class="kf-form" action="https://kwesforms.com/api/f/xxxx" method="POST">
    <input name="fieldname" rules="required|max:30">
    <button type="submit">Submit</button>
</form>

<script src="https://kwesforms.com/v2/kf-script.js" defer></script>
```

--------------------------------

### 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
<!DOCTYPE html>
<html>
<head>
    <title>This is a local form test.</title>
    <script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
</head>
<body>
    <form 
        class="kf-form" 
        action="YOUR_FORM_ACTION"
        data-kw-has-recaptcha-v3
        data-kw-recaptcha-site-key="YOUR_SITE_KEY"
    >
        <label for="your_name">Your Name</label>
        <input type="text" name="your_name">  

        <button type="submit">Submit</button>
    </form>  

    <script src="https://kwesforms.com/v2/kf-script.js" defer></script>
</body>
</html>
```

--------------------------------

### 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
<!DOCTYPE html>
<html>
<head>
    <title>This is a local form test.</title>
    <script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
</head>
<body>
    <form 
        class="kf-form" 
        action="YOUR_FORM_ACTION"
        has-recaptcha-v3
        recaptcha-site-key="YOUR_SITE_KEY"
    >
        <label for="your_name">Your Name</label>
        <input type="text" name="your_name">  

        <button type="submit">Submit</button>
    </form>  

    <script src="https://kwesforms.com/v2/kf-script.js" defer></script>
</body>
</html>
```

--------------------------------

### 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
<input name="name" rules="required|min:3|max:20">

```

```html
<input name="name" data-kw-rules="required|min:3|max:20">

```

--------------------------------

### 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
<input type="email" name="email" rules="email|confirmed">
<input type="email" name="email_confirmation" rules="email">
```

```html
<input type="email" name="email" data-kw-rules="email|confirmed">
<input type="email" name="email_confirmation" data-kw-rules="email">
```

--------------------------------

### 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
<select name="first">
    <option value="show">Show Field Below</option>
    <option value="hide">Hide Field Below</option>
</select>  

<div data-kw-show="fields.first === 'show'">
    <input type="text" name="second">
</div>

```

--------------------------------

### 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
<input type="file" name="my_file"
    rules="file"
>
```

```html
<input type="file" name="my_file" 
    data-kw-rules="file"
>
```

--------------------------------

### 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
<select name="first">
    <option value="show">Show Field Below</option>
    <option value="hide">Hide Field Below</option>
</select>  

<div data-kw-hide="fields.first === 'hide'">
    <input type="text" name="second">
</div>

```

--------------------------------

### 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
<input type="number" name="age" 
    rules="numeric|size:18"
>

```

```html
<input type="number" name="age" 
    data-kw-rules="numeric|size:18"
>

```

--------------------------------

### 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
<!DOCTYPE html>
<html>
<head>
    <title>This is a local form test.</title>
</head>
<body>
    <form 
        id="myForm"
        class="kf-form" 
        action="YOUR_FORM_ACTION"
        data-kw-has-recaptcha-v2
    >
        <label for="your_name">Your Name</label>
        <input type="text" name="your_name">  

        <div id="example2"></div>  

        <button type="submit">Submit</button>
    </form>  

    <script src="https://kwesforms.com/v2/kf-script.js" defer></script>
    <script>
        var myForm = document.getElementById('myForm');
        var widgetId1;

        var onloadCallback = function() {
            // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
            // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
            widgetId1 = grecaptcha.render('example1', {
                'sitekey' : 'YOUR_SITE_KEY',
            });

            myForm.setAttribute('data-kw-recaptcha-v2-widget-id', widgetId1);  

            //  manually re-initialize our form.
            window.kwesFormsInitialize();
        };
    </script>
</body>
</html>
```

--------------------------------

### 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
<input type="checkbox" name="terms" rules="accepted">
I agree to the terms and conditions.
```

```html
<input type="checkbox" name="terms" data-kw-rules="accepted">
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
<input type="email" name="email_address"
    rules="email"
>
```

```html
<input type="email" name="email_address" 
    data-kw-rules="email"
>
```

--------------------------------

### 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
<form class="kf-form" action="...">
    ...
</form>  

<form class="kf-form" action="...">
    ...
</form>
```

--------------------------------

### 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
<input type="file" name="my_file"
    rules="mimes:jpg,png"
>

```

```html
<input type="file" name="my_file" 
    data-kw-rules="mimes:jpg,png"
>

```

--------------------------------

### 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
<form ... class="kf-form" multistep>
    <div class="kw-multistep">
        <div class="kw-multistep-step" form-step-heading="Step 1">
            <div class="kw-multistep-body">
                Your fields for this step here...
            </div>
        </div>  

        <div class="kw-multistep-step" form-step-heading="Step 2">
            <div class="kw-multistep-body">
                Your fields for this step here...
            </div>
        </div>
    </div>
</form>
```

```html
<form ... class="kf-form" data-kw-multistep>
    <div class="kw-multistep">
        <div class="kw-multistep-step" data-kw-form-step-heading="Step 1">
            <div class="kw-multistep-body">
                Your fields for this step here...
            </div>
        </div>  

        <div class="kw-multistep-step" data-kw-form-step-heading="Step 2">
            <div class="kw-multistep-body">
                Your fields for this step here...
            </div>
        </div>
    </div>
</form>
```

--------------------------------

### 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
<form ... redirect="http://example.com/thankyou">


```

--------------------------------

### 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
<input type="text" name="name" value="John Doe">
<p>Welcome, <span data-kw-answer-piped>fields.name</span>!</p>
```

--------------------------------

### 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
<input type="number" name="year" rules="required|digits:4">
```

```html
<input type="number" name="year" data-kw-rules="required|digits:4">
```

--------------------------------

### 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
<input type="text" name="name" value="John Doe">
<p>Welcome, <span answer-piped>fields.name</span>!</p>
```

--------------------------------

### 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
<input type="file" name="my_file"
    rules="image"
>
```

```html
<input type="file" name="my_file" 
    data-kw-rules="image"
>
```

--------------------------------

### 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
<input name="username" rules="alpha">
```

```html
<input name="username" data-kw-rules="alpha">
```

--------------------------------

### 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
<form ... enctype="multipart/form-data">
    <input type="file" name="uploads[]" multiple>
</form>
```

--------------------------------

### 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
<form ... enctype="multipart/form-data">
    <input type="file" name="upload">
</form>
```

--------------------------------

### 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
<form action="https://kwesforms.com/api/f/xxxx" method="POST">
    <input name="fieldname">
    <button type="submit">Submit</button>
</form>
```

--------------------------------

### 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
<input type="number" name="favorite_numbrt"
    rules="required|digits_between:1,2"
>
```

```html
<input type="number" name="favorite_number" 
    data-kw-rules="required|digits_between:1,2"
>
```

--------------------------------

### 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
<form ... data-kw-redirect="http://example.com/thankyou">


```

--------------------------------

### 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
<input name="username" rules="alpha_num">
```

```html
<input name="username" data-kw-rules="alpha_num">
```

--------------------------------

### 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
<form ... class="kf-form" multistep id="myForm">
    ...
</form>  

...

<!-- Add this script after your KwesForms script -->
<script>
    var form = document.getElementById('myForm');  

    form.addEventListener('kwMultistepNextClicked', function () {
        alert('The next button has been clicked!');
    });
</script>
```

--------------------------------

### 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
<input type="number" name="min_price" rules="required">
<input type="number" name="max_price" rules="required|gt:min_price">
```

```html
<input type="number" name="min_price" data-kw-rules="required">
<input type="number" name="max_price" data-kw-rules="required|gt:min_price">
```

--------------------------------

### 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
<input type="file" name="myfile" rules="file|between:400,1000">
```

```html
<input type="file" name="myfile" data-kw-rules="file|between:400,1000">
```

--------------------------------

### 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
<form ... class="kf-form">
    <fieldset repeater name="unique_name" repeater-limit="3">
        ...
    </fieldset>
</form>
```

```html
<form ... class="kf-form">
    <fieldset data-kw-repeater name="unique_name" data-kw-repeater-limit="3">
        ...
    </fieldset>
</form>
```

--------------------------------

### 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
<!DOCTYPE html>
<html>
<head>
    <title>This is a local form test.</title>
</head>
<body>
    <form 
        id="myForm"
        class="kf-form" 
        action="YOUR_FORM_ACTION"
        has-recaptcha-v2
    >
        <label for="your_name">Your Name</label>
        <input type="text" name="your_name">  

        <div id="example2"></div>  

        <button type="submit">Submit</button>
    </form>  

    <script src="https://kwesforms.com/v2/kf-script.js" defer></script>
    <script>
        var myForm = document.getElementById('myForm');
        var widgetId1;

        var onloadCallback = function() {
            // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
            // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
            widgetId1 = grecaptcha.render('example1', {
                'sitekey' : 'YOUR_SITE_KEY',
            });

            myForm.setAttribute('recaptcha-v2-widget-id', widgetId1);  

            //  manually re-initialize our form.
            window.kwesFormsInitialize();
        };
    </script>
</body>
</html>
```

--------------------------------

### 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
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
```

--------------------------------

### 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
<form action="..." class="kf-form" kw-cloak>

```

```html
<form action="..." class="kf-form" data-kw-cloak>

```

--------------------------------

### 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
<select name="day" kw-select-type="days"></select>
```

```html
<select name="day" data-kw-select-type="days"></select>
```

--------------------------------

### 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
<fieldset>
    <input type="checkbox" name="fruits[]" value="Apple"> Apple
    <input type="checkbox" name="fruits[]" value="Orange"> Orange
    <input type="checkbox" name="fruits[]" value="Kiwi"> Kiwi
</fieldset>
```

--------------------------------

### 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
<form ... class="kf-form" multistep>
    <div class="kw-multistep">
        <div class="kw-multistep-step">
            <div class="kw-multistep-header">
                Your complex header here...
            </div>  

            <div class="kw-multistep-body">
                ...
            </div>
        </div>
    </div>
</form>
```

```html
<form ... class="kf-form" data-kw-multistep>
    <div class="kw-multistep">
        <div class="kw-multistep-step">
            <div class="kw-multistep-header">
                Your complex header here...
            </div>  

            <div class="kw-multistep-body">
                ...
            </div>
        </div>
    </div>
</form>
```

--------------------------------

### 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
<form ... class="kf-form" multistep>
    <div class="kw-multistep" multistep-dont-validate>
        ...
    </div>
</form>
```

```html
<form ... class="kf-form" data-kw-multistep>
    <div class="kw-multistep" data-kw-multistep-dont-validate>
        ...
    </div>
</form>
```

--------------------------------

### Set Test Mode in Form Tag (HTML)

Source: https://kwesforms.com/docs/v2/form-testing

Add `mode="test"` to your `<form>` tag to enable test mode when using the KwesForms script. This attribute clearly indicates the form is in testing.

```html
<!-- you should also set the value to "live" on your production env -->
<form ... mode="test">

```

```html
<!-- you should also set the value to "live" on your production env -->
<form ... data-kw-mode="test">

```

--------------------------------

### 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
<select name="month" kw-select-type="months"></select>
```

```html
<select name="month" data-kw-select-type="months"></select>
```

--------------------------------

### 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
<select name="country" kw-select-type="countries"></select>
```

```html
<select name="country" data-kw-select-type="countries"></select>
```

--------------------------------

### 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
<input type="text" name="username" 
    rules="size:5"
>

```

```html
<input type="text" name="username" 
    data-kw-rules="size:5"
>

```

--------------------------------

### 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
<!-- you should also set the value to "live" on your production env -->
<input type="hidden" name="__kf_mode" value="test" />

```

--------------------------------

### 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
<input type="file" name="myfile" 
    rules="file|size:400"
>

```

```html
<input type="file" name="myfile" 
    data-kw-rules="file|size:400"
>

```

--------------------------------

### 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
<script src="https://www.google.com/recaptcha/api.js?onload=callback&render=explicit" async defer></script>

<script>
    var myForm = document.getElementById('form');
    var widgetId1;

    var onloadCallback = function() {
        widgetId1 = grecaptcha.render('example1', {
            'sitekey' : 'YOUR_SITE_KEY',
        });

        myForm.setAttribute('recaptcha-v2-widget-id', widgetId1);

        window.kwesFormsInitialize();
    };
</script>
```

--------------------------------

### 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 `<fieldset data-kw-group>` with validation rules in the `rules` attribute. All checkboxes share the same `name`.

```html
<fieldset data-kw-group rules="required">
    <input type="checkbox" name="fruits" value="Apple"> Apple
    <input type="checkbox" name="fruits" value="Orange"> Orange
    <input type="checkbox" name="fruits" value="Kiwi"> Kiwi
</fieldset>
```

```html
<fieldset data-kw-group data-kw-rules="required">
    <input type="checkbox" name="fruits" value="Apple"> Apple
    <input type="checkbox" name="fruits" value="Orange"> Orange
    <input type="checkbox" name="fruits" value="Kiwi"> Kiwi
</fieldset>
```
Tokens:
Raw