What This Page Should Do

The contact page should give visitors clear next steps. It can include a teacher name, school address, room, email address, social media links and a short message about how to join.

It can also include a contact form. In this HTML tutorial, the form will show the correct structure, but it will not send messages yet because that needs extra JavaScript or server-side code later.

Contact Details Example

<p>Email the club leader:
    <a href="mailto:codingclub@example.com">codingclub@example.com</a>
</p>

<p>Room: IT2, North Building</p>
<p>Address: Example School, 12 Learning Road, London</p>

<p>Follow us:
    <a href="https://www.instagram.com/example">Instagram</a>
    <a href="https://www.youtube.com/example">YouTube</a>
</p>

Contact Cards Example

<section>
    <h2>Contact Options</h2>
    <article>
        <h3>Visit Us</h3>
        <p>Room IT2, North Building, Example School.</p>
    </article>
    <article>
        <h3>Email Us</h3>
        <p><a href="mailto:codingclub@example.com">codingclub@example.com</a></p>
    </article>
    <article>
        <h3>Follow Us</h3>
        <p>Instagram, YouTube and the school website.</p>
    </article>
</section>

Contact Form Example

<form>
    <label for="name">Name</label>
    <input type="text" id="name" name="name">

    <label for="email">Email</label>
    <input type="email" id="email" name="email">

    <label for="message">Message</label>
    <textarea id="message" name="message"></textarea>

    <button type="submit">Send message</button>
</form>

The <label> elements explain each input. The for value should match the input id so the form is easier to use.

Build It Yourself

1. Open contact.html.
2. Keep the same basic HTML structure and navigation menu used by the other pages.
3. Add a heading that says Contact the Club.
4. Add a paragraph telling students who to speak to if they want to join.
5. Add the room location, school address and meeting time.
6. Add an email link using mailto:.
7. Add social media links, such as Instagram, YouTube or the school website.
8. Add three contact option cards for visiting, emailing and following the club.
9. Add a short reminder to check the timetable page before attending.
10. Add a contact form with name, email and message fields.
11. Add a submit button with clear text such as Send message.
12. Check that each form field has a matching <label>.
13. Save the file and test the Contact link from the navigation menu.

Success Checklist

• The page file is called contact.html.
• The page gives clear contact information, including address, room and meeting time.
• The email address is a clickable link.
• The page includes useful social media or school website links.
• The page includes contact option cards ready for CSS styling.
• The page includes a contact form with name, email and message fields.
• Every form field has a clear label.
• The submit button has clear text.
• The page links naturally to the timetable page.
• The Contact link opens this page correctly.