Create Next App

Submit the form

You just need to get your form id and pass the endpoint url to your form using action prop:

https://devform.vercel.app/api/submit/[formId]


<form action={`https://devform.vercel.app/api/submit/${formId}`}>
	<input type="text" name="name" />
	<input type="email" name="email" />
	<input type="textarea" name="message" />
</form>

💡

Please note to pass the “name” field to your input fields as shown below. Currently, we only support 3 fields: name, email, and message.

If you want to create a separate action for submission to modify UI, display message or other reasons, you can also utilize React’s useFormStateHook:


// actions.js
"use server";

const formId = "your form id";

export async function submitForm(prevState, queryData) {
  const response = await fetch(`https://devform.vercel.app/api/submit/${formId}`, {
    method: "POST",
    body: queryData,
    contentType: "application/json",
  });

  const data = await response.json();

  return data.message;
}


// component.jsx
"use client";
import { useFormState } from "react-dom";
import { submitForm } from "./actions";

export default function Form() {
	  const [message, formAction] = useFormState(submitForm, null);
		
		return (
      <form action={formAction}>
        <input
          type="text"
          name="name"
          placeholder="name"
        />
        <input
          type="email"
          name="email"
          placeholder="email"
        />
        <input
          type="textarea"
          name="message"
          placeholder="message"
        />
        <button type="submit">Submit</button>
        {message} // will display message: "form submitted"
      </form>
	);
}

DevForm API Documentation

Submit the form