- Published on
Create HTML contact form to a static website
- Authors
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
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.
- Name
- Umur Köse