Vue Gravity Forms is a Vue 3 component which allows you to render and process Gravity Forms in a headless WordPress environment via the Companion WordPress Plugin. This component will work in any environment where Vue is supported (such as Astro.js). Currently, it supports all Basic and Advanced field types, confirmation messages and redirects, file uploads, multipage forms, and (optionally) Google reCAPTCHA v3 with server-side verification.

• Install and activate the Gravity Forms plugin in your headless WordPress site, and create a form.
• Install and active the companion Vue Gravity Forms Plugin in your headless WordPress site, configure it with your allowed origins and get your API Key.
• Install this package in your front-end project using npm (or your favorite package manager):
  • npm install @970design/vue-gravity-forms
• Import and use the VueGravityForms component in your front-end project, passing the required props (see example below) - including the apiKey which is provided by the companion WordPress plugin.

---
import VueGravityForms from "@970design/vue-gravity-forms";

const formId = 1;
const endpoint = 'https://my-headless-wordpress.com';
const apiKey = import.meta.env.GF_API_KEY;
---

<VueGravityForms
    client:load
    formId={formId}
    endpoint={endpoint}
    apiKey={apiKey}
    {/* recaptchaKey prop removed — reCAPTCHA config is fetched automatically from the companion plugin */}
/>

You can also include our default styling by importing the CSS file:

import '@970design/vue-gravity-forms/dist/vue-gravity-forms.css';

You can override any default form field component by passing custom components through the customComponents prop. This allows you to customize the appearance and behavior of specific field types while maintaining the form's functionality.

<VueGravityForms
    :formId="formId"
    :endpoint="endpoint"
    :apiKey="gfApiKey"
    :customComponents="{
        text: CustomTextField,
        textarea: CustomTextareaField
    }"
/>

Custom components must implement the following props interface:

interface FieldComponentProps {
    field: Object // The field configuration object
    modelValue: string // The field's current value (v-model)
    formId: string|number // The form ID
    errorMessage: string // Error message if validation fails
    hasError: boolean // Whether the field has an error
}

Note: The html field type is display-only and does not use modelValue, errorMessage, or hasError props.

As of the latest release, Conditional Logic is fully supported. Fields, sections, and pages will automatically show or hide based on their defined Gravity Forms logic rules — no additional setup is required.

This logic is handled reactively in Vue using the useConditionalLogic composable, ensuring seamless updates as users interact with the form.

While the form schema is being fetched from WordPress, a skeleton preloader is displayed automatically — no additional setup required. The skeleton renders 3 animated placeholder fields that shimmer while the form loads, preventing layout shift and providing visual feedback to the user.

• Support for overriding field components
• Support for multipage forms
• Support for Conditional Logic
• Support for Post fields
• Support for Pricing fields
• Support for Gravity Forms Add-Ons (e.g. User Registration, etc)

The development of this package is sponsored by 970 Design, a creative agency based in Vail, Colorado. If you need help with your headless WordPress project, please don't hesitate to reach out.