Embedding forms on your website

FormKove forms are designed to drop into any website with a single snippet of code. You have two embedding options: our JS embed (recommended) and an iframe fallback.

JS Embed (recommended)

The JS embed is a <script> tag that loads FormKove’s rendering engine and applies your form’s styling automatically. It supports:

• Full CSS customization via your own stylesheet
• Responsive design out of the box
• Form state management and validation

Standard embed

Add this before the closing </body> tag on your page:

<script src="https://cdn.formkove.com/js/embed.js" data-form="YOUR_FORM_ID"></script>

React / Next.js

import { useEffect } from 'react';

export default function ContactForm() {
  useEffect(() => {
    // Load the FormKove embed script
    const script = document.createElement('script');
    script.src = 'https://cdn.formkove.com/js/embed.js';
    script.async = true;
    script.setAttribute('data-form', 'YOUR_FORM_ID');
    document.body.appendChild(script);

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

  return <div data-form="YOUR_FORM_ID"></div>;
}

Vue 3

<template>
  <div ref="formContainer" data-form="YOUR_FORM_ID"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const formContainer = ref(null);

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://cdn.formkove.com/js/embed.js';
  script.async = true;
  script.setAttribute('data-form', 'YOUR_FORM_ID');
  document.body.appendChild(script);
});

onUnmounted(() => {
  // Cleanup if needed
});
</script>

iframe Embed

If JavaScript isn’t available or is restricted in your setup, use the iframe embed:

<iframe
  src="https://formkove.com/embed/YOUR_FORM_ID"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; border-radius: 8px;"
></iframe>

Platform-specific guides

WordPress

1. In the WordPress editor, add a Custom HTML block
2. Paste your FormKove embed code
3. Save and preview

Squarespace

1. Edit your page and add a Code block
2. Select HTML and paste the embed code
3. The form will render on publish

Webflow

1. Add an Embed element to your page
2. Paste the FormKove embed code
3. Publish and test

Customizing appearance

Height adjustment

The JS embed auto-adjusts its height. If needed, you can set a fixed or minimum height via CSS:

[data-form="YOUR_FORM_ID"] {
  min-height: 500px;
}

Theme matching

FormKove forms inherit your site’s font family by default. To match your brand colors, update your form’s theme in the FormKove editor under Settings → Branding.

CSS overrides

Apply custom styles targeting the form’s container. The embed loads inside a <div data-form="..."> element:

[data-form="YOUR_FORM_ID"] .fk-submit-button {
  background-color: #7c3aed;
  border-radius: 8px;
}

Troubleshooting

Form isn’t rendering Check that your browser isn’t blocking the FormKove CDN domain. Also verify your data-form attribute matches the form ID from your FormKove dashboard exactly.

Form looks misaligned Wrap the embed in a container div on your page with max-width set to match your site’s content width.

Form not loading on mobile The JS embed is responsive by default. If you have custom CSS interfering, add !important to your layout rules.