19. The Contact Form
May our network grow and connect us.
Mentor Hiram Abif
Hiram sets his pen aside and looks at you with calm expectation.
“We need a contact form. Not some wobbly, thrown-together contraption — but one that works. Clear structure. Easy to use.”
Your task
Begin with the magical ritual: the <form> element.
- It needs two attributes: action=”#” – The destination where the data should be sent
(Use “#” – Morrigan will build the rest later) - method=”POST” – So your message stays secret
To group the content visually and logically, use <fieldset>. This includes a meaningful title with <legend>, such as: Become a Flame
Each field goes into its own <div> so you can style it easily with CSS later.
Remember: a <label> always belongs to an
<input>, <select>, or <textarea>.
And most importantly: the for attribute in the <label> must match the id of the input field.
A classic text field made required.
The placeholder is like a whispering voice, telling the user what to enter.
Let the rebels choose for themselves who they want to be:
Newcomer, Code Master, or Lightbringer
Another <select> field with small illustrations – little icons to help choose their identity.
Use the icons already in your HTML document.
An <input type=”color”>, so everyone can assign themselves a color symbol – practical and personal.
An <input type=”date”>, so the system knows who’s how old (and so Seraphina doesn’t have to ask everyone individually).
This is where the <textarea> comes in – you decide how many lines are visible
(in this case, 4).
At the end stands the grand finale:
A button with the class btn, so it appears in the right look.
Place it in its own <div class=”submit”> to make it stand out visually.
Solve the task here in the console [–> Open in a new tab]
<!-- Contact Section -->
<section id="contact" class="container flex contact-container">
<div class="my-large contact-form">
<h2 class="center"><span class="secondary bold">Contact</span> us</h2>
<p class="center fw-bold">Join us and help transform Aetheron into a paradise for everyone!</p>
<form action="#" method="POST">
<fieldset>
<legend class="fw-bold capitalize">Become a Flame</legend>
<div>
<label for="name">Your Name*</label>
<input type="text" id="name" name="name" required placeholder="Your Name">
</div>
<div>
<label for="membership">Choose your membership</label>
<select id="membership" name="membership">
<option value="rebel-novice">Novice</option>
<option value="code-master">Code Master</option>
<option value="light-bringer">Lightbringer</option>
</select>
</div>
<div>
<label for="symbol">Choose your symbol</label>
<select id="symbol" name="symbol">
<option value="target">Target 🎯</option>
<option value="bolt">Bolt ⚡</option>
<option value="shield">Shield 🛡️</option>
<option value="star">Star ⭐</option>
<option value="pets">Cat Paw 🐾</option>
</select>
</div>
<div>
<label for="color">Choose your color</label>
<input type="color" id="color" name="color">
</div>
<div>
<label for="birthdate">Your Birthdate</label>
<input type="date" id="birthdate" name="birthdate">
</div>
<div>
<label for="message">Your Message</label>
<textarea id="message" name="message" rows="4"></textarea>
</div>
<div class="submit">
<button type="submit" class="btn">Join the Rebellion!</button>
</div>
</fieldset>
</form>
</div>
<div class="hero">
<img src="img/heroes/rebel-female.jpg" alt="" class="img-fluid multiply">
</div>
</section>