How to add a contact form to your Jekyll site

Create your form endpoint in FormBackend

Go create a login and create a new form endpoint in FormBackend. Give it a name you can remember for example: “NextJS Contact Form” or something similar for this tutorial. It can always be changed later and is only used for you to remember your form.

Create a new Jekyll app

If you don’t have an existing Jekyll app, let’s create one real quick - if you do, then you can skip this section and go to the next one.

First let’s install the Jekyllrb gem

gem install jekyll

Go ahead and create the new Jekyll site in it’s desired location by cd to that directory and running

jekyll new jekyll-formbackend

You can of course name the directory whatever you want :) Once the command is done running, go ahead and change to that directory

cd jekyll-formbackend

Create the contact us page

Let’s go ahead and create a new contact page to which we’ll add our Jekyll contact form. We do this by creating a new file in the root named contact.markdown. So open up a new file in your favorite editor and save it with that filename.

At the top we’ll add what is known as frontmatter (simple yaml configuration for the page)

---
layout: page
title: Contact us
permalink: /contact/
---

That tells Jekyll what layout to use, what the title of the page should be and what url (permalink) it can be found at.

Start the Jekyll server

Let’s just make sure our page works, by starting the Jekyll server:

bundle exec jekyll serve

This will start a server running on http://localhost:4000. You can navigate to your new Contact Us page either by clicking on the link in the navbar (if you’re on default page layout) or by going to the following url http://localhost:4000/contact.

Time to add the form

Go ahead and paste the following in your contact.markdown file below the frontmatter:

<form accept-charset="UTF-8" action="{your-unique-url}" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea name="message"></textarea>

  <button type="submit">Send message</button>
</form>

Go to your account on FormBackend and create a new form. Give it a name you can remember like “Jekyll Contact form” and copy the unique URL for your form (can be found on the Settings-tab). Paste that URL in place of {your-unique-url} in the HTML you pasted from above.

That’ll give you an unstyled HTML form you can now style with CSS, which will post form submissions to FormBackend. If you need further help to customize your Jekyll site, their documentation is great!