How to create a contact form for a static site with Netlify
Creating form on a static website hosted on Netlify is super easy.
Here is how to do it in couple simple steps.
First let's create a index.html file in our project's folder.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netlify Contact Form</title>
</head>
<body>
</body>
</html>
Then let's create our contact form inside the body
<h1>Send Me a Message</h1>
<p>Fill the contact form below to send me a message, and I will contact you soon</p>
<form>
<input type="text" name='name' placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message"cols="30" rows="10" placeholder="Your Message"></textarea>
<button type="submit">Send</button>
</form>
We also want to redirect the user to a thank you page after submitting the form. Let's create, one real quick, create a thanks.html file in our project directory.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Thank You</h1>
<p>I will try to reply to your message as soon as possible</p>
</body>
</html>
Now let's upload it to Netlify, go to https://netlify.com login or register if you don't have an account. Go to sites tab and drag and drop the folder with our html files
Now our site is available to the world, let's make the contact form work. Open index.html again, and edit the form tag by adding few attributes.
name - this value will show up in Netlify as the name of our form, it's useful if you have many forms on your website
action - this indicates to which page it should redirect after a successful form submit. In our case it's thanks.html
netlify - this attribute tells Netlify to handle the form
This is how our new form will look
<form name="contact" action="/thanks.html" netlify>
<input type="text" name='name' placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message"cols="30" rows="10" placeholder="Your Message"></textarea>
<button type="submit">Send</button>
</form>
On Netlify go to site's overview. Click the deploy tab, and once again drag and drop the site's folder to update the files.
Now let's try submitting a form.
It seems to be working! Now let's check out our form submission in Netlify.
Go to our site overview and select the forms tab.
As you can see it works perfectly, and required almost 0 effort to set up. It also has a spam filter inbuilt so you don't have to worry about combing through spam emails. And you can get your form submissions sent straight to your email inbox.
Top comments (0)