In this tutorial, we will explore how to enhance your Tailwind CSS contact form with form validation using Peer & Invalid Sibling States. By implementing these techniques, you can ensure that users provide accurate information before submitting the form.

Adding form validation to your contact form is crucial for improving user experience and data accuracy. With Tailwind CSS and the Peer & Invalid Sibling States approach, you can create visually appealing and functional validation messages that guide users to correct any errors before submission.

**Here's a live demo: [Tailwind CSS Form Validation](https://tailwindcomponents.com/component/tailwind-css-contact-form-with-client-side-validation/landing)**

![Contact Form](/img/blog/form-validation.png)

## Step 1: Set up the HTML Structure

Begin by creating your contact form with the necessary input fields. Make sure to include the required attribute for mandatory fields and assign unique name attributes to each field.


```html
<form id="form" novalidate>
  <input type="text" name="name" required placeholder="Name*" />
  <input type="email" name="email" required placeholder="Email*" />
  <textarea name="message" required placeholder="Message*"></textarea>
  <button type="submit">Submit</button>
</form>
```
## Step 2: Add Tailwind CSS Classes

Next, apply Tailwind CSS classes to each input. For sanity, we have removed other classes to focus on the validation part. Here's an example of how to style the input fields:

```html
<div>
    <input
      type="text"
      name="FirstName"
      required
      class="peer border-2 focus:ring-2 [.validated_&]:invalid:border-pink-600 [.validated_&]:invalid:ring-2 [.validated_&]:invalid:ring-pink-200"
      placeholder="Name*"
    />
    <p class="mt-2 hidden [.validated_&]:peer-invalid:block text-pink-600">
        Please provide your first name.
    </p>
</div>
```

Here's what's happening in the code:

- We've added the `peer` class to the input field and the sibling paragraph element to establish a peer relationship.
- The `border-2` class adds a border to the input field.
- The `focus:ring-2` class adds a ring on clicking the input field.
- The `[.validated_&]:invalid` selector applies styles to the input field when it is invalid.
- The `.validated` will be class name we will add to the `<form>` element when the form is submitted (using javascript). More on that later.
- The `border-pink-600` class changes the border color to pink when the parent has class `.validate` and the input field is `invalid`.
- Now, the `peer-invalid` class will be added to the input field when it is invalid. This will make the sibling paragraph visible.

Here's another example for the email input field:

```html
<div>
    <input
      type="email"
      name="email"
      required
      class="peer border-2 focus:ring-2 [.validated_&]:invalid:border-pink-600 [.validated_&]:invalid:ring-2 [.validated_&]:invalid:ring-pink-200"
      placeholder="Email*"
    />
    <p class="mt-2 hidden [.validated_&]:peer-invalid:block text-pink-600">
        Please provide your email.
    </p>
    <p class="mt-2 hidden [.validated_&]:peer-[:not(:placeholder-shown)]:peer-invalid:block text-pink-600">
        Please enter a valid email address.
    </p>
</div>
```

Here, we've added an additional paragraph element to display an error message when the email field is empty or contains an invalid email address. The `[.validated_&]:peer-[:not(:placeholder-shown)]:peer-invalid` selector applies styles to the input field when it is invalid and the placeholder is not shown.

## Step 3: Implement JavaScript Validation

Finally, add JavaScript to validate the form fields and display error messages when necessary. Here's an example of how to achieve this:

```html
<script>
  const form = document.getElementById("form");

  form.addEventListener("submit", function (e) {
    e.preventDefault();
    form.classList.add("validated");
    if (!form.checkValidity()) {
      form.querySelectorAll(":invalid")[0].focus();
      return;
    }
    // Submit the form
  });
</script>
```


## Step 4: Test and Refine

Test your form by entering valid and invalid data. Ensure that the validation messages are displayed correctly and that the form submits successfully when all fields are valid. Refine the styles and validation messages as needed.

Here's the final code (with form submissions using Web3Forms API):

```html

<form action="https://api.web3forms.com/submit" method="POST" id="form" novalidate>
  
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />
  <input type="checkbox" class="hidden" style="display:none" name="botcheck" />

  <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto mt-14">
    <div>
      <input
      type="text"
      name="FirstName"
      required
      class="peer border-2 border-muted-medium py-4 px-4 rounded-xl placeholder:text-default focus:border-primary focus:ring-1 focus:ring-primary outline-none w-full [.validated_&]:invalid:border-pink-600 [.validated_&]:invalid:ring-2 [.validated_&]:invalid:ring-pink-200"
      placeholder="Name*"
    />
      <p class="mt-2 hidden [.validated_&]:peer-invalid:block text-pink-600 text-sm">
        Please provide your first name.
      </p>
    </div>
    <div>
      <input
      type="text"
      name="LastName"
      required
      class="peer border-2 border-muted-medium py-4 px-4 rounded-xl placeholder:text-default focus:border-primary focus:ring-1 focus:ring-primary outline-none w-full [.validated_&]:invalid:border-pink-600 [.validated_&]:invalid:ring-2 [.validated_&]:invalid:ring-pink-200"
      placeholder="Last name*"
    />
      <p class="mt-2 hidden [.validated_&]:peer-invalid:block text-pink-600 text-sm">
        Please provide your last name.
      </p>
    </div>
    <div>
      <input
      type="email"
      name="email"
      required
      class="peer border-2 border-muted-medium py-4 px-4 rounded-xl placeholder:text-default focus:border-primary focus:ring-1 focus:ring-primary outline-none w-full [.validated_&]:invalid:border-pink-600 [.validated_&]:invalid:ring-2 [.validated_&]:invalid:ring-pink-200"
      placeholder="Email address*"
    />
      <p class="mt-2 hidden [.validated_&]:peer-placeholder-shown:peer-invalid:block text-pink-600 text-sm">
        Please provide your email.
      </p>
      <p
        class="mt-2 hidden [.validated_&]:peer-[:not(:placeholder-shown)]:peer-invalid:block text-pink-600 text-sm">
        Please enter a valid email address.
      </p>
    </div>
    <div>
      <input
      type="text"
      name="phone"
      required
      class="peer border-2 border-muted-medium py-4 px-4 rounded-xl placeholder:text-default focus:border-primary focus:ring-1 focus:ring-primary outline-none w-full [.validated_&]:invalid:border-pink-600 [.validated_&]:invalid:ring-2 [.validated_&]:invalid:ring-pink-200"
      placeholder="Phone*"
    />
      <p class="mt-2 hidden [.validated_&]:peer-invalid:block text-pink-600 text-sm">
        Please provide your phone number.
      </p>
    </div>

    <div class="md:col-span-2">
      <textarea
      name="message"
      required
      class="peer border-2 border-muted-medium py-4 px-4 rounded-xl placeholder:text-default focus:border-primary focus:ring-1 focus:ring-primary outline-none w-full h-40 [.validated_&]:invalid:border-pink-600 [.validated_&]:invalid:ring-2 [.validated_&]:invalid:ring-pink-200"
      placeholder="Message*"></textarea>
      <p class="mt-2 hidden [.validated_&]:peer-invalid:block text-pink-600 text-sm">
        Please provide your message.
      </p>
    </div>
    <div class="md:col-span-2">
      <div class="text-center">
        <button
        type="submit"
        class="bg-pink-500 text-lg font-medium rounded-lg py-5 px-14 text-white transition hover:bg-primary-strong">
        Submit Now
      </button>

        <div id="result" class="mt-3 text-center"></div>
      </div>
    </div>
  </div>
</form>

<script>
	const form = document.getElementById("form");
  const result = document.getElementById("result");

  form.addEventListener("submit", function (e) {
    e.preventDefault();
    form.classList.add("validated");
    if (!form.checkValidity()) {
      form.querySelectorAll(":invalid")[0].focus();
      return;
    }
    const formData = new FormData(form);
    const object = Object.fromEntries(formData);
    const json = JSON.stringify(object);

    result.innerHTML = "Sending...";

    fetch("https://api.web3forms.com/submit", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: json,
    })
      .then(async (response) => {
        let json = await response.json();
        if (response.status == 200) {
          result.classList.add("text-green-500");
          result.innerHTML = json.message;
        } else {
          console.log(response);
          result.classList.add("text-red-500");
          result.innerHTML = json.message;
        }
      })
      .catch((error) => {
        console.log(error);
        result.innerHTML = "Something went wrong!";
      })
      .then(function () {
        form.reset();
        form.classList.remove("validated");
        setTimeout(() => {
          result.style.display = "none";
        }, 5000);
      });
  });
</script>
```

## Conclusion

By following these steps, you can successfully add form validation to your Tailwind CSS contact form using Peer & Invalid Sibling States. This approach allows you to create visually appealing and functional validation messages that guide users to correct any errors before submission.

How to Add Form Validation to Your Tailwind CSS Contact Form


As a freelancer or small business owner, your portfolio website is one of your most powerful marketing tools. It showcases your work, skills, and experience to potential clients. However, having an impressive portfolio isn't enough if you don't provide an easy way for clients to get in touch with you. A contact form is essential for capturing leads and turning website visitors into paying customers.

In this article, we'll explore how to add a sleek and functional contact form to your portfolio website using [Web3Forms](https://web3forms.com/), a powerful contact form API.

![Contact Form](/img/blog/contact-form-screenshot.png)

## Why Use Web3Forms?

Web3Forms is a serverless API that allows you to easily add contact forms to your website without the need for complex backend infrastructure. It handles form submissions, spam filtering, and provides built-in email notifications. With Web3Forms, you can focus on creating a stunning portfolio while leaving the technical details of form handling to the experts.

## How to Implement Web3Forms

Implementing Web3Forms is straightforward. Here’s a step-by-step guide to adding a contact form to your portfolio site:

## Step 1: Create Your Access Key

To get started with Web3Forms, you'll need to create an access_key from the [website](https://web3forms.com/#start). Enter your email and you'll receive an access key in your inbox. Once you have the access_key, you can start creating forms using the Web3Forms API.

## Step 2: Build Your Contact Form

Next, create your HTML form or copy example code from the [Web3Forms Templates](https://web3forms.com/templates) or Docs. Here’s a basic example:

```html
<form action="https://api.web3forms.com/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <textarea name="message" placeholder="Your Message" required></textarea>
  <button type="submit">Submit</button>

</form>

<script src="https://web3forms.com/form.js"></script>
```

Replace `YOUR_ACCESS_KEY_HERE` with the access key you received.

## Step 3: Style Your Form

Now, style your form using CSS to match your portfolio’s design. Web3Forms allows for complete customization, so your form can seamlessly blend in with your site’s aesthetics.

## Step 4: Test Your Form

After setting up your form, test it to ensure it’s working correctly. Fill out the form and submit it. Check your email inbox for the submission. If it doesn’t arrive, review your form setup for any errors.

# Conclusion

Adding a contact form to your portfolio website is a smart move to increase client engagement. With Web3Forms, the process is easy and efficient, requiring no backend coding knowledge. Implement it today and open up a new channel of communication with potential clients.

By following these steps, you can add a functional and stylish contact form to your portfolio website using Web3Forms. It’s a small effort that can lead to significant opportunities. Start now and watch as your client list grows!

Add a working contact form to your portfolio website


Web3Forms is a popular choice among developers to create a working contact form for their websites. With the latest release of Next.js Server Actions, it's now easier to create a contact form with Web3Forms. Here's how to do it.

## What is Next.js Server Actions?

Next.js Server Actions is a new feature that allows you to create async functions that are executed on the server. It's a great way to handle form submissions, API calls, and other server-side logic like data mutations.

## Setting up the contact form

First, you need to setup the contact form in your Next.js Project as usual. Here's an example code:

```jsx
// app/contact/page.tsx
export default function Contact() {
  return (
    <div>
      <form action={}>
        <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE"/>
        <input type="text" name="name" required/>
        <input type="email" name="email" required/>
        <textarea name="message" required></textarea>
        <button type="submit">Submit Form</button>
      </form>
      <span>{result}</span>
    </div>
  );
}
```

Now we have a basic contact form code ready, let's connect this with server actions.

## Next.js Server Action

You can create this server action as a separate page or even as a separate component. Here's how the code looks like:

```jsx
// ../components/actions.ts
"use server";

export async function submitForm(prevState: any, formData: FormData) {

   try {
      const response = await fetch("https://api.web3forms.com/submit", {
      method: "POST",
      body: formData
    });

   const data = await response.json();
   return data;

  } catch (e) {
    throw new Error('Failed to create task')
  }

}
```

Now, modify our original code to inlcude the server action:


```jsx
// app/contact/page.tsx
"use client";

import { useFormState } from "react-dom";
import { submitForm } from '../components/actions';

export default function Contact() {
  const [result, formAction] = useFormState(submitForm, null);

  return (
    <div>
      <form action={formAction}>
        <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE"/>
        <input type="text" name="name" required/>
        <input type="email" name="email" required/>
        <textarea name="message" required></textarea>

        <button type="submit">Submit Form</button>

      </form>
      <span>{result?.message}</span>

    </div>
  );
}
```

## Done!

Woohoo, we did it. We just made a working contact form using Next.js Server Actions and Web3Forms Contact form API. Isn't it easy?

## New to Web3Forms?

If you are new to web3forms, make sure you create your own access key from [Web3Forms](https://web3forms.com/) and replace the `YOUR_ACCESS_KEY_HERE` with your own access key.

Create a Contact Form with Next.js Server Actions

Setting up forms can be pain. But JAMStack makes it easier using contact form API. In this article, let's dive in to jamstack contact forms and learn how to integrate it easily into your projects.

## Setting up the contact form

First, you need to setup the contact form. In this example, I'm going to use plain HTML, but in reality, you will be writing for your framework. It could be React, Vue etc. Also check out some [Form Templates](https://web3forms.com/templates)

```html
<form action="" method="POST">

    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input type="number" name="phone" required>
    <textarea name="message" required></textarea>

    <button type="submit">Submit Form</button>

</form>
```

Now we have a basic contact form ready, let's connect this with a contact form API in the next step.

## Contact form API

In this step, we will be connecting the above form with a contact form API service. We will be using Web3Forms as our API service because it's fast and has a generous free plan. Also the setup is quick and painless.

### Create an Access key
First, go to https://web3forms.com and click on the "Create your Access Key" button and enter your email and submit the form. The form will look like this:

![Create Access Key](/img/blog/access-key.png)

Now, you will receive an email with the access key in your inbox. Please check Promotions or Updates tab as well. The email will look like this:

![Email Screenshot](/img/blog/email-screenshot.png)

## Connect contact form with API

Once you received the access key, let's connect that with your form. First, Let's add a form action URL as described in [Web3Forms Documentation](https://docs.web3forms.com/)

```html
<form action="https://api.web3forms.com/submit" method="POST">
```

Now, add the access key inside the form as a `hidden` field. Make sure the input name is `access_key`. This is used by Web3Forms to send email to your address. Here's how it would look like:

```html
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
```

## Customizing Web3Forms

Now, our basic stuff is ready for submission, let's go further and make some modifications provided by Web3Forms. Each settings can be added as shown below.

**Custom Redirection after form submission**
```html
<input type="hidden" name="redirect" value="https://web3forms.com/success">
```

**Customize Email Subject**

```html
<input type="hidden" name="subject" value="New Submission from Web3Forms">
```

**Add CC Emails (Pro)**

```html

<input type="hidden" name="ccemail" value="partner@example.com">

<input type="hidden" name="ccemail" value="partner@example.com; sales@website.com">
```

**Send form data to Webhook (Pro)**

```html
<input type="hidden" name="webhook" value="https://webhook.site/xxxxx-xxx-xxxxx" />
```

**And more...**

Web3Forms provides more customizations like adding reCaptcha, hCaptcha, File Attachments and more.. Make sure you check out the documentation for more customization options & example code samples.

## Testing our form

Now that our form is ready, let's test it. Here's the full code:

```html
<form action="https://api.web3forms.com/submit" method="POST">

    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
    <input type="hidden" name="subject" value="New Submission from Web3Forms">
    <input type="hidden" name="redirect" value="https://web3forms.com/success">

    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input type="number" name="phone" required>
    <textarea name="message" required></textarea>

    <button type="submit">Submit Form</button>

</form>
```

And here's the result styled with Tailwind CSS:

![Tailwind CSS Contact Form](/img/blog/contact-form.png)

[View Live Demo](https://codepen.io/surjithctly/pen/ZELQggB)

Now, submit this form and you will receive an email like this:

![Sample Email from Web3Forms](/img/blog/sample-email.png)

## Done!

Woohoo, we did it. We just made a working contact form using JAMStack & API. Isn't it easy? Thanks to [Web3Forms](https://web3forms.com/) for providing such an incredible service.

How to setup a Working Contact Form for JAMstack Websites using API


React hook form's useWatch is a great way to get the data from the form. But it cannot easily update other form fields based on the watch field. In this article, we will show you how to modify other form fields using React Hook Form's useWatch

## The Problem

Imagine you have a contact form with a name field and a subject field. Now, you want to change the subject based on the user input in the name field. Here is how you can do it with react hook form and watch.

## The Solution

First import `react-hook-form`:
```jsx
import { useForm } from "react-hook-form";
```

Then, create a form with the `useForm` hook and import the `watch` prop & `setValue` prop as well.

```jsx
const { register, handleSubmit, watch, setValue } = useForm();
```

Then we need to watch the name field and update the subject field based on the user input. For that we have to use the `watch` prop and `setValue` prop.

```jsx
// watch "name" field and set default value to "Someone"
const watchName = watch("name", "Someone")

// set value to "subject" based on the watch field
  React.useEffect(() => {
    setValue("subject", `${watchName} sent a message from Web3Forms`)
  }, [userName]);
```

Now, create a `<form>` tag and add the `onSubmit` prop.
```jsx
<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("name")} />
  <input type="hidden" {...register("subject")} />
  <button type="submit">Submit</button>
</form>
```

That's it. Now, the subject field will be updated based on the user input in the name field. You can also use the [React Hook Form](https://react-hook-form.com/) documentation to learn more.

Here's the full code for reference:

```jsx
import { useForm } from "react-hook-form";


function App() {
  const { register, handleSubmit, watch, setValue } = useForm();

  const watchName = watch("name", "Someone")

  React.useEffect(() => {
    setValue("subject", `${watchName} sent a message from Web3Forms`)
  }, [watchName]);

  const onSubmit = async (data, e) => {
    console.log(data);
    // use a contact form API to send the data to your server
    // try: web3forms.com
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} />
      <input type="hidden" {...register("subject")} />
      <button type="submit">Submit</button>
    </form>
  );
}

```

## Wrapping Up

That's it, React hook form is easier to work with. But you can also do more with Web3Forms like sending the form submissions directly to your email. Please create an access key from [Web3Forms](https://web3forms.com/) to get started.


How to Modify other Form Fields using React Hook Form watch & setValue

In this article, we will show you how you can setup a working contact form with Web3Forms and deploy to Netlify Hosting. We will also explain why Web3Forms is a great alternative to Netlify's default form service.

## Netlify Forms vs Web3Forms

Netlify has its own service for form submissions. But, there are some limitations. Check the following table to see why you should choose Web3Forms as a great alternative to Netlify Forms.

### Free plan

| Netlify                 | Web3Forms                |
| ----------------------- | ------------------------ |
|❌ 100 submissions / month |✔ 250 submissions / month |
|❌ Single Form             |✔ Unlimited Forms          |
|❌ Single Domain           |✔ Unlimited Domains        |
|❌ Cannot use outside their platform    |✔ Can use anywhere |
|❌ Netlify Account Required    |✔  No login or signup needed |

### Paid Plan (Pro)

| Netlify              | Web3Forms                |
| -------------------- | ------------------------ |
| ❌ $19 per month            |✔ $4 per month                |
|❌ 1,000 submissions    |✔ Unlimited Submissions    |
| ❌ Single Form          |✔ Unlimited Forms          |
| ❌ Single Domain        |✔ Unlimited Domains        |
| - |✔ Advanced Spam Protection |
| - |✔ Recaptcha v3 Integration |
| - |✔ Webhooks (connect 1000s of apps) |


##  Adding Email Contact Forms to Netlify using Web3Forms

Now, lets move to create our app. Its so simple, using Web3Forms, Here, an `index.html` is more than enough!

So, now lets create an `index.html` file and add some contents to it. Here is how a basic `html` file looks like:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web3Forms Contact Form</title>
  </head>
  <body>
    
  </body>
</html>
```

Now, Create your form. First, you should create a `<form>` tag with method as `POST` and `action` as `https://api.web3forms.com/`. See the example 👇

```html
<form action="https://api.web3forms.com/submit" method="POST"></form>
```

Inside the `form`, you should create an `input` with type `hidden` for the Access Key. Replace `YOUR_ACCESS_KEY_HERE` with your actual access key received in your email. This is mandatory.

```html
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />
```

You can also add many other configuration similarly. Please [Visit our Docs](https://docs.web3forms.com/getting-started/customizations) to see more details.

After, configuring, you can add regular form inputs for `email`, `phone`, `message` etc. Here is how the page looks once added basic form elements.

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web3Forms Contact Form</title>
</head>

<body>

    <form action="https://api.web3forms.com/submit" method="POST" id="form">
        <input type="hidden" name="access_key" value="YOUR_ACCESS_KEy_HERE" />
        <input type="hidden" name="subject" value="New Submission from Web3Forms" />
        <input type="hidden" name="redirect" value="https://web3forms.com/success" />
        <input type="checkbox" name="botcheck" id="" style="display: none" />
        <div>
            <label for="name">Full Name</label>
            <input type="text" name="name" id="name" placeholder="John Doe" required />
        </div>
        <div>
            <label for="email">Email Address</label>
            <input type="email" name="email" id="email" placeholder="you@company.com" required />
        </div>
        <div>
            <label for="message">Your Message</label>
            <textarea rows="5" name="message" id="message" placeholder="Your Message" required></textarea>
        </div>
        <button type="submit">
            Send Message
        </button>
    </form>

</body>

</html>
```

## Deploying to Netlify

Now, here come the final step. Deploying our app to netlify, it is super easy, Connect your project using git or upload the files directly using [Netlify Drop](https://app.netlify.com/drop). For this example, we will be using Drop, but we recommend to use `git` deployments.

Once you added the project, it will be available on your dashboard along with a link to preview.

![screely-1619361373677.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619361384551/7dBMv-Z0V.png)

That's it! You can now see the live demo by clicking the link. Now test your form by clicking the submit button on your form.

---

## 🙌 Wrapping Up

That's it, creating a working contact form never been easier. But you can do more with Web3Forms. Please check the other [articles](/blog) and [our docs](https://docs.web3forms.com/) for more info and customization options such as sending requests using `ajax` and more.

How to setup Contact Form with Netlify Hosting

Creating contact form was hard. Writing backend code, Setting up a PHP Server, dealing with spams etc. It was an old story. Setting up a working contact form is now easy.

Today, We will show you how you can setup Web3Forms for your static website without backend or server code. It is super simple and super amazing, lets get started! 🤟


## Get Access Key

First, lets head over to [web3forms.com](https://web3forms.com/). Then, click on the `Create Access Key` button. Simply enter your email and the `Access Key` will be emailed to you!

## Setup Contact Form

Now, lets move to setup contact form on our website. If you want, check out some [contact form templates](https://web3forms.com/examples) here.

So, now lets create an `index.html` file and add some contents to it. Here is how a basic `html` file looks like:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web3Forms Contact Form</title>
  </head>
  <body>
    
  </body>
</html>
```

Now, Create your form. First, you should create a `<form>` tag with method as `POST` and `action` as `https://api.web3forms.com/`. See the example 👇

```html
<form action="https://api.web3forms.com/submit" method="POST"></form>
```

Inside the `form`, you should create an `input` with type `hidden` for the Access Key. Replace `YOUR_ACCESS_KEY_HERE` with your actual access key received in your email. This is mandatory.

```html
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />
```

You can also add many other configuration similarly. Please [Visit our Docs](https://docs.web3forms.com/getting-started/customizations) to see more details.

After, configuring, you can add regular form inputs for `email`, `phone`, `message` etc. Here is how the page looks once added basic form elements.

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web3Forms Contact Form</title>
</head>

<body>

    <form action="https://api.web3forms.com/submit" method="POST" id="form">
        <input type="hidden" name="access_key" value="YOUR_ACCESS_KEy_HERE" />
        <input type="hidden" name="subject" value="New Submission from Web3Forms" />
        <input type="hidden" name="redirect" value="https://web3forms.com/success" />
        <input type="checkbox" name="botcheck" id="" style="display: none" />
        <div>
            <label for="name">Full Name</label>
            <input type="text" name="name" id="name" placeholder="John Doe" required />
        </div>
        <div>
            <label for="email">Email Address</label>
            <input type="email" name="email" id="email" placeholder="you@company.com" required />
        </div>
        <div>
            <label for="message">Your Message</label>
            <textarea rows="5" name="message" id="message" placeholder="Your Message" required></textarea>
        </div>
        <button type="submit">
            Send Message
        </button>
    </form>

</body>

</html>
```

That's it. Once you run this and submit the form, the form should work. even in localhost.

### Here is a [live demo](https://codepen.io/surjithctly/pen/ZELQggB)  🚀

---

## 🙌 Wrapping Up

That's it, creating a working contact form never been easier. But you can do more with Web3Forms. Please check the other [articles](/blog) and [our docs](https://docs.web3forms.com/) for more info and customization options such as sending requests using `ajax` and more.

Blog & Articles