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:

```bash
npm install @mailik/sdk
```

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

```ts
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/](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/](https://mailik.dev/docs/sdk/)

How to create a Next.js form

#

Using a 3rd party form backend in your NextJS project offers a streamlined and efficient solution for handling form submissions, which can otherwise be complex and time-consuming to implement. Creating forms and collecting responses directly within a NextJS website often involves considerable server-side plumbing and setup to ensure that data is received, validated, and processed correctly. This backend work can be a significant hurdle, especially for developers who want to focus more on the frontend experience rather than backend infrastructure. By leveraging a 3rd party form backend, you offload all this complexity to a specialized service designed specifically for form data handling, thereby simplifying your development workflow and improving reliability.



A form backend service acts as an intermediary that manages the collection of user response data from your website forms with minimal setup. It not only accepts form submissions via standard HTTP methods such as POST but also often includes valuable features like built-in form validation, spam protection, analytics, and data management tools. These additional capabilities mean you don’t have to build these functionalities from scratch, saving you time and effort. For NextJS developers, integrating such a service means you can focus on crafting beautiful forms and user experiences, while the backend service handles the heavy lifting of data processing and storage. This makes it clear why adopting the best form backend service is a smart choice for your NextJS project.



## No Server-Side Code Required

One of the most compelling reasons to use a 3rd party form backend is that it eliminates the need for writing any server-side code yourself. With a form backend, you simply design your form in React or NextJS, then configure it to send form data to the backend service via HTTP requests. This approach frees you from managing API routes or serverless functions in NextJS just for form handling, which can be especially beneficial if your project requirements are straightforward or if you want to avoid backend maintenance altogether. Instead, you can rely on the form backend’s robust infrastructure to securely receive and process submissions, allowing you to focus entirely on frontend development and user interface design.

## Enhanced Data Management

Another advantage of using a form backend is enhanced data management. Most third-party form backend services provide a user-friendly dashboard where you can view, sort, filter, and export form submissions. This centralized interface simplifies the task of tracking responses and analyzing user data without needing to build your own admin panel or database queries. For developers and business owners alike, this ease of access to organized data is invaluable, as it helps in making informed decisions based on real user feedback or leads collected through your website form backend.



## Scalability

Scalability is also a key benefit when integrating a third-party form backend with your NextJS site. As your website gains traffic and the volume of form submissions grows, the backend service automatically scales to handle the increased load. This means you don’t have to worry about server capacity, performance bottlenecks, or downtime related to form submissions. The backend provider ensures that your form data is processed reliably and quickly, regardless of how many users submit forms simultaneously. This scalability is particularly important for businesses expecting growth or running marketing campaigns that drive high volumes of user engagement.

## Robust Security

Security is a critical concern when dealing with user data, and reputable form backend providers prioritize protecting your information. These services typically offer encryption for data in transit and at rest, spam and bot protection to prevent fraudulent submissions, and compliance with data protection regulations. By using a trusted form backend, you gain peace of mind knowing that your form data is handled securely, reducing the risk of data breaches or unauthorized access. This level of security is often more advanced than what a developer might implement independently, making a form backend a safer choice for sensitive user information.

## Easy Integration

Integrating a form backend with your NextJS project is straightforward and well-documented by most providers. Typically, you only need to set up a POST route in your form component to send data to the backend’s API endpoint. Many services offer example code snippets and guides tailored for NextJS and React, making the integration process quick and hassle-free. This ease of integration means you can have a fully functional form backend in place within minutes, without needing to write complex server-side logic or manage infrastructure.

In summary, using a third-party form backend in your NextJS project significantly simplifies the process of collecting and managing form responses. It removes the need for server-side coding, enhances data management through intuitive dashboards, scales effortlessly with your website’s growth, and provides robust security features to protect user data. For developers looking to prioritize efficiency, reliability, and security in form data collection, the best form backend is an indispensable tool. If you are building a NextJS website, choosing a form backend service is a clear choice that offers convenience, scalability, and peace of mind.

Why You Should Use a 3rd Party Form Backend in Your NextJS Project

Building forms is a common task in web development, but making sure users fill them out correctly can be tricky. If you’ve ever had a form submit with a missing email or a password that’s too short, you know how important good validation is. In the Next.js world, Yup is a favorite tool for this job because it’s flexible, readable, and integrates well with popular form libraries.

Let’s walk through how you can use Yup for form validation in a Next.js app, with clear examples and tips to make your forms robust and user-friendly.



## What Is Yup?

Yup is a JavaScript library for schema-based validation. You describe the shape and rules for your data in a schema, and Yup checks if the data matches. If something’s off—like a missing field or an invalid email—Yup lets you know exactly what went wrong.

## Setting Up Yup in Your Next.js Project

First, you’ll want to add Yup to your project. Open your terminal and run:

```ts
npm install yup
```


Or, if you’re using Yarn:


```ts
yarn add yup
```

## Creating a Validation Schema

Suppose you’re building a sign-up form. You want to make sure the user enters a name, a valid email, and a password that’s at least 8 characters long. Here’s how you’d set up a Yup schema for that:




```ts
import * as yup from 'yup';

const schema = yup.object().shape({
  name: yup.string().required('Name is required'),
  email: yup.string().email('Please enter a valid email').required('Email is required'),
  password: yup.string().min(8, 'Password must be at least 8 characters').required('Password is required'),
});

```



This schema acts like a checklist for your form. If any rule isn’t met, Yup will return a clear error message.

## Integrating Yup with a Next.js Form

You can use Yup on its own, but it really shines when paired with a form library. Let’s see how it works with Formik, a popular choice for managing form state in React and Next.js.

Here’s a simple registration form:


```ts
import React from 'react';
import { useFormik } from 'formik';
import * as yup from 'yup';

const validationSchema = yup.object({
  name: yup.string().required('Name is required'),
  email: yup.string().email('Please enter a valid email').required('Email is required'),
  password: yup.string().min(8, 'Password must be at least 8 characters').required('Password is required'),
});

export default function RegisterForm() {
  const formik = useFormik({
    initialValues: { name: '', email: '', password: '' },
    validationSchema,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label>
        Name:
        <input
          name="name"
          value={formik.values.name}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
        />
      </label>
      {formik.touched.name && formik.errors.name && <div>{formik.errors.name}</div>}

      <label>
        Email:
        <input
          name="email"
          type="email"
          value={formik.values.email}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
        />
      </label>
      {formik.touched.email && formik.errors.email && <div>{formik.errors.email}</div>}

      <label>
        Password:
        <input
          name="password"
          type="password"
          value={formik.values.password}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
        />
      </label>
      {formik.touched.password && formik.errors.password && <div>{formik.errors.password}</div>}

      <button type="submit">Register</button>
    </form>
  );
}

```

As the user fills out the form, Yup checks each field. If something’s wrong, the error message appears right below the field.

## Validating on the Server

Client-side validation is great for user experience, but it’s not enough on its own. Users can bypass it, so you should always validate again on the server. With Next.js API routes, you can use the same Yup schema to check incoming data:


```ts
import * as yup from 'yup';

const schema = yup.object({
  name: yup.string().required(),
  email: yup.string().email().required(),
  password: yup.string().min(8).required(),
});

export default async function handler(req, res) {
  try {
    await schema.validate(req.body, { abortEarly: false });
    // Proceed with processing
    res.status(200).json({ message: 'Success!' });
  } catch (err) {
    res.status(400).json({ errors: err.errors });
  }
}

```

## Wrapping Up

Yup makes form validation in Next.js straightforward and reliable. By describing your rules in a schema, you can keep your code clean and your forms robust. Whether you’re working with Formik, React Hook Form, or just plain React state, Yup helps you deliver a better experience for your users - and fewer headaches for yourself.

If you’re building forms in Next.js, give Yup a try and reduce bugs, and make your forms much easier to maintain. If you want to save some more time make sure to check [mailik.dev](https://mailik.dev), easy way to manage your form without a need to setup any form backend.

Form Validation in Next.js Using Yup

In the ever-evolving digital landscape, lead generation remains the holy grail of online marketing. But let's face it: not all lead generation tools are created equal. Some are about as effective as using a fishing rod in a desert. Others? Well, they're like having a magic wand for your business. Today, we're diving into the world of high-converting lead generation tools, with a special focus on the unsung hero of the digital marketing world: the humble yet powerful web form.

### The lead generation struggle is real

Before we unveil the secret sauce, let's talk about why lead generation can feel like trying to nail jelly to a wall. In a world where attention spans are shorter than a TikTok video, capturing and retaining a potential customer's interest is no small feat. Traditional methods often fall flat, leaving marketers scratching their heads and leads slipping through their fingers like sand.

Common lead generation pitfalls include:

\- Forms that are longer than a CVS receipt

\- Pop-ups more annoying than that neighbor who always wants to "just catch up"

\- Email campaigns that get lost in the black hole of spam folders

\- Landing pages that load slower than a sloth on vacation

But fear not, intrepid marketer! There's hope on the horizon, and it comes in the form of smart, conversion-optimized web forms.

### Web Forms: the unsung heroes of lead generation

Now, I know what you're thinking.

*"Web forms? Seriously? That's your groundbreaking solution?"*

But hear me out. The web form of today is not the clunky, user-unfriendly monster of yesteryear. We're talking about sleek, intelligent, and highly converting lead capture machines.

The highest converting lead generation tools leverage the power of advanced web forms to turn casual visitors into valuable leads faster than you can say "conversion rate optimization."

### What makes a web form a lead-generating powerhouse?

1\. **Simplicity is the key**: The best forms are like a good haircut - they take away everything that's not necessary. Keep it short, sweet, and to the point.

2\. **Mobile-first design**: With more people browsing on mobile than ever, your forms need to look good and function flawlessly on screens of all sizes.

3\. **Smart field technology**: Forms that adapt based on user input? That's not just smart; it's genius. It's like having a conversation, not an interrogation.

4\. **Progress indicators**: Everyone likes to know how close they are to the finish line. A simple progress bar can significantly boost completion rates.

5\. **Conditional content**: Show only the fields that are relevant to each user. It's like a "Choose Your Own Adventure" book, but for lead generation.

6\. **Instant validation**: Real-time feedback on form fields reduces errors and frustration. It's like having a friendly robot assistant guiding users through the process.

7\. **Personalization**: Forms that remember returning visitors and pre-fill information? That's not just convenient; it's downright magical.

### The secret sauce: psychological triggers

But the real magic happens when you sprinkle in some psychological triggers:

\- **Social Proof:** "Join 10,000+ happy customers!" Because everyone wants to be part of the cool kids' club.

\- **Scarcity:** "Only 5 spots left!" Nothing motivates like the fear of missing out.

\- **Reciprocity**: Offer something valuable in exchange for contact info. It's the digital equivalent of "I scratch your back, you scratch mine."

\- **Authority:** Showcase your credentials. People trust experts, not random internet entities.

### Forging your lead generation superweapon

Ready to transform your lead generation game? Here's how to get started:

1\. **Constantly audit your forms**: Are they mobile-friendly? How many fields do they have? Could you cut any?

2\. **A/B Test Everything**: Headlines, button colors, field order - test it all. Let the data guide you.

3\. **Speed, speed and speed**: A form that loads quickly is a form that converts.

4\. **Leverage Analytics**: Use heat maps and user recordings to see where people struggle or abandon your forms.

5\. **Continuous Improvement**: The digital landscape changes fast. Keep iterating and improvin your forms to make sure you're up-to-date with the lastest trends.

### Your lead generation evolution starts now

In the grand tapestry of digital marketing, lead generation is a crucial thread. And while there are many tools in the marketer's toolbox, the smart, conversion-optimized web form stands out as a true game-changer.

Remember, the highest converting lead generation tool isn't just about collecting information; it's about creating an experience. An experience so smooth, so engaging, that visitors can't help but want to connect with your brand.

And if your want to make sure you won't let another potential lead slip through your fingers consider using Mailik. Why? Mailik will forward all responses from the form directly to the email address you provide, making it very convenient to keep track of them, because let's not kid ourselves, email (unlike CMS) is something we monitor throughout the day.

The journey to lead generation mastery starts with a single step - or in this case, a single form. Make it count!

Web Forms - the highest converting Lead Generation tool

Web forms are the digital equivalent of those clipboard-wielding surveyors at the mall, except less likely to chase you down the escalator. Love 'em or hate 'em, web forms are the silent powerhouse of the leads generation. But how much do you really know about them? Buckle up, because we're about to dive into ten facts about web forms that'll make you the life of your next dev team party (or at least mildly interesting at dinner).

### 1. Web forms are older than your favorite meme

While you might think web forms are a modern invention, they've been around since the early days of the World Wide Web. The first HTML form element was introduced in 1993 which makes them only 6 years younger than Rick Astley's 'Never Gonna Give You Up' which became you favorite meme in 2006.

### 2. The 'Submit' button is lie

Ever noticed how clicking 'Submit' on a form doesn't actually submit anything physically? It's the biggest lie on the internet since "I have read and agree to the Terms and Conditions." In reality, it's more like "transmit" or "send," but "submit" just sounds more authoritative.

### 3. Forms can be a security nightmare

Unsecured web forms are like leaving your front door wide open in a neighborhood of professional pickpockets. They're a hacker's dream and a developer's nightmare. Cross-Site Scripting (XSS) and SQL injection attacks often target poorly secured forms. It's like the digital version of "stranger danger," but instead of candy, the strangers are after your users' data.

### 4. The psychology of form design is a real thing

There's actual science behind form design. Things like the color of the submit button, the order of the fields, and even the labels can significantly impact completion rates. It's like playing mind games with your users, but in a totally ethical, UX-approved way.

### 5. Mobile forms are the cool kids wow

With more people browsing on mobile than desktop, mobile-friendly forms are no longer optional – they're as essential as coffee on a Monday morning. If your form isn't mobile-responsive, you might as well be asking users to fill it out via carrier pigeon.

### 6. Captchas: robots asking "are you a human?"

We've all been there – squinting at distorted letters, wondering if that's a '0' or an 'O'. Captchas in forms are the internet's way of making sure you're not a robot, while simultaneously making you question your own humanity. "Select all images with traffic lights"...

### 7. The myth of the fold is just that – a myth

Remember when everyone said you had to keep your entire form above the fold? Turns out, that's about as accurate as your horoscope. Users are perfectly willing to scroll, especially on mobile. It's not 1999 anymore – people know how to use a scrollbar (or their thumb).

### 8. Inline validation is the king

Remember when you had to submit an entire form only to be told you forgot to fill out your middle name? Inline validation is changing the game faster than you can say "user experience." It's like having a friendly robot assistant gently nudging you in the right direction.

### 9. Multi-step Forms

Breaking long forms into multiple steps isn't just good for user experience – it's a psychological trick. It's like how your fitness app convinces you to run a marathon by breaking it down into smaller, less terrifying chunks. Before you know it, you've filled out a form longer than "War and Peace" and you didn't even break a sweat.

### 10. Forms are getting smarter than some of your co-workers

With the advent of AI and machine learning, forms are getting spookily intelligent. They can predict your input, adapt to your behavior, and probably beat you at chess while they're at it.

### Can't live with 'em, can't Live without 'em

Love them or hate them, web forms are here to stay. They're the unsung heroes of the internet, collecting data, facilitating communication, and occasionally making us question whether we can correctly identify a bicycle in a grid of images.

So the next time you're filling out a web form, spare a thought for the poor developer who crafted it. And if you're that developer, remember: with great power comes great responsibility. Use your form-creation powers wisely, and may your conversion rates be ever in your favor.

Recent articles

How to create a Next.js form

Why You Should Use a 3rd Party Form Backend in Your NextJS Project

Form Validation in Next.js Using Yup

Web Forms - the highest converting Lead Generation tool

10 facts about web forms that you didn't know