Fillable forms

Forme's TextField, Checkbox, Dropdown, and RadioButton create interactive AcroForm fields. Use them when the recipient needs to edit the PDF in a compatible viewer.

Create a document with fields

Give each field a stable name. Radio buttons share a name for their group and use distinct values. Values supplied by Vue are initial PDF values; these components do not bind edits made later in a PDF viewer back to Vue. Keep visible labels beside fields.

FillableFormDocument.vue

<script setup lang="ts">
  import {
    Checkbox,
    Document,
    Dropdown,
    H1,
    Page,
    RadioButton,
    Text,
    TextField,
  } from '@formepdf/vue';

  defineProps<{ fullName?: string }>();
</script>

<template>
  <Document
    title="Contact preferences"
    lang="en"
  >
    <Page
      size="A4"
      :margin="48"
    >
      <H1>Contact preferences</H1>
      <Text>Full name</Text>
      <TextField
        name="fullName"
        :value="fullName ?? 'Ada Lovelace'"
        :width="260"
      />
      <Text>Department</Text>
      <Dropdown
        name="department"
        :options="['Engineering', 'Support']"
        value="Engineering"
        :width="260"
      />
      <Text>Send product updates</Text>
      <Checkbox
        name="updates"
        :checked="true"
      />
      <Text>Contact by email</Text>
      <RadioButton
        name="contactMethod"
        value="email"
        :checked="true"
      />
      <Text>Contact by phone</Text>
      <RadioButton
        name="contactMethod"
        value="phone"
      />
    </Page>
  </Document>
</template>

Render editable or flattened output

On the server, renderDocument forwards flattenForms to the core renderer. The default output keeps fields interactive. With flattenForms: true, Forme paints the supplied field values into page content and removes interactive widgets. This renders your source values; it does not load or flatten a PDF that a recipient has already edited.

Server rendering

import { renderDocument } from '@formepdf/vue'
import FillableFormDocument from '@/components/pdf/FillableFormDocument.vue'

const props = { fullName: 'Grace Hopper' }
const editablePdf = await renderDocument(FillableFormDocument, { props })
const staticPdf = await renderDocument(FillableFormDocument, {
  props,
  flattenForms: true,
})

Browser rendering

import { serialize } from '@formepdf/vue'
import { init, renderSerializedDoc } from '@formepdf/core/worker'
import wasmUrl from '@formepdf/core/pkg-web/forme_bg.wasm?url'
import FillableFormDocument from '@/components/pdf/FillableFormDocument.vue'

await init(wasmUrl)
const document = await serialize(FillableFormDocument, { props: { fullName: 'Grace Hopper' } })
const staticPdf = await renderSerializedDoc(document, { flattenForms: true })

Choose the right kind of form

pdfcn-vue's PdfForm and the medical intake block lay out static labels and values. They do not create interactive fields. Use the Forme primitives above for editable output. A readOnly field still exists as a widget; flattenForms removes widgets from the generated PDF.

Test editing and saving in the viewers your recipients use. Browser PDF previews differ in field support. For archival or accessible output, also follow the PDF standards guide.