Create a Working Contact Form for your Static Website 🚀

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. 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 here.

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

<!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 goes here -->
  </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 👇

<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.

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

You can also add many other configuration similarly. Please Visit our Docs 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.

<!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 🚀

🙌 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 and our docs for more info and customization options such as sending requests using ajax and more.

Create a Working Contact Form for your Static Website 🚀

Get Access Key

Setup Contact Form

Here is a live demo 🚀

🙌 Wrapping Up

Get Started!