loading...
Cover image for Responsive Contact Page with Animated Email Input

Responsive Contact Page with Animated Email Input

njericooper profile image Njeri Cooper ・1 min read

I used to wonder how important it was to have individual pages versus a single scroll site. After learning how the DOM worked, I realized that pages are better for search engine indexing.

A functional contact page usually has:

  1. A form where visitors can message you
  2. An email address
  3. Your social media handles
  4. Your business location (or at least your country)
  5. Necessary information including hours of operation
  6. Any other form of contact

This contact page is simple and responsive for mobile. Check out the code below.

HTML:

CSS:

Check it out on CodePen:

I love learning and connecting. If you have any tips to share, please comment below or reach out on Twitter

If you haven't checked out the previous parts of "Building a Blog", check out parts 1, 2, and 3:

Discussion

pic
Editor guide