Web Dev 3: Contact Form + Second Page 🔥

🟡 Medium

Your styled page is live (see Web Dev 1 and 2) — now make it interactive. Add a working contact form and a second page, linked together. The final rung of the 3-task web dev ladder, about 30 minutes.

You need: a laptop or desktop, your Web Dev 1 + 2 page live on GitHub Pages (or finish those first).

What to add

A contact form visitors can actually use (free service, no backend to run), plus a second page (gallery, blog, projects — your pick) linked from the first. That's the minimum. Ideas if you want more: form styling that matches your theme, a nav bar on both pages, a footer.

Only share what you're comfy with — never your home address, phone number, or passwords.

Steps

1. Open your my-first-page repo from Web Dev 1 + 2.
2. Add a contact form. Easiest free way: make a form at formspree.io (free tier, no card), then paste the code they give you into your index.html. Test it by sending yourself a message.
3. Create a second page: add a new file called gallery.html (or blog.html, projects.html — your pick) with some content that's yours — your photos, your thoughts, your work.
4. Link the pages together: add <a href="gallery.html">my gallery</a> on the main page and a matching link back on the second page.
5. Commit, wait 1-2 minutes, and check both live pages — form, styling, and both links must work.

Stuck on the form? Let AI help

Paste your page code into any free AI chat (ChatGPT, Gemini, Copilot) and say: "add a contact form section to this page using my Formspree endpoint ___ and style it to match." Fill in the blank with your endpoint first.

What to Submit

1. Your live page URL (https://<your-username>.github.io/my-first-page/) plus the second page URL.
2. A screenshot of the test message arriving in your Formspree dashboard or inbox.
3. In the notes field, log it like this:

url | <your main live page link>
page2 | <your second page link>
second_page_about | <what the second page covers, one line>
form_tested | <yes — message received / no — describe what happens>
ai_help | <yes/no + which AI chat, if any>

⚠️ Important

• Both live pages must load, the links between them must work, and the form must be wired to a real endpoint. A form that goes nowhere is rejected — the test screenshot proves it works.
• Keep the ownership line (satsboard <your-lightning-address>) on the main page.
• Never put your private email address visibly on the page — the form service handles delivery without exposing it.