How to Add a Contact Form to Jekyll
In this tutorial, we’ll show you how to easily set up a contact form on Jekyll using HeyForm.
Jekyll is a static site generator that uses templates based on Liquid templating language to generate websites automatically, which means you don’t have to worry about maintaining the back-end of your website by yourself.
Jekyll has been around since late 2009, and yet it’s still one of the most popular static site generators in the world today. It runs on Ruby, but you don’t need to know how to code to make use of it — instead, you can start with writing your content in simple Markdown and then publish your Jekyll-generated site using a simple command like jekyll build
Its elegant syntax and live reloading features make it easy to create anything from a personal blog to an e-commerce store with minimal effort.
You can deploy Jekyll sites to just about any platform that supports web publishing, including GitHub pages, Vercel, Netlify, etc., through the use of their CDN service.
With the help of this guide, you will learn how to add a contact form to Jekyll with HeyForm. The process is straightforward. Let’s get started.
Get your HeyForm form embed code.
Select the specific online form in your workspace and click on the share option.
On the Share page, you’ll see the embed section.
Choose the embed type you fancy, and the next window will greet you with the embed code and preview. Click on the copy button, and save it to the clipboard.
Embed HeyForm contact form to Jekyll
The process is straightforward. Navigate to the folder containing the specific Markdown or HTML file you’d want to embed HeyForm.
Then inside markdown files, use your HeyForm embed code like this:
<div class="heyform" data-heyform-id="NPzGmCIj" data-heyform-mode="0" data-heyform-button-text="Launch Form"></div><script src="https://my.heyform.net/embed"></script>
Just make sure the NPzGmCIj in data-heyform-id="NPzGmCIj" reflects your form ID.
That’s about it. Your static page will render the online form in the front-end, and HeyForm will handle the contact form submissions on your Jekyll site. If you would like help setting up HeyForm to Jekyll site, feel free to reach us out at community.heyform.net.
New to Heyform?
HeyForm is an online form builder capable of crafting beautiful forms, collecting data, and analyzing data. HeyForm is ideal for websites based on Jekyll as well. Start your free account today!