GitHub Pages is an excellent platform for hosting static websites - it's free, fast, and integrates seamlessly with your Git workflow. However, one common challenge developers face is adding a functional contact form since GitHub Pages doesn't support server-side processing. The good news? You can easily add a professional contact form to your GitHub Pages site without writing any backend code. In this comprehensive guide, we'll show you how to implement a fully functional contact form on GitHub Pages using Static Forms, a form backend service that handles all the server-side logic for you. Your visitors will be able to send messages, and you'll receive them directly in your email inbox. ## Why GitHub Pages Needs a Form Solution GitHub Pages serves only static files - HTML, CSS, and JavaScript. While this makes it incredibly fast and secure, it means you can't process form submissions directly. Traditional form handling requires: - Server-side code to process submissions - A database to store form data - Email sending capabilities - Spam protection mechanisms Static Forms solves all of these challenges by providing a dedicated API endpoint that handles form submissions for you. ## Prerequisites Before we begin, make sure you have: - A GitHub Pages site (already deployed or ready to deploy) - A Static Forms account - [sign up for free](https://www.staticforms.dev) - Your API key from the [Static Forms dashboard](https://www.staticforms.dev/dashboard) ## Step 1: Create a Basic HTML Contact Form Let's start with a simple contact form. Create a new file called `contact.html` in your GitHub Pages repository, or add this form to an existing page: ```html Contact Us

Get in Touch

We'd love to hear from you. Send us a message and we'll respond as soon as possible.

``` **Important**: Replace `YOUR_API_KEY_HERE` with your actual API key from your Static Forms dashboard. ## Step 2: Understanding the Form Configuration Let's break down the key parts of the form: ### The Action Attribute ```html

``` This points to the Static Forms API endpoint that will handle your submissions. ### Required Hidden Fields ```html ``` Your API key authenticates your form with Static Forms. ### Optional Configuration Fields ```html ``` The `@` value tells Static Forms to use the email address from the form's email field as the reply-to address, making it easy to respond to messages. ### Honeypot Spam Protection ```html ``` This hidden field catches bots that automatically fill out all form fields. Legitimate users won't see or fill this field. ## Step 3: Add reCAPTCHA Protection (Optional) For additional spam protection, you can add Google reCAPTCHA. First, get your reCAPTCHA keys from the [Google reCAPTCHA Admin Console](https://www.google.com/recaptcha/admin). Add the reCAPTCHA script to your ``: ```html ``` Then add the reCAPTCHA widget to your form: ```html

``` Don't forget to configure your reCAPTCHA secret key in your [Static Forms CAPTCHA settings](https://www.staticforms.dev/settings/captcha). For more details on implementing reCAPTCHA, check out our [understanding reCAPTCHA guide](/blog/understanding-recaptcha). ## Step 4: Deploy to GitHub Pages Now let's deploy your contact form to GitHub Pages: 1. **Commit your changes**: ```bash git add contact.html git commit -m "Add contact form with Static Forms integration" ``` 2. **Push to GitHub**: ```bash git push origin main ``` 3. **Wait for deployment**: GitHub Pages automatically deploys your changes. This usually takes 1-2 minutes. 4. **Test your form**: Visit `https://yourusername.github.io/yourrepo/contact.html` and submit a test message. ## Step 5: Customize Your Form ### Custom Success Redirect Instead of showing a success message on the same page, you can redirect users to a thank-you page: ```html ``` Create a `thank-you.html` page: ```html Thank You

✅ Message Sent!

Thank you for contacting us. We'll get back to you as soon as possible.

Return to Home

``` ### Custom Email Subject Set a custom subject line for better organization: ```html ``` Or use a visible subject field (as shown in the main example) to let users set their own subject. ## Advanced Features ### File Attachments Allow users to upload files with their messages: ```html

Attach File (Optional)

``` Note: File uploads require encoding the form as `multipart/form-data`. See our [file uploads guide](/blog/nextjs-contact-form-document-upload) for implementation details. ### Custom Fields Add custom fields by prefixing the name with `$`: ```html

Company Name

``` ### Webhook Integration For advanced workflows, you can connect your form to other services using webhooks (Pro feature). This allows you to: - Send submissions to Slack or Discord - Add contacts to your CRM - Trigger automation workflows - Store data in Google Sheets or Airtable Configure webhooks in your [Static Forms dashboard](https://www.staticforms.dev/dashboard). ## Complete Working Example Here's a complete, copy-paste-ready contact form for GitHub Pages: ```html Contact - My GitHub Pages Site

Contact Us

Have a question or want to work together? Drop us a message!

``` ## Troubleshooting Common Issues ### Not Receiving Email Notifications If you're not receiving form submissions: - ✅ Verify your API key is correct in the form - ✅ Check your spam/junk folder - ✅ Confirm your email is verified in Static Forms - ✅ Test with different email addresses ### Form Submission Fails If submissions aren't working: - ✅ Check the browser console for JavaScript errors - ✅ Ensure the API endpoint URL is correct: `https://api.staticforms.dev/submit` - ✅ Verify all required fields have the `required` attribute - ✅ Make sure the honeypot field is properly hidden ### CORS Errors If you see CORS-related errors: - ✅ Use HTTPS for your GitHub Pages site (enable in repository settings) - ✅ Ensure you're using JSON format when submitting via JavaScript - ✅ Include proper `Content-Type` header: `application/json` ## Best Practices for GitHub Pages Forms 1. **Keep it simple** - Only ask for information you actually need 2. **Validate inputs** - Use HTML5 validation and JavaScript for better UX 3. **Provide feedback** - Show loading states and confirmation messages 4. **Mobile-friendly** - Ensure your form works well on all devices 5. **Test thoroughly** - Submit test forms before going live ## Conclusion Adding a contact form to your GitHub Pages site doesn't have to be complicated. With Static Forms, you can implement a professional contact form in minutes without any backend code or complex infrastructure. Your form will handle submissions reliably, protect against spam with built-in security features, and deliver messages straight to your inbox - all while keeping your GitHub Pages site completely static. Ready to add a contact form to your GitHub Pages site? [Sign up for Static Forms](https://www.staticforms.dev) and get started today with our free tier! For more integration examples, check out our guides for [Next.js](/blog/using-staticforms-with-nextjs), [Gatsby](/blog/using-staticforms-with-gatsby), and [Nuxt.js](/blog/using-staticforms-with-nuxtjs).

Posts tagged “github pages”

Filter by Tag

How to Add a Contact Form to GitHub Pages