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)

Feature Roadmap

• Support for overriding field components
• Support for multipage forms
• Support for Post fields
• Support for Pricing fields
• Support for Conditional Logic
• 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.