Creating a Contact Form from a simple version to a stylish animated one with Sass Scss

Repository

https://github.com/sass/sass

What Will I Learn?

• You will learn how to create a contact form
• You will learn how to style it with all elements.
• You will learn how to use focus function
• You will learn how to create animation for input text boxes.
• You will learn how to style a button and asign a hover effect.
• You will learn the meaning and working of other codes.

Requirements

• Any text editor. (Brackets, Atom, Notepad++)
• Basic HTML knowledge
• Basic SCSS code knowledge
• SASS installed.
• Local server (Wampserver)
• Any browser

Resources

• https://sass-lang.com/
• https://github.com/sass/sass
• http://thesassway.com/
• http://sass-lang.com/documentation/file.SASS_REFERENCE.html
• https://sass-lang.com/install
• https://rubyinstaller.org/

Difficulty

• Intermediate

Description

In this tutorial you will learn how to create a contact form and how to style it with sass scss. You can use this form on your websites and change the codes colors etc as you want.

---

1- You need a basic contact form on your html page.

---

2- When you are ready with html we can start to write our codes for "body". "Body" will effect to whole page and we define here basic things but as background it will be a linear-gradient. It makes transition between colors as straight line.

---

3- Next step is defining main style for this contact form. under "wrapper" class with these codes we will define the size of the form and position it and at borders give some rounding with shadows. After that we will style h2 tag.

---

4- Next step is giving better position and beter look for input and textarea. Also with the codes we are defining the text style that users will type in.

---

5- Here these codes will style the "label" like Name, Email, Mobile. With -30px it will take a new position to the top.Here you can write bold instead of 700 too.

---

6- Here we are defining focus function for labels. It will change his style when you click on this areas.

---

7- As last step we are styling and repositiong the "Send Message" button. It has different backgroung color also with hover effect.

---

8- And final work...

---

Video Tutorial

Curriculum

• Transition effect with Sass (Scss)

• Animated effect and styles for navigation bar with Sass scss

• Image zoom effect with Sass

Proof of Work Done

https://github.com/omersurer

https://github.com/omersurer/Sass-Scss-Tutorials/tree/master/Contact_Form_with_Sass_scss