Static websites are great. They're fast, secure, simple to deploy and cheap to host. And tools like Jekyll make it super-easy to build everything from a simple blog to a full blown application.
There is one area where static sites hit a wall however: forms. With a static site there is no back-end to send the form data to.
That's why we built StaticForms.
Adding a contact form to your Jekyll site
1. Add the following code to your Jekyll template
<form action="<<YOUR STATICFORMS FORM ENDPOINT>>" method="POST" id="contact-form">
<input type="text" class="form-control" name="name" placeholder="First name" required />
<label for="email">Email address</label>
<input type="email" class="form-control" name="email" placeholder="[email protected]" required />
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
<textarea name="message" required class="form-control"></textarea>
<div class="bg-white text-center pt-4 pb-2 mb-2">
<button type="submit" class="btn btn-primary rounded-pill">Submit</button>
2. Create a StaticForms account
If you don't already have a StaticForms account, now is the time to sign up. It's quick, no credit card required, and you get up to 100 submissions per month for free!
3. Create your StaticForms form endpoint
From the Dashboard, click the Create Form button. On the next page, give your form a name and click Create.
The form configuration page will appear. Copy the Form Endpoint and paste it in to the form created in Step 1, replacing the
<<YOUR STATICFORMS FORM ENDPOINT>> placeholder in the
action attribute of the form.
4. Optional: Configure your form end-point to do more
Tell StaticForms to email you on every submission, redirect the person submitting the page to a new web page or send them a thank-you email, add a subscriber to Mailchimp or Buttondown or a contact to EmailOctopus or CapsuleCRM. Or send a webhook to anywhere you like!