Kantos

Webflow offers excellent control over custom code injection, making it easy to add the Kantos Universal Script. You can add it site-wide or to specific pages.

What You'll Need

A Webflow site (any plan with custom code access)
Your Kantos API key from Settings → API Keys
An Object Definition ID for lead storage

Site-Wide Installation

Add the Universal Script to all pages on your Webflow site through Project Settings.

Open Project Settings

In the Webflow Designer, click the gear icon in the left panel to open Project Settings.

Navigate to Custom Code

Click on the "Custom Code" tab in the settings menu.

Add the Script

In the "Footer Code" section (before </body> tag), paste the Universal Script:

Publish Your Site

Click "Publish" to push the changes live. The script will now be active on all pages.

<!-- Kantos Universal Script -->
<script
  src="https://cdn.kantos.ai/intake.js"
  data-api-key="YOUR_API_KEY"
  data-object-definition-id="YOUR_OBJECT_DEFINITION_ID"
  data-success-redirect="/thank-you"
  defer
></script>

Page-Specific Installation

If you only want to capture forms on specific pages, add the script to individual pages instead.

Select the Page

In the Pages panel, click the settings icon next to the page where you want to add the script.

Open Page Settings

A settings panel will open for that specific page.

Add Custom Code

Scroll down to the "Custom Code" section and paste the script in "Before </body> tag".

Publish

Publish your site to make the changes live.

Webflow Native Forms

The Universal Script works with Webflow's native form elements. When building your form:

Use meaningful name attributes - Add name attributes to all form fields in the element settings panel
Standard form structure - Use the Form Block component with proper Input, Label, and Button elements
Success/Error states - Configure Webflow's form states as fallbacks, but the redirect will take precedence

Field Naming Best Practices

In the element settings panel, give each input a descriptive name attribute:

name, full_name, or fullName for names
email or email_address for emails
phone or phone_number for phone numbers
message or comments for text areas

Using Custom HTML Embed

You can also create forms using Webflow's HTML Embed element for more control:

<form id="contact-form">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="company">Company</label>
  <input type="text" id="company" name="company" />

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <button type="submit">Send Message</button>
</form>

Webflow Form Settings

When the Universal Script is active, it intercepts form submissions before they reach Webflow's form handling. You can:

Disable Webflow form submissions - In Form Settings, you can leave the action empty since Kantos handles submissions
Keep as backup - Configure Webflow form notifications as a fallback if needed
Use redirect attribute - The data-success-redirect will override Webflow's redirect settings

Multi-Form Pages

If you have multiple forms on a page (e.g., header contact form and footer newsletter), the script captures all of them. Use different Object Definitions or AI classification to route them appropriately.

Form Identification

Each form's id or the first form field's name is included in the submission metadata, helping you identify the form source in your CRM.

Webflow Interactions

If you're using Webflow Interactions on your forms (animations, transitions), the Universal Script works alongside them. The script triggers after the native submit event, so your animations will still play.

Testing Your Integration

Preview or Publish

The script works in both preview mode and on your published site.

Submit a Test Form

Fill out your form with test data and submit.

Check Your CRM

Log into Kantos and verify the record was created in your target object.

Verify Redirect

Confirm you were redirected to your thank-you page.

Troubleshooting

Form not submitting to Kantos

Ensure the script is published (not just saved in the Designer)
Check browser console for errors
Verify your API key is correct and active
Make sure the Object Definition ID exists

Webflow form validation interfering

Webflow has built-in form validation. The Universal Script respects browser validation, so required fields must be filled before submission occurs.

Redirect not working

Ensure the redirect path exists on your Webflow site
Use absolute paths (starting with /) or full URLs
Check that the thank-you page is published

Next Steps

Set up AI classification to automatically categorize leads
Enable spam protection to filter out bot submissions
Create automations to respond to new form submissions

Webflow Integration