Add a Contact form to your Jekyll site

cover
Photo credit: Jekyll

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.

StaticForms provides the missing forms back-end. It's incredibly easy to set up: simply set the action attribute on your form tag to point to StaticForms and you can immediately start making form submissions. No JavaScript, no iFrames, complete control over layout and appearance.

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">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" placeholder="First name" required />
</div>
<div class="form-group">
<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>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" required class="form-control"></textarea>
</div>
<div class="bg-white text-center pt-4 pb-2 mb-2">
<button type="submit" class="btn btn-primary rounded-pill">Submit</button>
</div>
</form>

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.

img

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.

img

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!

That's it!