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

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

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

How to setup Contact Form with Netlify Hosting

Create a Working Contact Form for your Static Website 🚀

Get Started!