Creating an Endpoint

To create a new endpoint for your form submissions, follow these steps:

1. Navigate to the Create an Endpoint page in your Formnex dashboard.

2. Fill in the following details:

Endpoint Name

Enter a unique name for your endpoint. This helps you easily identify the endpoint within your dashboard when managing multiple endpoints.

You might want to choose a descriptive name that reflects the purpose of the form, such as Job Application, Newsletter Signup, or Event RSVP.

Schema

Define the structure of your form data by adding fields. For each field, specify:

• Field Name
• Data Type (choose from):
  • String
  • Number
  • Boolean
  • Date
  • Email
  • Phone
  • URL
  • Zip Code

Click “Add Field +” to include additional fields in your schema.

💡 Tip: You can reorder fields using the drag handle and mark fields as required to enforce validation.

Enable HTML Form Posting

Toggle this option on if you want to allow direct form submissions via HTML. When enabled, you'll be able to configure:

• Success Redirect URL: URL to which users are redirected after a successful form submission.
• Fail Redirect URL: URL to which users are redirected if the form submission fails.

Note: Redirect URLs are only applicable when users submit data via HTML <form> tags.

Include Webhook

Toggle this option on if you want to forward form data to an external API or service.

• Webhook URL: Provide the endpoint that will receive the form payload in JSON format.

You can use this to integrate with tools like Zapier, Integromat, custom APIs, or notification systems like Slack or Discord.

For more information on how to set up webhooks, check out the Webhook documentation.

3. Once all fields are configured, click “Create Endpoint” to finalize the setup.

Using Your Endpoint

After your endpoint is created, you can start integrating it into your app:

1. Copy the Endpoint URL shown in your dashboard.

2. Use that URL in your website or application to send form submissions.

   • For HTML forms, set the action attribute to the endpoint URL.
   • For JavaScript, use the Fetch API or any HTTP client to send POST requests to the endpoint.

3. To view detailed instructions for your specific endpoint, visit the "Endpoints" tab in your Formnex dashboard.

Note : The URL will be unique to your endpoint and will look something like this:

HTML Form Example

<form action="https://formnex.vercel.app/endpoints/{your-endpoint-id}" method="POST">
  <input type="text" name="fullName" placeholder="Your Name" required />
  <input type="email" name="email" placeholder="Your Email" required />
  <button type="submit">Submit</button>
</form>

JavaScript Fetch Example

fetch('https://formnex.vercel.app/endpoints/{your-endpoint-id}', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    fullName: 'John Doe',
    email: 'john@example.com',
  }),
});

React + shadcn/ui Example

import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
 
export function ContactForm() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const data = {
      fullName: e.target.fullName.value,
      email: e.target.email.value,
    };
    await fetch('https://formnex.vercel.app/endpoints/{your-endpoint-id}', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <Input name="fullName" placeholder="Full Name" required />
      <Input name="email" placeholder="Email Address" required />
      <Button type="submit">Send</Button>
    </form>
  );
}

Make sure to replace 'your-endpoint-id' with your actual Formnex endpoint ID.

You can also use our Next.js example template to quickly set up a form with shadcn/ui components by installing the @techaxis/formnex-start package and using the provided components.

npx @techaxis/formnex-start

Managing Your Endpoint

Once you've created an endpoint, you can manage and update it anytime through your Formnex dashboard.

Editing an Endpoint

If you need to make changes to an existing endpoint:

1. Go to the "Endpoints" tab in your Formnex dashboard.

2. Click on the edit under ( ••• icon) next to the endpoint you want to modify.

3. Update the name, description, or any custom settings you’ve configured.

4. Click Save Changes to apply the updates.

⚠️ Avoid modifying a live endpoint that's already integrated into your site unless you're sure about the changes.

Deleting an Endpoint

You can remove unused or outdated endpoints to keep your dashboard organized:

1. Click the ( ••• ) icon next to the endpoint name.

2. Choose Delete, then confirm your action.

3. Deleted endpoints will no longer accept submissions, and any links pointing to them will become invalid.

Renaming an Endpoint

You can rename your endpoint anytime to better reflect its purpose (e.g., “Contact Form – Landing Page”):

You can rename your endpoint by clicking the edit icon next to the endpoint name in your dashboard. Enter the new name and click Save.

⚠️ Note: Renaming an endpoint does not change the endpoint URL. It only updates the display name in your dashboard.

Best Practices for Endpoint Management

Effectively managing your endpoints ensures reliable data collection and a smooth experience across your application. Here are a few tips to follow:

Use Descriptive Names

When creating endpoints, choose names that clearly describe their purpose, like:

contact-form-landing-page

newsletter-signup-home

support-request-form

This makes it easier to organize and track form activity in your dashboard.

Organize by Project or Site

If you're working across multiple websites or environments (e.g., staging and production), group or label your endpoints accordingly. This prevents accidental data overlap or misrouting.

Keep Endpoint Schema Consistent

Once your endpoint is live, avoid unnecessary changes to the field schema. If you need a new structure, consider cloning the endpoint and testing it separately before going live.

Protect Sensitive Inputs

Although Formnex handles secure form submissions, be mindful not to collect sensitive personal data (e.g., passwords, payment information) without proper security protocols and compliance practices in place.

Document Your Endpoints

Maintain a small internal reference or documentation that tracks:

1. What each endpoint is used for
2. Which pages/forms are connected to it
3. Any logic applied on the frontend before submission

This is especially useful in team environments where multiple developers or collaborators are involved.