Form Embed SDK

Quick Start

Add a FileGrab form to any website with two lines of HTML. No backend, no API keys, no build step required.

<div id="filegrab-form"></div>
<script src="https://filegrab.link/widget/filegrab-widget.umd.js"></script>
<script>
  FileGrabWidget.form({
    formId: 'YOUR_FORM_ID',
    container: '#filegrab-form',
  });
</script>

Replace YOUR_FORM_ID with the ID from your form's settings panel. The form renders inside an iframe with full CSS isolation, so your site's styles won't conflict with the form and vice versa.

Colors

Pass a theme object to override the default colors. All color values should be valid CSS colors (hex, rgb, hsl).

<script>
  FileGrabWidget.form({
    formId: 'YOUR_FORM_ID',
    container: '#filegrab-form',
    theme: {
      primaryColor: '#0d9488',
      backgroundColor: 'transparent',
      textColor: '#1a2e35',
    },
  });
</script>

Fonts

Load custom fonts inside the embedded form's iframe. Use fontCssUrl to point to a stylesheet (like Google Fonts), then set fontFamily and headingFontFamily.

<script>
  FileGrabWidget.form({
    formId: 'YOUR_FORM_ID',
    container: '#filegrab-form',
    theme: {
      fontCssUrl: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap',
      fontFamily: "'Inter', sans-serif",
      headingFontFamily: "'Inter', sans-serif",
    },
  });
</script>

Since the form renders in an iframe, fonts loaded on your host page are not automatically available inside the form. You must provide fontCssUrl so the iframe loads the fonts independently.

Spacing & Layout

Control the spacing, padding, and sizing of form elements to match your site's design language.

<script>
  FileGrabWidget.form({
    formId: 'YOUR_FORM_ID',
    container: '#filegrab-form',
    theme: {
      borderRadius: '8px',
      inputPadding: '16px 24px',
      fieldGap: '32px',
      labelFontWeight: '600',
      labelFontSize: '15px',
      inputFontSize: '16px',
    },
  });
</script>

Submit Button

Customize the submit button's shape and typography independently from the rest of the form. The button automatically inherits the font family from the form's fontFamily setting.

<script>
  FileGrabWidget.form({
    formId: 'YOUR_FORM_ID',
    container: '#filegrab-form',
    theme: {
      primaryColor: '#0d9488',
      buttonPadding: '24px 64px',
      buttonFontSize: '16px',
      buttonFontWeight: '600',
      buttonBorderRadius: '9999px',
    },
  });
</script>

The button background color is controlled by primaryColor. To create a pill-shaped button, set buttonBorderRadius to '9999px'.

Form Title

Control the font size of the form title heading to match your site's heading scale. Accepts any CSS font-size value including clamp() for responsive sizing.

<script>
  FileGrabWidget.form({
    formId: 'YOUR_FORM_ID',
    container: '#filegrab-form',
    theme: {
      titleFontSize: 'clamp(1.75rem, 3vw, 2.25rem)',
    },
  });
</script>

The title font family is controlled by headingFontFamily. If not set, it uses the form's display font.

Density Presets

Instead of setting each spacing value individually, use the density preset to apply a consistent spacing scale. Individual tokens always override preset values if both are set.

<script>
  FileGrabWidget.form({
    formId: 'YOUR_FORM_ID',
    container: '#filegrab-form',
    theme: {
      density: 'spacious',
    },
  });
</script>

You can combine a preset with individual overrides. For example, start with density: 'spacious' and override just the button radius:

theme: {
  density: 'spacious',
  buttonBorderRadius: '9999px',
}

Captcha Theme

Every form includes Cloudflare Turnstile bot protection. By default the captcha widget uses a light appearance. On dark backgrounds, switch to 'dark' or 'auto' to follow the visitor's system preference.

<script>
  FileGrabWidget.form({
    formId: 'YOUR_FORM_ID',
    container: '#filegrab-form',
    captchaTheme: 'dark',
  });
</script>

Callbacks

React to form lifecycle events with callback functions.

<script>
  FileGrabWidget.form({
    formId: 'YOUR_FORM_ID',
    container: '#filegrab-form',
    onReady: function() {
      console.log('Form loaded');
    },
    onSubmit: function() {
      console.log('Form submitted successfully');
    },
    onError: function(error) {
      console.error('Submission failed:', error);
    },
  });
</script>

Full Example

Here is a complete example that matches a form to a host site using a serif heading font, sans-serif body, teal accent, spacious layout, and a pill-shaped submit button.

<div id="filegrab-form"></div>
<script src="https://filegrab.link/widget/filegrab-widget.umd.js"></script>
<script>
  FileGrabWidget.form({
    formId: 'YOUR_FORM_ID',
    container: '#filegrab-form',
    captchaTheme: 'light',
    theme: {
      // Colors
      primaryColor: '#0d9488',
      backgroundColor: 'transparent',
      textColor: '#1a2e35',

      // Fonts (loaded inside the iframe)
      fontCssUrl: 'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Nunito+Sans:wght@400;500;600&display=swap',
      fontFamily: "'Nunito Sans', sans-serif",
      headingFontFamily: "'Cormorant Garamond', Georgia, serif",

      // Spacing
      borderRadius: '8px',
      inputPadding: '16px 24px',
      fieldGap: '32px',
      labelFontWeight: '600',
      labelFontSize: '15px',
      inputFontSize: '16px',

      // Submit button
      buttonPadding: '24px 64px',
      buttonFontSize: '16px',
      buttonFontWeight: '600',
      buttonBorderRadius: '9999px',

      // Title
      titleFontSize: 'clamp(1.75rem, 3vw, 2.25rem)',
    },
    onReady: function() {
      console.log('Form ready');
    },
    onSubmit: function() {
      console.log('Submitted');
    },
  });
</script>

All Options Reference

Complete list of every option accepted by FileGrabWidget.form().

Theme Properties

ES Module Import

If your site uses a bundler (Vite, webpack, etc.), you can import the ESM build instead:

<script type="module">
  import { form } from 'https://filegrab.link/widget/filegrab-widget.esm.js';

  form({
    formId: 'YOUR_FORM_ID',
    container: '#filegrab-form',
    theme: { primaryColor: '#0d9488' },
  });
</script>

Need Help?

Build your form at /form/new, customize it visually in the form builder, then copy the embed code from the settings panel. Add a theme object to match your site's design.

Questions? Get in touch.