jekyll

Add a contact form to your Jekyll site

—

by

David
in

This guide is for anyone adding a contact form to their Jekyll website. It also applies to any static website, not just Jekyll. Quickstart for Jekyll.

Setup a workflow backend for your Jekyll site using Embed Workflow

1. Create a free Embed Workflow account

Embed Workflow offers a free account that works perfectly for low-volume contact requests. It is super easy to get started. You do not need a credit card to begin.

Sign up here.

2. Create your Workflow

New accounts may come with templates already created. Feel free to modify one of those instead.

Log in to Embed Workflow, click the “New Workflow” button, and name it “Jekyll Contact Form” (or whatever you like).

3. Add your fields

Fields define the data coming into your workflows.

4. Create your form

Create your form with the drag and drop editor. Add a title, images, text, or any of your fields. Customize labels, placeholders, and button colors to your liking.

5. Design your workflow

Once you receive a form submission, your workflow will begin. You can add emails, text messages, tasks, delays, slack notifications, etc.

Let’s add an email notification.

  • Open the Workflow Builder.
  • Add an email action and name it “Email Notification”.
  • Edit the action
  • Set Recipient Email Address to: “{{ Account Email }}” so we email ourselves.
  • Set Subject to “New Email Notification!”
  • Set Body to (Adjust tags if needed): Name: Email:

6. Embed your form

Copy your HTML

From the workflow dashboard, open Embed Components (/workflows/WORKFLOW_ID/embed). Then select the form and, finally, copy the HTML for the inline form.

Create a partial

Create the new file /includes/partials/contact_form.html and paste your form.

Render partial

Render the contact form partial on a contact page.

{% include partials/contact_form.html %}