@formdata/vue

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

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'
  }"
/>

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
  }"
/>

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
  }"
/>

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'
  }"
/>

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'
  }"
/>

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'
  }"
/>

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
  }"
/>

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