Next.js Integration

Next.js Contact Form with only Frontend Code

Start collecting form submissions from your Next.js form with FormAPI in 2 minutes. Create your form in FormAPI and paste your unique URL inside your form. Check out the code examples and detailed tutorial below to get started

VS Code

import { useState } from 'react';

export default function FetchForm() {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    try {
      const res = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({ email, message }),
      });
      const data = await res.json();
      if (data.code === 200) setSubmitted(true);
      else setError(data.message || 'Something went wrong');
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Email:</label>
      <input type='email' value={email} onChange={(e) => setEmail(e.target.value)} required />

      <label>Message:</label>
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} required />

      <button type='submit'>Send</button>
      {submitted && <p>Form submitted successfully!</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </form>
  );
}

How to Integrate Code

What is Next.js?

Next.js is a React framework for building server-side rendered and static web applications. You can use standard React components for forms, and FormAPI works seamlessly with Next.js frontend.

FormAPI Setup with Next.js using Fetch

You can use the native Fetch API in Next.js to send form data to FormAPI. Replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your unique mockapi URL.

VS Code

import { useState } from 'react';

export default function FetchForm() {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [responseText, setResponseText] = useState('');

  const submitForm = async () => {
    try {
      const response = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, message }),
      });
      const data = await response.json();
      setResponseText(data.code === 200 ? 'Form submitted successfully!' : 'Error submitting form');
    } catch (error) {
      setResponseText('Error: ' + error);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <input placeholder='Email' value={email} onChange={(e) => setEmail(e.target.value)} />
      <textarea placeholder='Message' value={message} onChange={(e) => setMessage(e.target.value)} />
      <button onClick={submitForm}>Submit</button>
      <p>{responseText}</p>
    </div>
  );
}

FormAPI Setup with Next.js using Axios

Axios is a simple HTTP client that works in Next.js. You can send form data using Axios and display success or error messages.

VS Code

import { useState } from 'react';
import axios from 'axios';

export default function AxiosForm() {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [responseText, setResponseText] = useState('');

  const submitForm = async () => {
    try {
      const response = await axios.post('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', { email, message });
      setResponseText(response.data.code === 200 ? 'Form submitted successfully!' : 'Error submitting form');
    } catch (error) {
      setResponseText('Error: ' + error);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <input placeholder='Email' value={email} onChange={(e) => setEmail(e.target.value)} />
      <textarea placeholder='Message' value={message} onChange={(e) => setMessage(e.target.value)} />
      <button onClick={submitForm}>Submit</button>
      <p>{responseText}</p>
    </div>
  );
}

FormAPI Setup for File Uploads in Next.js

You can upload files using FormData in Next.js with Fetch or Axios. Below is an example using Fetch. Replace the mockapi with your FormAPI URL.

VS Code

import { useState } from 'react';

export default function FileUploadForm() {
  const [file, setFile] = useState(null);
  const [responseText, setResponseText] = useState('');

  const uploadFile = async () => {
    if (!file) return setResponseText('Please select a file');

    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
        method: 'POST',
        body: formData,
      });
      const data = await response.json();
      setResponseText(data.code === 200 ? 'File uploaded successfully!' : 'Upload failed.');
    } catch (error) {
      setResponseText('Error: ' + error);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <input type='file' onChange={(e) => setFile(e.target.files[0])} />
      <button onClick={uploadFile}>Upload File</button>
      <p>{responseText}</p>
    </div>
  );
}

Set Up FormAPI in 60 Seconds

1

Create Your Form

Sign up and create a form in FormAPI — no backend code required.

2

Get Your Endpoint

FormAPI gives you a unique endpoint. Point your form's action attribute (or a fetch/axios call) at it.

3

Start Receiving Submissions

Submissions land instantly in your dashboard inbox, with spam filtering and alerts built in.

Get Started Now

USE CASES

Need templates? Say less.

A collection of example HTML forms with code that you can edit live, then download or copy/paste. A minimal form reset css is included that should work with most sites.

Simple Contact Form

Survey Form

Book a Demo Form

News Letter Form

Registration Form & more...

Learn More

Ready to Experience Zunoy?

Start your journey with Zunoy's powerful suite of tools, designed for startups, developers, and growing teams alike.

Sign Up Now

All our products come with a lifetime free tier.