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.
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 %}