DocsGetting StartedForm Templates

Installing Formnex Starter Library

Learn how to quickly scaffold example Contact and Wishlist pages in your Next.js project using the Formnex starter kit.

Formnex Starter Library

The Formnex team provides an officially supported starter library to help developers quickly integrate Formnex services into their Next.js applications. This tool installs pre-built pages that showcase how to use Formnex endpoints effectively for common use cases.

Whether you're just exploring Formnex or setting up a new project, this starter kit is the fastest way to get hands-on experience with real form integrations.

Why Use the Starter?

The Formnex Starter Library is ideal for:

🚀 Rapid prototyping and form scaffolding
🔍 Learning how Formnex endpoints are integrated in practice
📚 Providing code structure and logic that's easy to copy or extend
🎯 Accelerating team onboarding with working examples

You'll spend less time setting up boilerplate and more time building your unique features.

Installation

To install the Formnex starter library, simply run the following command in your terminal within an existing or new Next.js project directory:

npx @techaxis/formnex-start

🧠 This command is powered by npx, so there's no need to install anything globally. It will scaffold example pages directly into your project structure.

Once the installation is complete, you'll notice two new folders added to your project:

/contact
/wishlist

These folders each contain a fully functional form page, already connected to Formnex and ready for customization, but you have to provide your endpoint ID and API key to make them work.

What's Included

Each example folder is structured to demonstrate best practices for building user-facing forms with Formnex.

Folder Structure

After installing the starter, your /app or/pages directory may look like this:

/app
├── contact
│   ├── page.tsx
│   ├── form.tsx
│   ├── action.ts
│   └── schema.ts
├── wishlist
│   ├── page.tsx
│   ├── form.tsx
│   ├── action.ts
│   └── schema.ts/

Contact Page

The Contact page includes:

A responsive form with input fields for name, email, subject, and message.
Client-side validation with helpful error messages.
An async submit handler that sends data to a configured Formnex endpoint.
Success and error states displayed to the user for real-time feedback.
Example usage of Formnex's POST endpoint method and success/error handling.

This page is ideal for:

General inquiry/contact forms
Support ticket entry points
Feedback collection

Wishlist Page

The Wishlist page is a creative example of how Formnex can handle more dynamic data collection scenarios. It includes:

Input fields for item name, item URL, priority, and notes.
Custom form schema demonstrating how Formnex can be used for non-standard data.
A different design layout and field structure to help developers think beyond basic contact forms.
Showcase of error validation when fields are missing or incorrect.

This page is useful for:

Wishlist or favorites tracking
Custom user-submitted entries
Use cases where flexible form structure is needed

Installation Tasks

Task	Description
Replace Endpoint URLs	Use your own endpoint from the Formnex Dashboard
Validate Environment	Store API keys in `.env.local` if needed
Add Custom Styling	Update Tailwind classes or use your component library
Customize Fields	Add, remove, or reorder fields as per your form’s goal
Integrate with Webhooks	Send form data to third-party tools or internal APIs
Track Logs	Monitor form performance and troubleshoot issues from your Logs Dashboard

Configuration and Customization

After installing the starter, you'll want to configure the following:

Update Formnex Endpoint IDs : Replace the placeholder Formnex endpoint URLs in each form file with your own from the Formnex Dashboard.
Use Environment Variables : Store endpoint IDs or API secrets in .env.local and access them using process.env.
Style and Extend:
- Add Tailwind CSS or other styling frameworks
- Insert custom UI elements, loaders, or CAPTCHA support
- Add more fields or update field logic to match your data needs
Integrate Webhooks : Use Formnex Webhooks to send form data to:
- Slack
- Notion
- Internal APIs
- Email notification tools

Next Steps

Read the Form Submission Logs Guide
Set up Webhooks for Slack or Notion notifications
Learn how to Create Endpoints
Visit the Formnex Dashboard to manage your endpoint and monitor traffic

By installing the Formnex starter, you get two pre-wired pages that demonstrate how to use Formnex with modern form development practices.

💡 Pro Tip: Want to track every submission and debug with confidence? Be sure to check out Form Submission Logs regularly!

Introduction Webhooks