Setting up your form with KwesForms requires setting up your dashboard before actually creating your form. Our setup requirements allow you to use our top-notch form security, our timesaving building components, complete spam protection, and even share the form with other accounts.
The first two steps are to name your project website and form in your KwesForms account.
Add a website
On the dashboard page click on the "add a website" button and give your website a name.
Add a form
On the next panel give your form a name.
Install via NPM
Install KwesForms with a simple npm install.
npm install kwesforms
Import or require our kwesforms module
// Use import import kwesforms from 'kwesforms';
// Or use require const kwesforms = require('kwesforms');
Initialize kwesforms in the mounted method or hook of the component/view that you will be using KwesForms in.
Install via CDN
</body> tag. No need to import or initialize anything if you use our CDN.
<script src="https://kwes.io/v2/kwes-script.js" defer></script>
Create Your Form
From this point forward you start building your form using your own HTML, CSS, our form building components, and whatever else your form may require.
Add the kwes-form class
Add the class
kwes-form to your
<form> tag. This helps our script find your form.
<form class="kwes-form"> ... </form>
Add our action URL
Add the form endpoint URL we provide to your form action.
<form class="kwes-form" action="YOUR_CUSTOM_FORM_ACTION"> ... </form>
Add your form fields
Add your form fields the same way you normally would with HTML and CSS. All fields require a unique "name" attribute.
<form class="kwes-form" action="YOUR_CUSTOM_FORM_ACTION"> <label for="name">Your Name</label> <input type="text" name="name"> <button type="submit">Submit</button> </form>
Add our validation rules (optional)
You can add our powerful form validation rules to your form fields inside a
rules attribute. Even though it's not required for your form to work, it's highly recommended for a better user experience and spam protection.
<form class="kwes-form" action="YOUR_CUSTOM_FORM_ACTION"> <label for="name">Your Name</label> <input type="text" name="name" rules="required|max:255"> <button type="submit">Submit</button> </form>
Connect your form
Send your first submission to connect your form to our backend.
Every website is allowed one live domain and one testing domain for their forms. Once your first submission is received, you will be presented with the option to assign your domain as a live or testing domain. Once you do this, you can start collecting submissions!
For SPA's, follow our Install via NPM instructions.
Follow our Install via CDN instructions and keep in mind these few suggestions:
You can setup your form inside the WordPress page/post editor for very basic forms. With this option you run the risk of the form not working correctly since WordPress may strip the form of important custom attributes needed for it to work properly unless you use our data-kw-* (W3C) syntax.
You can place your form code inside a template file.
You can turn your form code into a WordPress shortcode and add it to in the Wordpress page/post editor.
Notice anything wrong in our docs? Let us know.