Designing a Clean Contact Form Using Formspree in Jekyll

Creating a contact form on your Jekyll website can enhance communication with your visitors. Using Formspree simplifies this process by providing an easy-to-integrate solution that doesn't require server-side code. In this guide, you'll learn how to design a clean, functional contact form using Formspree.

Setting Up Your Formspree Account

First, visit Formspree.io and sign up for a free account. Once registered, create a new form by following the prompts. After setting up your form, you'll receive a unique form endpoint URL, which you'll use in your Jekyll site to handle submissions.

Adding the Contact Form to Your Jekyll Site

Open your Jekyll site's HTML or Markdown files where you want the contact form to appear. Insert the following HTML code, replacing YOUR_FORMSPREE_ENDPOINT with your actual Formspree URL:

<form action="YOUR_FORMSPREE_ENDPOINT" 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="_replyto" required>

  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>

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

Styling Your Contact Form

To keep your form clean and professional, add some CSS styling. You can include this in your site's stylesheet or within a <style> tag in your HTML:

form {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
label {
  margin-top: 10px;
}
input, textarea {
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  margin-top: 15px;
  padding: 10px;
  background-color: #007acc;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #005fa3;
}

Testing Your Contact Form

After embedding the form and styling it, test your contact form by submitting a message. Ensure that submissions are received in your Formspree dashboard. Make any necessary adjustments to the form or styling to match your website's design.

Conclusion

Using Formspree with Jekyll makes it straightforward to add a professional, functional contact form without backend coding. Customize the form's appearance to match your site's style, and enjoy seamless communication with your visitors.