What is Vue Gravity Forms?

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.

Setup Guide

• 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.

Example Usage (with Astro.js)

---
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="OPTIONAL_RECAPTCHA_KEY"
/>

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

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

Props

| Prop | Type | Required | Description | |------|------|----------|------------------------------------------------------| | endpoint | string | Yes | The base URL of your headless WordPress site | | formId | number | Yes | The ID of the Gravity Form to display | | apiKey | string | Yes | API Key generated by the companion WordPress plugin. | | recaptchaKey | string | No | Google reCAPTCHA v3 site key (enabled if passed) | | customComponents | object | No | Object containing custom field components to override defaults |

Custom Components

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.

Example Usage

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

Available Field Types for Override

| Field Type | Component Name | |------------|----------------| | text | TextField | | textarea | TextareaField | | select | SelectField | | multiselect | MultiselectField | | radio | RadioField | | checkbox | CheckboxField | | datetime | DateTimeField | | hidden | HiddenField | | fileupload | FileUploadField | | section | SectionBreakField | | address | AddressField | | image_choice | ImageChoiceField | | name | NameField |

Custom Component Interface

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 
}

Conditional Logic

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.

Feature Roadmap

• ~~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)

More Information

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.