A well known website element know as a webform is still a power house of leads generation for most small & medium businesses. To make appear in your Next.js application so users can enter their data or personal information is releativelty easy, the tricky part is to submit their responses and make them reach you or the right person who can close the deal or start heating the lead. But let's start from the beginning which is ....

Create the Next.js contact form page

Let's start with installing Mailik SDK:

npm install @mailik/sdk

In the file where we are going to make the form data collection happen paste the following code:

import Mailik from "@mailik/sdk";
import React, { useState } from "react";

const MainPage = () => {
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
 
  
  const send = async () => {
    if (email && message) {
      const mailikResult = await Mailik("YOUR-PUBLIC-KEY-HERE").send({
        body: message,
        replyTo: email,
        subject: "Form from my Website",
      });
    }
  };

  return (
    <>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} />
      <button>Send</button>
    </>
  );
};

export default MainPage;

After that make sure to generate and replace the project key with one created in the Mailik.dev dashbaord - https://app.mailik.dev/ and .... that's it.

It works!

That is how you create a simple contact form for Next.js. The code can be found on in Mailik docs - https://mailik.dev/docs/sdk/