Embedded Forms

Embedded Forms let you expose any APIVerve API as a visual, no-code interface. Embed a ready-to-use GUI on your website, internal tools, or documentation - allowing anyone to run APIs without writing a single line of code.

Quick Access: Manage your forms in the VerveKit Dashboard.

Key Features

Secure Token-Based AuthenticationForms use encrypted tokens (avf_*) instead of exposing your API keys, keeping your credentials safe from client-side access.
CAPTCHA ProtectionBuilt-in CAPTCHA verification prevents automated abuse and bot attacks, protecting your API quota and preventing spam.
Domain RestrictionsControl which domains can use your forms with whitelist restrictions. Supports wildcards for subdomain matching.
Customizable ThemingChoose from multiple layouts (compact, standard, relaxed), color schemes (light, dark), and custom primary colors to match your brand.
Simple IntegrationEmbed with just a <div> and <script> tag. Works with any framework: HTML, React, Vue, Angular, Next.js, and more.
Responsive DesignForms automatically adapt to mobile, tablet, and desktop screens with optimized layouts for all devices.

Use Cases

Use Case	Description	Best For
Website Tools	Embed an API as a free tool on your website. Let visitors use QR code generators, email validators, unit converters, and more - driving traffic and engagement.	Blogs, resource sites, tool directories
Internal Business Tools	Give your team a no-code way to run APIs. Operations staff can validate data, generate reports, or process information without developer help.	Back-office operations, support teams, data entry
Prototyping & Testing	Quickly test API functionality before writing integration code. Experiment with parameters and see real responses instantly.	Developers, product teams, QA testing
Client Demos	Show clients or stakeholders what an API can do with a live, interactive demo - no technical setup required on their end.	Sales demos, client presentations, proof of concepts
Documentation & Tutorials	Embed live API examples directly in your docs. Readers can try the API themselves without leaving the page.	API documentation, developer guides, tutorials
No-Code Workflows	Enable non-technical users to leverage API capabilities. Marketing can generate content, support can look up data, anyone can use the tools.	Cross-functional teams, non-technical users

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="qrcodegenerator"
     data-token="YOUR_FORM_TOKEN"
     data-captcha="true"
     data-layout="standard"
     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	auto	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, false	false	Demo mode (no token required, mock data)
`data-showjson`	true, false	false	Show JSON response tabs in results
`data-width`	CSS width value	100%	Width of the form (e.g., "100%", "600px")
`data-param-*`	Any value	-	Pre-fill API parameters (e.g., data-param-email="[email protected]")

Integration Examples

HTML / Static Sites

HTML Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>QR Code Generator Tool</title>
</head>
<body>
  <h1>Free QR Code Generator</h1>

  <div id="apiverve-form"
       data-api-id="qrcodegenerator"
       data-token="YOUR_FORM_TOKEN"
       data-captcha="true"
       data-layout="standard"
       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 QRCodeTool() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://forms.apiverve.com/embed.js';
    script.async = true;
    document.body.appendChild(script);

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

  return (
    <div>
      <h1>QR Code Generator</h1>
      <div
        id="apiverve-form"
        data-api-id="qrcodegenerator"
        data-token="YOUR_FORM_TOKEN"
        data-captcha="true"
        data-layout="standard"
        data-primary="#635bff"
      />
    </div>
  );
}

Vue.js

Vue.js Example

<template>
  <div>
    <h1>QR Code Generator</h1>
    <div
      id="apiverve-form"
      data-api-id="qrcodegenerator"
      :data-token="formToken"
      data-captcha="true"
      data-layout="standard"
      data-primary="#635bff"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      formToken: 'YOUR_FORM_TOKEN'
    }
  },
  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
auto	Matches user's system preference (default)
light	Light background, dark text
dark	Dark background, light text

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: The default color scheme is "auto", which automatically matches your users' system dark/light mode preference. Only override this if you need to force a specific theme.

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