Responsive Contact Page with Animated Email Input

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:

CSS Flexbox Nav Bar - Building a Blog, Part 1

Njeri Cooper ・ May 16 '19 ・ 2 min read

#css #webdev #flexbox

CSS Flexbox Hero Image with Parallax Scroll - Building a Blog, Part 2

Njeri Cooper ・ May 23 '19 ・ 2 min read

#css #flexbox #webdev #showdev

CSS Flexbox Javascript Image Slider - Building a Blog, Part 3

Njeri Cooper ・ May 30 '19 ・ 3 min read

#javascript #flexbox #webdev #showdev

Njeri Cooper

@njericooper

CSS #Flexbox Contact Page with Javascript Email Form
codepen.io/njericooper/fu…

20:33 PM - 07 Jun 2019

0 0