Forms

VerveKit Forms enables you to create secure, embeddable forms that call your APIs without exposing your API keys. Perfect for contact forms, feedback collection, data submission, and any scenario where you need public-facing forms that interact with your APIs.

Quick Access: Manage your forms in the VerveKit Dashboard.

Key Features

Secure Token-Based Authentication

Forms use encrypted tokens (avf_*) instead of exposing your API keys, keeping your credentials safe from client-side access.

CAPTCHA Protection

Built-in CAPTCHA verification prevents automated abuse and bot attacks, protecting your API quota and preventing spam.

Domain Restrictions

Control which domains can use your forms with whitelist restrictions. Supports wildcards for subdomain matching.

Customizable Theming

Choose from multiple layouts (compact, standard, relaxed), color schemes (light, dark), and custom primary colors to match your brand.

Simple Integration

Embed with just a <div> and <script> tag. Works with any framework: HTML, React, Vue, Angular, Next.js, and more.

Responsive Design

Forms automatically adapt to mobile, tablet, and desktop screens with optimized layouts for all devices.

Use Cases

Use Case	Description	Best For
Contact Forms	Accept customer inquiries, support requests, or general contact submissions that route to your CRM or notification system.	Business websites, landing pages, support portals
Lead Generation	Capture lead information from marketing campaigns and automatically sync to your sales pipeline or marketing automation tools.	Marketing sites, campaign landing pages, sales funnels
Feedback Collection	Gather user feedback, product reviews, or satisfaction surveys with structured data submission to your analytics system.	Product pages, post-purchase flows, beta programs
Data Submission	Allow users to submit structured data (applications, registrations, orders) that processes through your API workflows.	Application portals, registration systems, order forms
API Testing	Provide interactive examples and live demos of your API capabilities directly in documentation or showcase pages.	API documentation, marketplace listings, developer portals
Event Registration	Accept event sign-ups, webinar registrations, or appointment bookings with automatic confirmation workflows.	Event pages, webinar sites, booking systems

Getting Started

Step 1: Enable a Form

Log in to the VerveKit Dashboard
Select an API from the list
Toggle the "Enable Form" switch
Configure your form options (layout, theme, CAPTCHA, domains)
Copy the generated embed code

Pro Tip: A secure token (avf_*) is automatically generated when you enable a form. You can regenerate this token anytime from the dashboard if needed.

Step 2: Embed in Your Website

Add the embed code to your HTML page:

Basic Embed Code

<div id="apiverve-form"
     data-api-id="advice"
     data-token="avf_xxx"
     data-captcha="true"
     data-layout="standard"
     data-color="light"
     data-primary="#635bff">
</div>
<script src="https://forms.apiverve.com/embed.js"></script>

Step 3: Test Your Form

Open your page in a browser and test the form submission. The form will call your API using your credentials securely without exposing your API key to the client.

Success! Your form is now live and accepting submissions. All data is securely transmitted to your API with proper authentication.

Configuration Options

Customize your form using data attributes on the embed div:

Attribute	Values	Default	Description
`data-api-id`	String	Required	The API identifier (e.g., "advice", "weatherapi")
`data-token`	String (avf_*)	Required	Your secure form token from the dashboard
`data-layout`	compact, standard, relaxed	standard	Form spacing and density
`data-color`	light, dark, auto	light	Color scheme (auto matches system preference)
`data-primary`	Hex color	#635bff	Primary color for buttons and accents
`data-captcha`	true, false	true	Enable/disable CAPTCHA verification
`data-height`	CSS height value or "auto"	auto	Fixed height for the iframe
`data-max-height`	CSS height value	none	Maximum height with scrolling
`data-demo`	true	-	Demo mode (no token required, mock data)

Integration Examples

HTML / Static Sites

HTML Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Contact Form</title>
</head>
<body>
  <h1>Contact Us</h1>

  <div id="apiverve-form"
       data-api-id="advice"
       data-token="avf_ggA3ja8-L1c6R-PFeZCJDoSfzFaDN3yNsKe04q4I2SJaXorb5DyencS6olm7P6D3Jid5L6asJES0byUjmHw9ZJWPRAu-qcpAfBwNSVPNo8MxYRnk-6UAxKsh38dWFDyT"
       data-captcha="true"
       data-layout="standard"
       data-color="light"
       data-primary="#635bff">
  </div>
  <script src="https://forms.apiverve.com/embed.js"></script>
</body>
</html>

React / Next.js

React Example

import { useEffect } from 'react';

export default function ContactForm() {
  useEffect(() => {
    // Load embed script
    const script = document.createElement('script');
    script.src = 'https://forms.apiverve.com/embed.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      // Cleanup
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div>
      <h1>Contact Us</h1>
      <div
        id="apiverve-form"
        data-api-id="advice"
        data-token="avf_xxx"
        data-captcha="true"
        data-layout="standard"
        data-color="light"
        data-primary="#635bff"
      />
    </div>
  );
}

Vue.js

Vue.js Example

<template>
  <div>
    <h1>Contact Us</h1>
    <div
      id="apiverve-form"
      data-api-id="advice"
      :data-token="formToken"
      data-captcha="true"
      data-layout="standard"
      data-color="light"
      data-primary="#635bff"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      formToken: 'avf_xxx'
    }
  },
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://forms.apiverve.com/embed.js';
    script.async = true;
    document.body.appendChild(script);
  }
}
</script>

Framework Support: The embed script works with any JavaScript framework. Just ensure the script is loaded after the div element is in the DOM.

Security Features

Token-Based Authentication

Forms use encrypted tokens (avf_*) instead of your API key. Each token:

Encrypts user and API identifiers: Tokens contain encrypted userId and apiId
Cannot be reverse-engineered: Uses AES-256 encryption
Can be regenerated: Revoke compromised tokens instantly from the dashboard
Scoped to specific APIs: Each token only works for one API

CAPTCHA Protection

Built-in CAPTCHA prevents automated abuse:

Bot prevention: Blocks automated form submissions
Time-based expiration: CAPTCHA solutions expire after 5 minutes
Visual challenges: Math problems or simple puzzles
Optional: Disable for internal/trusted sites

Warning: Disabling CAPTCHA exposes your API to automated abuse. Only disable for internal sites where you control access.

Domain Restrictions

Control which domains can use your forms:

Whitelist specific domains: example.com, mysite.org
Wildcard subdomains: *.example.com matches all subdomains
Multiple domains: Comma-separated list
Leave blank: Allow all domains (not recommended for production)

Domain Configuration Examples

# Single domain
example.com

# Multiple domains
example.com, mysite.org, demo.app

# Wildcard subdomains
*.example.com

# Mixed
example.com, *.mysite.org, demo.app

Customization

Layout Options

Layout	Description	Best For
compact	Minimal spacing, tight layout	Sidebars, modals, limited space
standard	Balanced spacing, comfortable layout	Most use cases, general pages
relaxed	Generous spacing, airy layout	Landing pages, prominent forms

Color Schemes

Scheme	Description
light	Light background, dark text (default)
dark	Dark background, light text
auto	Matches user's system preference

Custom Branding

Set a custom primary color to match your brand:

Custom Primary Color

<div id="apiverve-form"
     data-api-id="advice"
     data-token="avf_xxx"
     data-primary="#ff6b6b">
</div>

Best Practices

Security Best Practices

Enable CAPTCHA for public forms: Always use CAPTCHA protection on publicly accessible forms to prevent abuse
Set domain restrictions: Whitelist only the domains where your form will be embedded
Regenerate tokens periodically: Rotate tokens every few months for enhanced security
Monitor usage: Check your API usage regularly for suspicious activity
Use HTTPS: Always embed forms on HTTPS pages to ensure encrypted transmission

Performance Best Practices

Load script asynchronously: Use async attribute to avoid blocking page load
Place script at end of body: Load after main content for better perceived performance
Set appropriate heights: Use data-height or data-max-height to prevent layout shifts
Cache embed script: The embed.js script is CDN-cached for fast loading

User Experience Best Practices

Match your site theme: Use data-color and data-primary to match your brand
Choose appropriate layout: Use compact for tight spaces, relaxed for prominent forms
Provide clear instructions: Add helpful text above the form explaining what to submit
Handle errors gracefully: The form displays API errors - ensure your API returns user-friendly messages
Test on mobile: Verify the form works well on mobile devices

Pro Tip: Use data-color="auto" to automatically match your users' system dark/light mode preference, providing a better user experience without manual configuration.

Troubleshooting

Form Not Appearing

Check script loading: Verify the embed.js script is loaded after the div element
Verify data-api-id: Ensure it matches an enabled form in your dashboard
Check browser console: Look for JavaScript errors or warnings
Disable ad blockers: Some ad blockers may interfere with the embed script

Domain Restriction Errors

Verify domain format: Use exact domain without protocol (example.com, not https://example.com)
Check subdomain wildcards: Use *.example.com to match all subdomains
Test from allowed domain: Ensure you're testing from a whitelisted domain
Clear cache: Browser cache may show old restrictions

CAPTCHA Issues

Check CAPTCHA setting: Verify data-captcha="true" matches dashboard setting
Refresh if expired: CAPTCHA expires after 5 minutes - refresh the page
Disable for testing: Temporarily disable CAPTCHA in dashboard for debugging

Submission Errors

Verify token validity: Token may be invalid or regenerated - get new code from dashboard
Check API status: Ensure the target API is operational
Review API parameters: Form fields must match API parameter requirements
Check API key validity: Your account API key must be active

Need Help? Contact support at [email protected] with your form ID and error details.

Frequently Asked Questions

Is there a cost to use Forms?

Forms are free to use. Form submissions count toward your regular API usage and are billed based on your account plan. Each submission uses the same quota as a direct API call.

Can I use multiple forms on one page?

Yes! Each form needs a unique ID. Change id="apiverve-form" to unique IDs likeid="apiverve-form-1", id="apiverve-form-2", etc.

Can I customize the form fields?

Form fields are automatically generated based on the API's parameters. The embed script reads the API schema and creates appropriate input fields for each parameter.

Does it work with custom APIs?

Currently, Forms work with APIVerve's public API catalog. Support for custom/private APIs is coming soon.

Can I style the form with CSS?

The form runs in an iframe for security, so direct CSS styling is not possible. Use the data-primary attribute to customize the primary color, and choose from layout and color scheme options.

What happens if my token is compromised?

Regenerate your token immediately from the dashboard. The old token will stop working instantly, and you'll receive a new embed code with the updated token.

Can I track form submissions?

Form submissions appear in your API usage dashboard. Detailed analytics and submission tracking features are coming soon.

Was this page helpful?

Help us improve our documentation