Jekyll Contact Form

Without Backend, Sent via Email (or Slack)

This guide will teach you how to create a beautiful and elegant form using Jekyll.

Create the Jekyll app

(if you're starting a brand new project)

In case you're starting a brand new project, you'll need some initial steps. One of the most straightforward ways is to use the jekyll binary. See the installations docs for more details. To start:

Open the terminal and install the jekyll
gem install jekyll bundler
Go to the directory where you will store your project. Initialize jekyll:
jekyll new jekyll-contact-form
Enter the newly created directory:
cd jekyll-contact-form
Start the server
bundle exec jekyll serve --livereload

Use your favorite code editor to work with files in jekyll-contact-form. You will be able to make a contact form there.

Add contact form

Open contact.markdown. You can use any type of field and any framework for building HTML, CSS, and Javascript. For now, let's stick with the standard "Name", "Email", and "Message" for our simple contact form. We're also going to use TailwindCSS to make it beautiful, but again, you can use your own customized CSS code too.

See more about Tailwind JIT via CDN.

1---
2layout: page
3title: "Contact Us"
4permalink: /contact/
5---
6
7<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
8<form action="{FORM_ENDPOINT}" method="POST">
9  <div class="mb-3 pt-0">
10    <input
11      type="text"
12      placeholder="Your name"
13      name="name"
14      class="px-3 py-3 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus:outline-none focus:ring w-full"
15      required
16    />
17  </div>
18  <div class="mb-3 pt-0">
19    <input
20      type="email"
21      placeholder="Email"
22      name="email"
23      class="px-3 py-3 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus:outline-none focus:ring w-full"
24      required
25    />
26  </div>
27  <div class="mb-3 pt-0">
28    <textarea
29      placeholder="Your message"
30      name="message"
31      class="px-3 py-3 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus:outline-none focus:ring w-full"
32      required
33    ></textarea>
34  </div>
35  <div class="mb-3 pt-0">
36    <button
37      class="bg-blue-500 text-white active:bg-blue-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
38      type="submit"
39    >Send a message</button>
40  </div>
41</form>

Create the free HeroTofu forms backend

Head over to herotofu.com and create an account. It will handle the tedious and complicated form submission process for you. You'll get 14 free days of the free trial. Later, you can leave it with a free forever plan. For the sole purpose of using the contact form, it's usually more than enough.

HeroTofu registration is straightforward. Fill in the basic fields and then confirm your email address.

Herotofu signup

Once you have confirmed your email address, go to app.herotofu.com/forms to create your first form. Enter your name and email address where you want to receive your form submissions Slack and Zapier are also options, but you need to pay for them once the trial is over.

You'll get the endpoint URL once you hit Submit, so remember to copy that.

Herotofu Forms List

Use the created forms backend in your contact form

Once again, open the my-first-post.md file and fill in the form endpoint URL. You need to change the {FORM_ENDPOINT} variable at the top of the file. It should look like this.

1---
2title: "My First Post"
3date: 2022-04-26T21:03:59+00:00
4draft: true
5---
6
7Contact form:
8
9{{< rawhtml >}}
10<form action="https://public.herotofu.com/v1/ENDPOINT_URL_OR_HEROTOFU_FORM_ID" method="POST">
11
12// The rest of the code...

Done! Go ahead and test your contact form submission! You don't need to do any backend email work, as HeroTofu will handle everything.

HeroTofu