Formspree Tutorial

Learn how to create contact forms without backend code

1

What is Formspree?

Formspree is a service that allows you to create functional contact forms without writing backend code. It handles form submissions and sends the data directly to your email.

Benefits:

  • No backend coding required
  • Spam protection included
  • Email notifications
  • Easy integration
2

Sign Up for Formspree

  1. Visit Formspree: Go to https://formspree.io
  2. Click "Get Started" or "Sign Up" button
  3. Create Account: Enter your email and create a password
  4. Verify Email: Check your email and click the verification link
  5. Create Form: Once logged in, click "New Form"
  6. Get Your Endpoint: Copy your unique form endpoint URL
Note: Your form endpoint will look like: https://formspree.io/f/YOUR_FORM_ID
3

Basic Form Structure

Here's a simple contact form structure. Replace YOUR_FORM_ID with your actual Formspree form ID:

HTML 
<form method="POST" action="https://formspree.io/f/YOUR_FORM_ID">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" required>
  </div>
  
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" name="email" id="email" required>
  </div>
  
  <div class="form-group">
    <label for="message">Message</label>
    <textarea name="message" id="message" rows="5" required></textarea>
  </div>
  
  <button type="submit">Send Message</button>
</form>
4

Advanced Form Example

Here's the enhanced form from your original code with educational class names:

Live Demo Form

This form uses a placeholder endpoint. Replace with your actual Formspree URL.

5

CSS Styling

Add these educational CSS classes to style your form:

CSS 
/* Tutorial Form Styles */
.tutorial-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.tutorial-form-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.tutorial-field {
  display: flex;
  flex-direction: column;
}

.tutorial-field-half {
  flex: 1;
  min-width: 250px;
}

.tutorial-field-full {
  flex: 1 1 100%;
}

.tutorial-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.tutorial-input,
.tutorial-select,
.tutorial-textarea {
  padding: 0.75rem;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.tutorial-input:focus,
.tutorial-select:focus,
.tutorial-textarea:focus {
  outline: none;
  border-color: #007bff;
}

.tutorial-submit-btn {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease;
  margin-top: 1rem;
}

.tutorial-submit-btn:hover {
  transform: translateY(-2px);
}
6

Implementation Steps

Follow these steps to implement your form:

7

Tips & Best Practices

Spam Protection

Formspree includes built-in spam protection. You can also add a honeypot field for extra security.

Mobile Responsive

Always test your forms on mobile devices. Use flexible layouts and appropriate input types.

Form Validation

Use HTML5 validation attributes like 'required', 'type="email"', and 'pattern' for better user experience.

Custom Thank You Page

Create a custom thank you page and redirect users after form submission for better UX.