Prerequisites

The.com BasicsElement Attributes

Intro

Start by creating a KwesForms account or logging in. On your dashboard, click the "Add Website" button.

Then, type the name of your website. This doesn't have to be the URL and is not used in connecting to your site. That will come later.

You will then be prompted to add a new form. Write in the form's name and click "Add Form."

Kwes will now walk you through six steps to set up your form. Here are the corresponding steps to do on The.com.

1. Install KwesForms

Add a script to the page where your form will live. Kwes shows a code snippet like this:

<script src="https://kwes.io/v2/kwes-script.js" defer></script>

Copy this "src" value of this script, so:

https://kwes.io/v2/kwes-script.js

In The.com, create a Script Element as the last Element in your Page (or in your footer Block if the form will be on every page) and paste the code into its Source attribute. Then, type true in the Defer attribute cell.

The Script element should be as close to the end of the page as possible. Click "Next" on the KwesForms page.

2. Give your form a class

Give your Form element the "kwes-form" class as directed by KwesForms.

Click "Next" on the KwesForms page.

3. Add Our Action URL

In this step, you will see an action attribute added to the script like this:

 <form class="kwes-form" action="https://kwes.io/api/foreign/forms/YOUR-UNIQUE-URL">
...
</form>

Note: the "YOUR-UNIQUE-URL" will be a string of numbers and letters that is used to connect your form.

Copy the action attribute's value (https://kwes.io/api/foreign/forms/YOUR-UNIQUE-URL) and paste it in the Form Element's Action attribute in our Page Sheet.

Click "Next" on the KwesForms page.

4. Add Your Form Fields

If you haven't made the form fields yet, do that now. Every input needs a label. If you don't want to display a label you can set the display to "none" but it must be present in order for Kwes to work.

Make sure that all form fields are nested within the Form element.

Once you have all the fields you want, click "Next" on the KwesForms page.

5. Add Our Validation Rules (Optional)

If you want to use validation, read the docs from KwesForms. Just add these attributes to the HTML that you are writing inside the Raw HTML Element.

Click "Next" on the KwesForms page.

6. Send Your First Submission

Refresh your site preview in The.com's editor if you haven't already. You will notice some text above your form saying: "Almost there! Send your first submission to connect this domain."

If you try to submit the form from the editor, it will not work:

Instead, deploy your page and submit the form from the live page.

Click "Set As Live Domain" and your form will be connected to KwesForms (or click "Set As Test Domain" if you are using this on a test site).

If you return to the webpage with your form, you will see that the text previously above the form is gone. You will also see the submission results in your KwesForms account.