Create HTML contact form to a static website

Send email notification from your static website form

In this article, we going to get form data and send email in static website. We will handle submissions via Getform.

Getform Dashboard

Form email notification

Other Examples

Create dynamic form with React.js

Create dynamic form with Vue.js

More examples of Getform

Form Notifications

Send Slack notification from your HTML form

Send Email notification from your HTML form

Create HTML Form

Simple HTML form template:

<form action="">
    <div>
        <label for="name">Full Name</label>
        <input type="text" name="name">
    </div>
    <div>
        <label for="email">Email</label>
        <input type="text" name="email">
    </div>
    <div>
        <label for="message">Message</label>
        <textarea name="message" id="" cols="30" rows="3"></textarea>
    </div>
    <div>
        <select name="animal">
            <option>Cat</option>
            <option>Dog</option>
            <option>Bear</option>
            <option>Horse</option>
        </select>
    </div>
    <button type="submit">Submit</button>
</form>

Tailwind CSS

I used Tailwind CSS to customize HTML form.

<form class="rounded-md p-6" action="">
    <h2 class="text-2xl font-bold mb-4">Contact Form</h2>
    <div class="flex items-baseline flex-col mb-4">
        <label class="text-sm mb-1" for="name">Full Name</label>
        <input class="rounded-md border py-1.5 px-3 w-full" type="text" name="name">
    </div>
    <div class="flex items-baseline flex-col mb-4">
        <label  class="text-sm mb-1" for="email">Email</label>
        <input class="rounded-md border py-1.5 px-3 w-full" type="text" name="email">
    </div>
    <div class="flex items-baseline flex-col mb-4">
        <label  class="text-sm mb-1" for="message">Message</label>
        <textarea class="rounded-md border py-1.5 px-3 w-full" name="message" id="" cols="30" rows="3"></textarea>
    </div>
    <div class="mb-4">
        <select class="rounded-md border py-1.5 px-3 w-full" name="animal">
            <option>Cat</option>
            <option>Dog</option>
            <option>Bear</option>
            <option>Horse</option>
        </select>
    </div>
    <button class="bg-blue-500 text-white text-sm w-full p-2 rounded-md" type="submit">Submit</button>
</form>

Handle submissions with Getform

Getform is a modern form backend platform that lets you handle your forms on your websites and apps. You can create a form endpoint and start collecting submissions within minutes without having to setup a server or write any backend. Getform is perfect for static sites and works anywhere you can put an HTML form.

Get Started

Create account on Getform
Verify your email
Click + Create... button on side bar

Create your form endpoint

Copy your form endpoint

That's it. All we need to do is add endpoint and set form method as POST.

<form action="https://getform.io/f/your-getform-endpoint" method="POST">
    ...
    ...
</form>

Let's fill our form and submit.

You can check your submission on Getform Dashboard.