Using Gravity Forms with Headless WordPress and Next.js

If you’re diving into the world of headless WordPress and want to integrate Gravity Forms with a Next.js frontend, you’re in for a treat. This guide covers how to seamlessly fetch and submit forms from WordPress using Next.js, with modern tools like wp-graphql-gravity-forms and next-gravity-forms. It’s efficient, clean, and avoids reinventing the wheel.

TL;DR: You’ll need a WordPress site, Gravity Forms, and a few GraphQL packages on both WordPress and Next.js. There’s even an example repo to get you started: next-gravity-forms-example.

---

Why Use Gravity Forms with Next.js?

Gravity Forms is one of the most robust form builders for WordPress, but in a headless setup, it requires some extra steps to connect it to your JavaScript frontend. Instead of manually creating GraphQL queries or struggling with the REST API, this guide introduces a streamlined approach with the next-gravity-forms package.

This tutorial is a summary of this great writeup by Robert Marshall

---

Required Packages

WordPress

• Gravity Forms: The primary form builder plugin.
• WPGraphQL: Enables GraphQL support for WordPress.
• WPGraphQL Gravity Forms: Exposes Gravity Forms data via GraphQL.

Next.js

• next-gravity-forms: A package designed for easy integration of Gravity Forms with Next.js.

---

Step-by-Step Guide

Step 1: Set Up WordPress

1. Install Gravity Forms: Purchase a license if needed and activate it.
2. Install WPGraphQL: Find it in the WordPress plugin directory.
3. Add WPGraphQL Gravity Forms: Download the latest release and activate it in your WordPress admin.

This setup allows your Next.js frontend to query and submit Gravity Forms data via GraphQL.

---

Step 2: Add Form Packages to Next.js

1. Install Next-Gravity-Forms
2. # Using Yarn yarn add next-gravity-forms
3. # Using npm npm i next-gravity-forms
4. Set Up Environment Variables
   Add your WordPress API endpoint to your .env file:
5. NEXT_PUBLIC_WORDPRESS_API_URL=YOUR_ENDPOINT If you’re using a caching layer like Stellate, define separate variables for caching and submissions:
6. NEXT_PUBLIC_WORDPRESS_API_URL=YOUR_CACHED_ENDPOINT NEXT_PUBLIC_WORDPRESS_FORM_SUBMIT_URL=YOUR_DIRECT_ENDPOINT

---

Step 3: Use Gravity Forms in Your Project

Create a Frontend Form Component

Create a React component for rendering forms on the client side:

"use client";

import GravityFormForm from "next-gravity-forms";

const GravityForm = ({ form }) => <GravityFormForm data={form} />;

export default GravityForm;

This leverages React Hook Forms, a library included in next-gravity-forms.

Fetch Form Data from WordPress

To render a specific form by ID, use the server-side function getGravityForm:

import { getGravityForm } from "next-gravity-forms/server";
import GravityForm from "components/GravityForm";

export default async function Page() {
  const form = await getGravityForm(1); // Replace '1' with your form ID

  return <GravityForm form={form} />;
}

Note: getGravityForm must run on the server side (e.g., within a Server Component or API route).

---

Advanced Features

Rendering Forms Dynamically

If you need to select and render forms dynamically, query all forms on the server and pass the data to the client. The example repo includes a full implementation.

Add Google reCAPTCHA

Gravity Forms supports reCAPTCHA out of the box. Configure reCAPTCHA settings in the WordPress admin to enable this functionality.

Styling Forms

The next-gravity-forms package doesn’t include built-in styles. However, it uses the same CSS classes as Gravity Forms’ default HTML output, making it easy to port existing styles from a WordPress site.

---

Example Repo

You can find a complete working solution here: next-gravity-forms-example. It includes:

• Form rendering
• Google reCAPTCHA setup
• Baseline styling

---

Final Thoughts

Setting up Gravity Forms in a headless WordPress project with Next.js might seem daunting at first, but with tools like next-gravity-forms, it’s a breeze. Whether you’re fetching form data, styling it, or securing submissions, this approach ensures a smooth integration process.

Happy coding!