Web3Forms: An Easy Way to Add a Contact Form to a Jekyll Website

Adding a contact form to a static website sounds simple. The form itself is easy to create with HTML, but handling the submitted information is where things become more complicated.

With a traditional dynamic website, we can build a backend to process form submissions, store information, and send emails. A static website built with Jekyll does not provide that backend.

This is where Web3Forms can be useful.

Web3Forms provides a simple form backend that allows static websites to receive form submissions and send them to an email address without requiring a separate application server.

For Jekyll websites, this can be a convenient way to add a contact form while keeping the website completely static.

What Is Web3Forms?

Web3Forms is a form backend service designed to work with websites that do not have their own server-side form processing.

The basic process looks like this:

Visitor
   ↓
Contact Form
   ↓
Web3Forms API
   ↓
Email Notification
   ↓
Inbox

The website contains a normal HTML form. When the form is submitted, the form data is sent to the Web3Forms API.

We don’t need to create a PHP, Node.js, ASP.NET, Python, or other backend application just to process the form.

This makes the service particularly useful for static websites.

Why Web3Forms Works Well With Jekyll

Jekyll generates static websites.

Markdown files, Liquid templates, HTML, CSS, and JavaScript are processed during the build and converted into static files.

This provides several advantages:

• Fast page loading
• Simple deployment
• Easy version control
• Low hosting requirements
• Good security
• No application server to maintain

The limitation is that static files cannot directly process form submissions.

We could build a separate backend for this purpose, but for a simple contact form that often adds unnecessary complexity.

Web3Forms gives us another option.

The Jekyll site can remain static while Web3Forms handles the form submission.

Getting Started With Web3Forms

The basic setup is straightforward.

After creating a Web3Forms account, we can obtain an access key and use it in the HTML form.

A minimal example looks like this:

<form action="https://api.web3forms.com/submit" method="POST">
	<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
		<input type="text" name="name" placeholder="Your Name" required>
			<input type="email" name="email" placeholder="Your Email" required>
				<textarea name="message" placeholder="Your Message" rows="6" required/>
				<button type="submit">
    Send Message
  </button>
			</form>

The most important part is the access key:

<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

The form data is submitted to the Web3Forms API, which handles the submission and email notification.

There is no need to create a separate backend application.

Using Web3Forms With Jekyll

One of the advantages of Web3Forms is that the form can be placed directly inside a Jekyll page.

For example:

_pages/
└── contact.md

A Minimal Mistakes contact page can contain the Jekyll front matter followed by the HTML form.

For example:

---
layout: single
title: "Contact"
permalink: /contact/
author_profile: true
classes: wide
---

If you have a question, suggestion, feedback, or would like to get in touch, please use the form below.

<form action="https://api.web3forms.com/submit" method="POST">
					<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
						<div>
							<label for="name">Name</label>
							<input type="text" id="name" name="name" required>
  </div>
							<div>
								<label for="email">Email</label>
								<input type="email" id="email" name="email" required>
  </div>
								<div>
									<label for="message">Message</label>
									<textarea id="message" name="message" rows="7" required/>
								</div>
								<button type="submit">
    Send Message
  </button>
							</form>

Because the form uses standard HTML, there is very little additional configuration required on the Jekyll side.

This keeps the overall project simple.

Web3Forms Free Plan

One of the reasons Web3Forms is interesting for personal websites is the availability of a Free plan.

The current Free plan includes 250 submissions per month and unlimited forms.

For a personal blog, portfolio, documentation website, or small project, that can be sufficient.

For example, a website receiving a few dozen genuine contact messages each month is unlikely to need a larger submission allowance.

The Free plan also allows us to test the service before deciding whether additional features are necessary.

As with any online service, pricing and limits can change, so the official pricing page should be checked before making a decision.

Web3Forms Pro Plan

For websites with higher submission volumes or more advanced requirements, Web3Forms provides a Pro plan.

The current listed price is $12 per month, with up to 10,000 submissions per month.

The Pro plan also includes additional functionality such as:

• Custom redirects
• Webhooks
• Advanced spam protection
• Additional email customization
• Higher submission limits

These features can become useful for business websites, applications, agencies, and other projects where the contact form is an important part of the workflow.

For a small personal website, however, upgrading is not necessarily required.

Free vs. Pro

The current plans can be summarized as follows:

Feature	Free	Pro
Monthly submissions	250	10,000
Forms	Unlimited	Unlimited
Static websites	Yes	Yes
Form API	Yes	Yes
Custom redirects	—	Yes
Webhooks	—	Yes
Advanced spam protection	—	Yes
Price	Free	$12/month

These features and limits may change, so the official Web3Forms pricing information remains the best place to verify the current offering.

Adding Spam Protection

A public contact form will eventually attract automated submissions.

For that reason, some level of spam protection is important.

At a minimum, we should use proper HTML validation:

<input type="email" name="email" required>

Additional protection can include:

• Honeypot fields
• CAPTCHA
• Server-side spam filtering
• Rate limiting
• Web3Forms spam protection

For a small personal website, it usually makes sense to start with basic protection and increase it if spam becomes a problem.

There is little benefit in making a simple contact form unnecessarily complicated.

Do We Need JavaScript?

No.

A basic Web3Forms integration can work with HTML alone:

<form action="https://api.web3forms.com/submit" method="POST">

JavaScript can still be added later for things such as:

• Client-side validation
• Loading indicators
• Custom success messages
• AJAX submissions
• Improved user experience

But none of those are required for a basic form submission.

This is another reason the service fits well with Jekyll.

Creating a Contact Success Page

A dedicated success page provides a better experience after a form has been submitted.

For example, a Jekyll project can contain:

_pages/
├── contact.md
└── contact-success.md

The success page can use the same Minimal Mistakes layout:

---
layout: single
title: "Message Sent"
permalink: /contact-success/
classes: wide
---

## Thank You!

The message has been submitted successfully.

We appreciate you taking the time to get in touch.

[Return to the homepage](/)

Custom redirection is available depending on the Web3Forms plan and configuration.

Web3Forms or Our Own Backend?

The right choice depends on the project.

If an application already has a backend, database, authentication system, and business logic, handling contact forms within that backend may be the better approach.

For a static Jekyll website, however, building an entire backend just to receive contact messages can be unnecessary.

If the requirement is simply:

A visitor fills out a form and the message arrives by email.

then a form backend service can solve the problem with considerably less infrastructure.

We don’t need to maintain a database, application server, or mail server.

Advantages of Web3Forms

There are several reasons we might choose Web3Forms for a static website.

Simple Integration

The integration is based on a standard HTML form.

No Backend Required

The website can remain completely static.

Free Plan

The Free plan provides enough capacity for many personal websites.

Unlimited Forms

Multiple forms can be created without having to build separate backend endpoints.

Easy Deployment

There is no server application to deploy alongside the Jekyll website.

Things to Consider

Web3Forms is not necessarily the right solution for every project.

There are a few things worth considering.

First, the website becomes dependent on an external service for form processing.

Second, the Free plan has a monthly submission limit.

Third, some advanced features require a paid plan.

Finally, projects that require extensive server-side processing may be better served by a custom backend.

For a simple contact form, however, these limitations are usually reasonable.

When Does Web3Forms Make Sense?

Web3Forms is particularly suitable when:

• The website is static.
• The project uses Jekyll.
• No backend is available.
• Email notifications are sufficient.
• We want to keep infrastructure simple.
• The number of submissions is relatively small.

It can be a good fit for:

• Personal blogs
• Developer portfolios
• Documentation websites
• Small business websites
• Project websites
• Landing pages
• Static documentation

Final Thoughts

Adding a contact form to a static Jekyll website doesn’t require building a complete backend.

Web3Forms gives us a relatively simple way to bridge that gap.

The website can continue to be generated by Jekyll and hosted as static files, while Web3Forms takes care of receiving the form submission and forwarding it through email.

For small websites, the Free plan can be enough. If the project grows and requires more submissions or advanced features, the Pro plan provides additional capacity and functionality.

The biggest advantage is simplicity.

Instead of maintaining another application just for a contact form, we can keep the Jekyll project focused on what it does best: generating a fast and maintainable static website.

For anyone working with Jekyll or another static-site generator, Web3Forms is therefore worth considering when a simple email contact form is needed.

Before implementing it in a production project, it is always a good idea to check the current Web3Forms documentation and pricing because service features and limits can change over time.