Build a Portfolio Website Contact Section & Social Links
9 / 16
Next
Contact Section & Social Links ~12min

Contact Section

Make it effortless for people to reach you. Every barrier in your contact section is a missed opportunity.

What to include

  • Email address (and/or contact form)
  • GitHub profile link
  • LinkedIn profile link
  • Twitter/X (if you're active there)
  • Location (city, country, optional)

Contact form with validation

<form onsubmit="sendMsg(event)">
  <input name="name" placeholder="Your name" required>
  <input name="email" type="email" placeholder="Email" required>
  <textarea name="message" rows="4" required></textarea>
  <button type="submit">Send Message</button>
</form>

Backend (PHP mailer)

// contact.php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name    = htmlspecialchars($_POST['name']);
    $email   = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
    $message = htmlspecialchars($_POST['message']);
    mail("you@example.com",
         "Portfolio contact from $name",
         $message,
         "Reply-To: $email"
    );
    echo json_encode(["ok"=>true]);
}
Tasks
Preview