Creating a static website form using Fabform.io is an efficient way to collect user input without needing a backend server. Fabform.io handles the form submission and provides you with the collected data. Below is a step-by-step guide on how to create and integrate a form into your static website.
Start by creating an HTML file for your static website. You can name it index.html
or any other name you prefer. Below is a basic HTML template to get you started:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.form-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}
.form-container h2 {
margin-bottom: 20px;
font-size: 24px;
}
.form-container input,
.form-container textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-container button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
.form-container button:hover {
background-color: #218838;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Contact Us</h2>
<form id="contactForm" method="POST" action="">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" placeholder="Your Message" rows="4" required></textarea>
<button type="submit">Send Message</button>
</form>
</div>
</body>
</html>
https://fabform.io/f/your-form-id
).action
attribute in your form’s HTML code with this URL.<form id="contactForm" method="POST" action="https://fabform.io/f/your-form-id">
Now your form is set up to submit data to Fabform.io.
You can further customize your form’s appearance by modifying the CSS within the <style>
tags. Adjust colors, fonts, or layout as desired.
Before deploying your website, it’s important to test the form to ensure it works correctly:
By default, Fabform.io stores your form submissions in the dashboard, but you can also set up additional features like email notifications or redirects.
Now that your form is fully functional, you can deploy your static website. Here are some common options for deployment:
index.html
file) onto the Netlify dashboard.Once your website is deployed, visit the live site and test the form again to ensure everything works as expected. You can also check the submissions in your Fabform.io dashboard.
You have successfully created a static website form using Fabform.io. This approach simplifies form handling for static sites by offloading the backend work to Fabform.io, allowing you to focus on building and styling your front-end form.
With the flexibility of HTML and CSS, you can further enhance your form to suit your design needs, while Fabform.io takes care of form submissions and data storage.
check the fabform form backend service