Webflow Integration Example - Inspeqt Quote Form

🚀 Live Web Component Demo

This is exactly how the form will appear in your Webflow site. The form below is a fully functional Web Component with all the features you need.

💡 Integration Note: This form automatically adapts to your Webflow design system, inherits your fonts and colors, and provides a native mobile experience.

📊 Performance Benefits

80%

Smaller Bundle

187kB

Core Bundle Size

42kB

Gzipped Size

1

HTTP Request

✨ Key Features

📱 Mobile Optimized

Native mobile experience with responsive design and touch-friendly interactions.

🎨 Theme Integration

Automatically inherits your Webflow design system and adapts to light/dark themes.

♿ Accessibility

Built-in screen reader support, keyboard navigation, and WCAG compliance.

🔍 SEO Friendly

Form content is fully indexed by search engines, improving your site's SEO.

⚡ Fast Loading

Progressive loading ensures core functionality loads instantly.

🔧 Easy Integration

Simple embed code that works with any Webflow plan and design.

🛠️ Webflow Integration Code

Here's exactly what you need to add to your Webflow site:

1. Add to Site Settings → Custom Code → Head Code:

                <!-- Dependencies -->
                <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
                <script src="https://unpkg.com/pinia@2/dist/pinia.iife.js"></script>

                <!-- Your deployed Web Component -->
                <script src="https://your-app.fly.dev/dist/inspeqt-quote-form.umd.js"></script>
            

2. Add to any page using an Embed element:

                <inspeqt-quote-form
                id="your-unique-form-id"
                ref="your-webflow-site-name"
                primary-color="#4299e1"
                theme="auto"
                success-strategy="redirect"
                success-page-url="/thank-you">
                </inspeqt-quote-form>

                <style>
                inspeqt-quote-form {
                display: block;
                width: 100%;
                max-width: 800px;
                margin: 2rem auto;
                }
                </style>
            

🎯 Next Steps

Ready to integrate this into your Webflow site?

Deploy to Fly.io: Run npm run deploy
Get your CDN URL: Copy the deployment URL
Add to Webflow: Follow the integration code above
Customize: Match your brand colors and styling
Test: Verify on mobile and desktop
Publish: Go live with your improved form!

Webflow Integration Demo