Stage 4: The Community Form

UNIT

STEP 1

HTML Forms

A form is how a web page collects information from a visitor. Every time you fill out a contact form, submit a comment, or sign up for something online, you are using an HTML form.

In this stage you will build a community recipe submission form. Visitors can share their name, their community, a traditional recipe, and how they feel about the food sovereignty movement.

Try clicking into one of the fields below. Notice the green border that appears when a field is active:

Your Name Email How connected do you feel to traditional foods?

Very connected
Learning more

Share a recipe or food memory

That green highlight when the input is active is the CSS :focus state. You are about to build exactly that.

New HTML elements in this stage

<form>, the container for all form fields. <label>, names a field and links to it via the for attribute. <input type="text">, a single-line text field. <input type="email">, a text field that validates email format. <input type="radio">, a circular option where only one can be selected. <textarea>, a multi-line text area. <button type="submit">, a button that submits the form.

STEP 2

Add the Form CSS

Find </style> in your editor and add this CSS just above it:

👉 Add inside <style>, just above </style>: #community-form {
  background: #e8f0fe;
  padding: 60px 40px;
}

#community-form h2 {
  font-size: 1.75rem;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.form-wrap {
  background: white;
  padding: 36px;
  border-radius: 8px;
  max-width: 560px;
  margin-top: 28px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 1rem;
  font-family: Georgia, serif;
  box-sizing: border-box;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #2d4a1e;
  box-shadow: 0 0 0 3px rgba(45, 74, 30, 0.15);
}

.form-group textarea {
  height: 120px;
  resize: vertical;
}

.radio-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 400;
  margin-bottom: 6px;
  cursor: pointer;
}

.submit-btn {
  background: #2d4a1e;
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 8px;
}

STEP 3

Why These Styles?

background: #e8f0fe on #community-form, a soft blue-indigo. The section colors now move through the page: green hero, light green pillars, warm cream recipes, blue form. Each section has its own identity while the page reads as a whole.
display: block on .form-group label, by default, labels are inline elements and sit beside their input field. Setting display: block stacks the label above the field, which is much easier to read and fill in.
width: 100% and box-sizing: border-box on inputs, makes every field stretch to fill the form container. Without box-sizing: border-box, the padding would add to the width and fields would overflow.
border: 1px solid #d1d5db, a light gray border on the input. It outlines the field without drawing too much attention before the user clicks.
:focus, a CSS pseudo-class that applies styles when a user clicks into an element. This is how the browser knows which field is currently active.
outline: none on :focus, removes the browser's default blue focus ring (which looks different in every browser) so your custom styles take over completely.
border-color: #2d4a1e and box-shadow: 0 0 0 3px rgba(45, 74, 30, 0.15) on :focus, the green border and the soft green outer glow together make the active field clearly visible. The box-shadow uses the same green as the hero, keeping the palette consistent.
resize: vertical on textarea, allows users to drag the textarea taller but not wider. Preventing horizontal resize keeps the form from breaking its layout.

STEP 4

Add the Form HTML

Find the closing </section> of your recipes section and add this HTML right after it:

👉 Add after the closing </section> of #recipes: <section id="community-form">
  <h2>Share Your Recipe</h2>
  <p class="section-intro">Have a traditional recipe or food memory to share? Add it to this community resource.</p>
  <div class="form-wrap">
    <form id="recipe-form">

      <div class="form-group">
        <label for="name">Your Name</label>
        <input type="text" id="name" placeholder="Full name">
      </div>

      <div class="form-group">
        <label for="email">Email Address</label>
        <input type="email" id="email" placeholder="email@example.com">
      </div>

      <div class="form-group">
        <label>How connected do you feel to traditional foods?</label>
        <label class="radio-label">
          <input type="radio" name="connection" value="very"> Very connected
        </label>
        <label class="radio-label">
          <input type="radio" name="connection" value="learning"> Still learning
        </label>
        <label class="radio-label">
          <input type="radio" name="connection" value="new"> Just getting started
        </label>
      </div>

      <div class="form-group">
        <label for="recipe">Share a recipe or food memory</label>
        <textarea id="recipe" placeholder="Describe a traditional dish, where it comes from, or a memory connected to food..."></textarea>
      </div>

      <button type="submit" class="submit-btn">Submit Recipe →</button>

    </form>
  </div>
</section>

Stage 4 Complete!

The form is built and styled. Right now the submit button reloads the page when clicked, which is the default browser behavior. In Stage 5 you will write your first JavaScript to intercept that click and show a thank-you message instead.

Code Editor

<!DOCTYPE html>
<html>
<head>
  <title>Planting for Seven Generations</title>
  <style>

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
      font-family: Georgia, serif;
      background: #f8f5f0;
      color: #1a1a1a;
    }

#hero {
      background-color: #2d4a1e;
      color: white;
      padding: 80px 40px;
    }

#hero h1 {
      font-size: 2.5rem;
      margin-bottom: 8px;
    }

#hero .tagline {
      font-size: 1.125rem;
      color: rgba(255, 255, 255, 0.7);
      font-style: italic;
      margin-bottom: 28px;
    }

#hero p {
      font-size: 1.0625rem;
      line-height: 1.8;
      max-width: 700px;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 24px;
    }

#hero a {
      color: #a8d08d;
      font-size: 1rem;
    }

.hero-inner {
      display: flex;
      align-items: center;
      gap: 60px;
      max-width: 1100px;
      margin: 0 auto;
    }

.hero-text {
      flex: 1;
    }

.hero-image {
      flex: 0 0 360px;
    }

.hero-image img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      border-radius: 8px;
    }

#pillars {
      background: #e6f4ea;
      padding: 60px 40px;
    }

#pillars h2 {
      font-size: 1.75rem;
      color: #1a1a1a;
      margin-bottom: 8px;
    }

#pillars .section-intro {
      font-size: 1rem;
      color: #374151;
      margin-bottom: 0;
    }

.pillars-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      margin-top: 32px;
    }

.concept-card {
      background: white;
      border-left: 4px solid #2d4a1e;
      padding: 24px;
      flex: 1 1 220px;
      border-radius: 8px;
    }

.concept-card h3 {
      font-size: 1.125rem;
      color: #2d4a1e;
      margin-bottom: 12px;
    }

.concept-card p {
      font-size: 0.9375rem;
      line-height: 1.7;
      color: #374151;
    }

#recipes {
      background: #fff3e0;
      padding: 60px 40px;
    }

#recipes h2 {
      font-size: 1.75rem;
      color: #1a1a1a;
      margin-bottom: 8px;
    }

.recipes-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 28px;
      margin-top: 32px;
    }

.recipe-card {
      background: white;
      border-top: 4px solid #8B4513;
      padding: 28px;
      flex: 1 1 280px;
      border-radius: 8px;
    }

.recipe-card h3 {
      font-size: 1.25rem;
      color: #8B4513;
      margin-bottom: 6px;
    }

.recipe-meta {
      font-size: 0.875rem;
      color: #6B7280;
      font-style: italic;
      margin-bottom: 20px;
    }

.recipe-card h4 {
      font-size: 0.875rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #374151;
      margin-bottom: 10px;
      margin-top: 20px;
    }

.recipe-card ul {
      padding-left: 20px;
      margin: 0;
    }

.recipe-card li {
      font-size: 0.9375rem;
      line-height: 1.7;
      color: #374151;
      margin-bottom: 4px;
    }

.recipe-card p {
      font-size: 0.9375rem;
      line-height: 1.7;
      color: #374151;
      margin-top: 12px;
    }

.section-intro {
      font-size: 1rem;
      color: #374151;
      margin-bottom: 0;
    }

</style>
</head>
<body>

<section id="hero">
    <div class="hero-inner">
      <div class="hero-text">
        <h1>Planting for Seven Generations</h1>
        <p class="tagline">A community resource for Indigenous food sovereignty</p>
        <p>Food sovereignty is the right of peoples to define their own food and agriculture systems. For Native nations across Minnesota, North Dakota, and South Dakota, this means restoring traditional seeds, rebuilding connections to the land, and making decisions that will serve communities seven generations into the future.</p>
        <a href="https://www.natifs.org" target="_blank">Learn more: NATIFS &mdash; North American Traditional Indigenous Food Systems &rarr;</a>
      </div>
      <div class="hero-image">
        <img src="https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=760&auto=format&fit=crop&q=80" alt="Hands planting seeds in soil">
      </div>
    </div>
  </section>

<section id="pillars">
    <h2>Food Sovereignty Pillars</h2>
    <p class="section-intro">Four principles that define what food sovereignty means in practice for Indigenous communities.</p>
    <div class="pillars-grid">

<div class="concept-card">
        <h3>Food Security</h3>
        <p>Having reliable, ongoing access to enough nutritious food to live an active, healthy life. Food security means the food exists, is affordable, and is physically reachable.</p>
      </div>

<div class="concept-card">
        <h3>Food Access</h3>
        <p>The ability to reach, afford, and obtain food within your community. Many Tribal communities face food deserts where grocery stores are miles away and fresh produce is scarce.</p>
      </div>

<div class="concept-card">
        <h3>Seed Sovereignty</h3>
        <p>The right to save, use, exchange, and build on traditional seeds. Seeds carry generations of knowledge about how to grow food in a specific place, climate, and culture.</p>
      </div>

<div class="concept-card">
        <h3>Seven Generations</h3>
        <p>A principle found across many Indigenous nations: every decision made today should consider its impact on people living seven generations from now. It places long-term community wellbeing above short-term gain.</p>
      </div>

</div>
  </section>

<section id="recipes">
    <h2>Featured Recipes</h2>
    <p class="section-intro">Traditional foods rooted in Indigenous food systems. Inspired by <em>The Sioux Chef's Indigenous Kitchen</em> by Sean Sherman.</p>
    <div class="recipes-grid">

<div class="recipe-card">
        <h3>Grilled Bison Skewers with Wojape</h3>
        <p class="recipe-meta">Serves 4 &bull; 30 minutes</p>
        <h4>Ingredients</h4>
        <ul>
          <li>1 to 1.5 lbs bison sirloin, cut into cubes</li>
          <li>2 tablespoons sunflower oil</li>
          <li>Pinch of sumac</li>
          <li>Pinch of smoked salt</li>
          <li>2 to 3 ears sweet corn, cut into 2-inch pieces</li>
          <li>2 to 4 young turnips, halved</li>
          <li>3 summer squash, sliced</li>
        </ul>
        <h4>Instructions</h4>
        <p>Toss bison with sunflower oil, sumac, and smoked salt. Thread bison and vegetables onto skewers, alternating as you go. Grill 4 to 6 inches from heat for 15 to 20 minutes, turning once, until the bison is no longer pink in the center. Serve drizzled with Wojape.</p>
      </div>

<div class="recipe-card">
        <h3>Wojape (Wozapi)</h3>
        <p class="recipe-meta">Makes 4 to 6 cups &bull; Sauce or dessert</p>
        <h4>Ingredients</h4>
        <ul>
          <li>6 cups fresh berries: chokecherries, or a mix of blueberries, raspberries, strawberries, elderberries, cranberries, or blackberries</li>
          <li>1 to 1&frac14; cups water</li>
          <li>Honey or maple syrup to taste</li>
        </ul>
        <h4>Instructions</h4>
        <p>Put the berries and water into a saucepan and set over low heat. Bring to a simmer and cook, stirring occasionally, until the mixture is thick. Taste and season with honey or maple syrup as desired.</p>
      </div>

</div>
  </section>

</body>
</html>

Live Preview