1. kwesforms
The only complete developer-focused form service in the world. Build any type of form. Integrate it into any framework.
kwesforms
Package: kwesforms
Last modified: Mon, 01 Apr 2024 06:30:53 GMT
Version: 2.2.9
License: SEE LICENSE IN LICENSE
Downloads: 491

Install

npm install kwesforms
yarn add kwesforms

KwesForms

KwesForms is the only complete developer-focused form service in the world. Build any type of form. Integrate it into any framework. No drag and drop, no unnecessary stylings. Enjoy:

  • Form-building tools
  • Frontend validation
  • Backend validation
  • Hide/show logic
  • Spam protection (97.3% accurate)
  • Data management
  • Autoresponders/Notification emails
  • Integrations & Webhooks

Read more at kwes.io

1. Install

# With npm
npm install kwesforms

# With yarn
yarn add kwesforms

2. Import

 // Use import
import kwesforms from 'kwesforms';

// or require
const kwesforms = require('kwesforms');

3. Initialize

Include this method in the mounted function of the component/view that you will use KwesForms in.

 kwesforms.init();

4. Set up your form

Create your form with your own HTML and CSS as you normally would. All you need to do is:

  • Add our kwes-form class to your form tag.
  • Add the action URL we provide when you create an account with us.
 <form class="kwes-form" action="https://kwes.io/api/foreign/forms/{your_form_id}">
    ...
</form>

5. Add validation rules (optional)

Add our validation rules to your fields inside a rules attribute. You can add multiple validation rules by seperating them with a | character. Our rules validate on the frontend and the backend simultaneously:

  • As you type
  • When you click away from a field
  • When you click submit.

Example

 <input type="text" rules="required|min:5|alpha_dash">

Read more about our validation rules here.

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin