Written by: Geoffrey Callaghan

How To Create A Contact Form In Next.js

How To Create A Contact Form In Next.js

To create a contact form in Next.js with FabForm.io, you can follow these steps:

  1. Sign Up on FabForm.io:

    • Visit FabForm.io and sign up for an account if you haven’t already.
  2. Create a Form:

    • After signing in, create a new form by following the instructions on the FabForm.io website.
  3. Get the Form Endpoint:

    • Once your form is created, you will be provided with a form endpoint (URL). This endpoint will be used to send data from your Next.js application to FabForm.io.
  4. Create a Next.js Project:

    • Set up a new Next.js project if you don’t have one already. You can use the following commands in your terminal:

      npx create-next-app my-nextjs-app
      cd my-nextjs-app
  5. Install Axios:

    • Axios is a popular library for making HTTP requests. Install it using the following command:

      npm install axios
  6. Create a Contact Form Component:

    • Create a new file for your contact form component. For example, components/ContactForm.js. In this file, you can create a simple form with the necessary input fields.

      import { useState } from 'react';
      import axios from 'axios';
      const ContactForm = () => {
        const [formData, setFormData] = useState({
          name: '',
          email: '',
          message: '',
        const handleChange = (e) => {
          setFormData({ ...formData, [e.target.name]: e.target.value });
        const handleSubmit = async (e) => {
          try {
            await axios.post('YOUR_FABFORM_ENDPOINT', formData);
            console.log('Form submitted successfully');
          } catch (error) {
            console.error('Error submitting form:', error);
        return (
          <form onSubmit={handleSubmit}>
              <input type="text" name="name" onChange={handleChange} />
              <input type="email" name="email" onChange={handleChange} />
              <textarea name="message" onChange={handleChange}></textarea>
            <button type="submit">Submit</button>
      export default ContactForm;
  7. Use the Contact Form Component:

    • In your desired Next.js page or component, import and use the ContactForm component.

      import ContactForm from '../components/ContactForm';
      const ContactPage = () => {
        return (
            <h1>Contact Us</h1>
            <ContactForm />
      export default ContactPage;

    • Replace 'YOUR_FABFORM_ENDPOINT' in the axios.post call with the actual endpoint you obtained from FabForm.io.
  9. Style the Form (Optional):

    • Style your form using CSS or a styling library to make it visually appealing.
  10. Run Your Next.js App:

    • Run your Next.js application using npm run dev and test the contact form.

By following these steps, you should be able to create a contact form in Next.js that submits data to FabForm.io. Remember to replace placeholders and customize the form and styling according to your needs.