Lead Form Web Component

How to Use

Include the embed script in your HTML page:

<script 
  src="https://lead-form-webcomponent.pages.dev/embed.js" 
  data-title="Contact Us"
  data-position="right"
  data-color="#2196f3"
  async></script>

Configuration Options

Customize the form with these data attributes:

• data-title: Form title (default: "Contact Us")
• data-submit-url: API endpoint for form submission (default: "/api/submit")
• data-success-message: Message shown after successful submission
• data-position: Button position, "left" or "right" (default: "right")
• data-color: Primary color in hex code (default: "#2196f3")
• data-initially-open: "true" to show form on page load (default: "false")

Live Demo

Click the buttons below to see different configurations:

API Integration

The form submits data to your specified endpoint as JSON:

{
  "name": "John Doe",
  "email": "john@example.com",
  "phone": "123-456-7890",
  "interest": "Product Information",
  "message": "I'd like to learn more about your services."
}