Form Builder Example Website
This is a Next.js project bootstrapped with create-next-app that fetches data from Payload CMS.
This example repo was made explicitly to demonstrate the power and convenience of the Form-Builder plugin. Along with the Form-Builder plugin, this repo takes advantage of the popular React Hooks Form library for easy validation, giving users an easy way to build and manage forms.
Getting Started
Payload CMS
First you'll need a running CMS. If you have not done so already, clone the CMS repo and follow the setup instructions. Take note of your server URL, you'll need this in the next step.
Next.js App
First, get your environment setup:
- First copy the example
.envfile as your own:cp .env.example .env - Then open the
.envfile and paste your Payload server URL:NEXT_PUBLIC_CMS_URL=http://localhost:8000
First, run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
Once running, you will find a few seeded example forms on your local environment. Give them a try!
You can also start editing the pages by modifying the documents within your CMS.
Learn More
To learn more about PayloadCMS and Next.js, take a look at the following resources:
- Payload CMS Documentation - learn about Payload CMS features and API.
- Form Builder Plugin Documentation - learn about the plugin's features.
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Payload CMS GitHub repository as well as the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Payload CMS deployment documentaton or the Next.js deployment documentation for more details.