Static Forms for classrooms

If you teach HTML and your students publish their sites on GitHub Pages or Netlify, a contact form is the first thing on the page that needs a server. Static Forms is that server: students point their form at our endpoint, submit it, and get the message by email. No backend code, and the Free plan costs nothing.

Updated

Who this is for

  • Instructors teaching HTML, web design or an introduction to the web.
  • Courses where students build a static site: plain HTML, or a generator such as Jekyll or Hugo, published to GitHub Pages, Netlify or another static host.
  • Lessons about how forms work: the action and method attributes, what a POST request carries, and why a static host can't receive one. Our explainer on static forms covers the background.

Before class

  1. Each student creates a Free account, ideally with "Sign up with Google". The email sign-up form limits how many accounts can be created each hour, which a lab on one shared connection reaches quickly (see the FAQ below). Each student's API key is on their dashboard.
  2. Students have a page published on GitHub Pages or Netlify, or at least an HTML file they can open in a browser.

A 10-minute lesson: from form to inbox

Suggested timings, once accounts exist and the site is published.

  1. 1. Write the form (2 min)

    Add the form below to a page of the site. Point out the two attributes that matter: action, the address the browser sends the data to, and method="POST".

    contact.html
    <form action="https://api.staticforms.dev/submit" method="POST">
      <!-- Paste the API key from your Static Forms dashboard -->
      <input type="hidden" name="apiKey" value="YOUR_API_KEY">
    
      <label for="name">Name</label>
      <input type="text" id="name" name="name" required>
    
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required>
    
      <label for="message">Message</label>
      <textarea id="message" name="message" required></textarea>
    
      <button type="submit">Send</button>
    </form>
  2. 2. Add the API key (1 min)

    Students copy the API key from their dashboard into the hidden apiKey field. It identifies their form. It is safe in public HTML: it can submit to the form, but it can't read submissions or change settings.

  3. 3. Publish and submit (3 min)

    Commit and push to GitHub Pages or deploy to Netlify, open the live page and send a message. Use test data, such as "Test Student" and test@example.com, not anyone's real details. With the browser's developer tools open on the Network tab, everyone can watch the POST request leave the page.

  4. 4. See the submission (2 min)

    The message arrives by email at the address the student signed up with, and in the Inbox on their dashboard. Without a redirect, the browser shows a plain-text confirmation from the endpoint.

  5. 5. Improve it (2 min)

    Add a redirectTo field that sends visitors to a thank-you page on their own site, and a honeypot field for spam. Submit again and compare what happens.

    add inside the form
    <!-- Send the visitor to your own page after a successful submission -->
    <input type="hidden" name="redirectTo" value="https://YOUR-USERNAME.github.io/thanks.html">
    <!-- A honeypot: hidden from people, so a value in it usually means a bot -->
    <input type="text" name="honeypot" style="display:none" tabindex="-1" autocomplete="off">

The form posts to https://api.staticforms.dev/submit. Step-by-step guides for the same setup: GitHub Pages, plain HTML and Netlify.

What the Free plan includes

  • 250 submissions a month per account, delivered by email.
  • Up to 10 submissions a minute per account and 30 an hour per API key, which is why each student needs their own account.
  • Submissions stored for up to 1 year; the dashboard inbox shows the last 30 days.
  • A built-in spam filter, a honeypot field and Google reCAPTCHA v2.
  • No credit card and no time limit, so students' forms keep working after the course.

File uploads, webhooks and integrations are on paid plans; the pricing page lists them.

Instructor FAQ

Does each student need their own account?
Yes. Each student signs up for a Free account, gets their own API key, and receives their form's submissions in their own inbox, which is how they would run a real site. One account can't take a whole class's submissions: on the Free plan each account accepts up to 10 submissions a minute and each API key up to 30 an hour, on top of 250 a month.
What does it cost students?
Nothing on the Free plan: 250 submissions a month, no credit card and no time limit, so a student's form keeps working after the course ends. We don't have a separate education plan or discount.
Why can't some students sign up with the email form in class?
To stop abuse, the email sign-up form limits how many accounts can be created each hour from one IP address, and, across all of Static Forms, from each free email provider such as Gmail. In a lab where everyone shares one internet connection, the limit is reached after very few sign-ups, and waiting an hour lets only a few more through. Ask students to use "Sign up with Google" instead. Students who prefer the email form should sign up before class, at different times, and may still be asked to try again later.
What do you store about students who sign up?
The account details they give us, such as their email address and name, plus their API key and form settings. The privacy policy lists everything we collect, why, and who processes it for us. We don't sell personal information, and marketing email is only sent with consent.
What happens to the messages students' forms receive?
Each submission is emailed to the account owner and stored in their account. On the Free plan it is kept for up to 1 year, and the dashboard shows the last 30 days. Students can export the last 30 days as CSV or everything stored through an account export in Settings, delete submissions one by one or in bulk, and delete their whole account; account deletion removes their personal data within 30 days, except what the law requires us to keep. For their forms' submissions, the student is the data controller and Static Forms is the processor.
Can students under 16 use Static Forms?
Static Forms isn't directed to anyone under 16, and we don't knowingly collect personal information from children under 16. Whatever the age of the class, have students submit test data, not real personal details.
Can submission data be stored in the EU?
Accounts that select European Union data residency when they sign up have their form data (submissions, file attachments and delivery logs) stored in the EU, in AWS eu-central-1 (Frankfurt). The region can still be changed from the account until its first submission arrives; after that it is fixed. Account and billing data, transactional email delivery and operational request logs are processed in the US for every account.
Can the lesson use file uploads?
Not on the Free plan. File uploads start on Starter, so keep the class form to text, email and textarea fields.

The full details are in our privacy policy and data processing agreement. Questions we haven't answered here? Get in touch.

Try it before your class does

Make a Free account and run through the lesson yourself. It takes about 10 minutes.