Form Setup

Setting up your form with Kwes first requires setting up your dashboard and second creating your form. Our setup requirements allow you to use our top-notch form security, our timesaving building components, and complete spam protection.

Dashboard Setup

The first two steps are to name your project website and form in your Kwes account.

1. Add a Website

On the dashboard page click on the "add a website" button and give your website a name.

2. Add a Form

On the next panel give your form a name.

Creating Your Form

From this point forward you start building your form in your code editor using HTML, CSS, our form building components and whatever else your form may require.

Note

Your form setup may vary depending on your framework. Specific instructions avaialable for:

• SPA
• WordPress

3. Add Our JS Link

Add the Kwes JavaScript link below before your closing </body> tag.

<script src="https://kwes.io/js/kwes.js" charset="utf-8"></script>

4. Wrap Your Form

Place your form inside any type of HTML element that has a class of kwes-form. Kwes needs this to find your form.

<div class="kwes-form">
    <form method="POST">
        ...
    </form>
</div>

5. Add Our Action URL

Add the form endpoint URL we provide to your form action.

<div class="kwes-form">
    <form method="POST" action="https://kwes.io/api/foreign/forms/YOUR_FORM_KEY">
        ...
    </form>
</div>

6. 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.

<div class="kwes-form">
    <form method="POST" action="https://kwes.io/api/foreign/forms/YOUR_FORM_KEY">
        <label for="name">Your Name</label>
        <input type="text" name="name">
        <button type="submit">Submit</button>
    </form>
</div>

7. 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.

<div class="kwes-form">
    <form method="POST" action="https://kwes.io/api/foreign/forms/YOUR_FORM_KEY">
        <label for="name">Your Name</label>
        <input type="text" name="name" rules="required|max:255">
        <button type="submit">Submit</button>
    </form>
</div>

8. Send Your First Submission

Go to your form and send your first submission to connect your form to Kwes.

9. Assign Domain

Every website is allowed one live domain and one testing domain for their forms. Once your first submission is completed, you will be presented with the option to assign your domain as a live or testing domain.

Framework Specific Instructions

The setup of a Kwes form may need to be adjusted depending on your chosen framework.

SPA (Single Page Application)

Step 3 of the setup process does not work with SPA's. If you add our JS script before the closing </body> tag, it will not reload the script whenever you navigate away from the page and back to it.

To integrate Kwes with your SPA you need to include the script in the mounted function of the view that you would like to use Kwes in. This way, the script loads whenever the view loads.

WordPress

Steps 3 - 7 of the setup process should be adjusted to one of these 3 options:

• You can setup a Kwes 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 components needed for it to work properly.

• You can place your Kwes form code inside a template file.

• You can turn your Kwes form code into a WordPress shortcode and add it to in the Wordpress page/post editor.