Form-Data Vue Component

A Vue 3 component for embedding Form-Data forms in your Vue applications.

Installation

npm install @formdata/vue

Usage

Register globally

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { FormDataPlugin } from '@formdata/vue'

const app = createApp(App)
app.use(FormDataPlugin)
app.mount('#app')

Import and use component directly

<template>
  <div>
    <h1>My Form</h1>
    <FormDataForm
      url="https://forms.form-data.com/your-form-id/embed"
      mode="sidebar"
      trigger="fab"
      :fab="{ icon: 'smilies', background: '#86c3e8' }"
    />
  </div>
</template>

<script>
import { FormDataForm } from '@formdata/vue'

export default {
  components: {
    FormDataForm
  }
}
</script>

Props

The component accepts the following props:

Basic Configuration

| Prop | Type | Default | Description | |----------------|-----------|---------|-----------------------------------------------------------------| | url | string | Required | Direct URL to the form | | mode | string | 'inline' | Display mode ('inline', 'popup', 'sidebar', 'floating') | | trigger | string | 'none' | Trigger type ('none', 'fab', 'tab') | | params | object | {} | Parameters passed to the form as query params | | id | string | - | Custom ID for the form instance | | debug | boolean | false | When set, adds debug messages to the console | | globalPropName | string | 'joy' | Name of the global function to use (useful for multiple forms) |

Note: The url parameter is required and must be a direct form embed URL.

Mode Configuration

Inline Mode

When mode is set to 'inline':

<FormDataForm
  url="https://forms.form-data.com/your-form-id/embed"
  mode="inline"
  :inline="{ 
    width: '500px',
    maxWidth: '100vw'
  }"
/>

| Prop | Type | Default | Description | |------|------|---------|-------------| | selector | string | - | CSS selector for the container | | width | string | '100%' | Width of the form | | maxWidth | string | '100vw' | Maximum width of the form |

Popup Mode

When mode is set to 'popup':

<FormDataForm
  url="https://forms.form-data.com/your-form-id/embed"
  mode="popup"
  :popup="{ 
    width: '800px',
    height: '600px',
    overlay: true
  }"
/>

| Prop | Type | Default | Description | |------|------|---------|-------------| | zIndex | string/number | 99999 | z-index value | | transitionDuration | string | '300ms' | Animation duration | | radius | string | '8px' | Border radius | | width | string | - | Width of the popup | | height | string | - | Height of the popup | | overlay | boolean | false | Whether to show overlay | | closeButton | boolean | true | Whether to show close button |

Sidebar Mode

When mode is set to 'sidebar':

<FormDataForm
  url="https://forms.form-data.com/your-form-id/embed"
  mode="sidebar"
  :sidebar="{ 
    side: 'right',
    width: '600px',
    overlay: true
  }"
/>

| Prop | Type | Default | Description | |------|------|---------|-------------| | side | string | 'right' | Side to display ('left', 'right') | | width | string | '600px' | Width of the sidebar | | transitionDuration | string | '300ms' | Animation duration | | overlay | boolean | false | Whether to show overlay | | zIndex | string/number | 99999 | z-index value | | closeButton | boolean | true | Whether to show close button |

Floating Mode

When mode is set to 'floating':

<FormDataForm
  url="https://forms.form-data.com/your-form-id/embed"
  mode="floating"
  :floating="{ 
    width: '350px',
    side: 'right',
    radius: '8px'
  }"
/>

| Prop | Type | Default | Description | |------|------|---------|-------------| | width | string | '350px' | Width of the widget | | maxWidth | string | '100vw' | Maximum width | | overlay | boolean | false | Whether to show overlay | | side | string | 'right' | Side to display ('left', 'right') | | zIndex | string/number | 99999 | z-index value | | transitionDuration | string | '300ms' | Animation duration | | radius | string | '8px' | Border radius | | closeButton | boolean | true | Whether to show close button |

Trigger Configuration

FAB Trigger

When trigger is set to 'fab':

<FormDataForm
  url="https://forms.form-data.com/your-form-id/embed"
  trigger="fab"
  :fab="{ 
    background: '#86c3e8',
    icon: 'smilies',
    side: 'right'
  }"
/>

| Prop | Type | Default | Description | |------|------|---------|-------------| | background | string | - | Button background color | | width | string | '50px' | Button size | | zIndex | string/number | 99999 | z-index value | | color | string | - | Icon color | | onOpenMode | string | 'hide' | Behavior when open ('close', 'hide') | | side | string | 'right' | Side to display ('left', 'right') | | icon | string | - | Icon to display | | iconSize | string | '50%' | Size of the icon | | iconOnly | boolean | false | Whether to show only the icon | | shadow | string | - | Box shadow for the button |

Tab Trigger

When trigger is set to 'tab':

<FormDataForm
  url="https://forms.form-data.com/your-form-id/embed"
  trigger="tab"
  :tab="{ 
    background: '#27bdf6',
    label: 'Feedback',
    side: 'right'
  }"
/>

| Prop | Type | Default | Description | |------|------|---------|-------------| | background | string | '#00a3dd' | Tab background color | | borderRadius | string | '3px' | Border radius | | zIndex | string/number | 99999 | z-index value | | color | string | '#ffffff' | Text color | | side | string | 'right' | Side to display ('left', 'right') | | label | string | 'Feedback' | Text to display | | bottom | string | '20%' | Distance from bottom of screen |

Overlay Configuration

When overlay is set to true in popup, sidebar, or floating modes:

<FormDataForm
  url="https://forms.form-data.com/your-form-id/embed"
  mode="popup"
  :popup="{ overlay: true }"
  :overlay="{ 
    opacity: 0.6,
    color: '#000',
    closeOnClick: true
  }"
/>

| Prop | Type | Default | Description | |------|------|---------|-------------| | zIndex | string/number | 999 | z-index value | | color | string | '#000' | Overlay color | | opacity | number | 0.5 | Opacity (0-1) | | closeOnClick | boolean | true | Close when overlay clicked | | transitionDuration | string | '300ms' | Animation duration |

Methods

The component exposes the following methods for controlling the form:

<template>
  <div>
    <button @click="openForm">Open Form</button>
    <button @click="closeForm">Close Form</button>
    <button @click="toggleForm">Toggle Form</button>
    
    <FormDataForm
      ref="myForm"
      url="https://forms.form-data.com/your-form-id/embed"
      mode="sidebar"
    />
  </div>
</template>

<script>
import { FormDataForm } from '@formdata/vue'

export default {
  components: {
    FormDataForm
  },
  methods: {
    openForm() {
      this.$refs.myForm.openForm();
    },
    closeForm() {
      this.$refs.myForm.closeForm();
    },
    toggleForm() {
      this.$refs.myForm.toggleForm();
    }
  }
}
</script>

License

MIT