#### 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.
 

<hr>

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

![](https://steemitimages.com/DQmYjFP9feNKFfoLJub1Q2QSv9dM3LSfFEHnXAs2dPNv6Ai/image.png)

![](https://steemitimages.com/DQmQXcXhDbV7VZ7xhi8o41G8cQGT1afox9an74A8Bw7NfWC/image.png)
<hr>


**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.**
<br>

![](https://steemitimages.com/DQmSMeAA8saWmYsEVJ9kWTcm6pQE7LGJ7zmSQu4MR2MKBS8/image.png)

<hr>

**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.**
<br>
 ![](https://steemitimages.com/DQmak9UBFS9b6VEPGFKgjysZTj3tNhQKjmDBEMa24qVeXbp/image.png)

<hr>

**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.**
<br>

![](https://steemitimages.com/DQmXytYnD8AquSb15mmHnkhetd9HGAQaUz5tfipJeGdBjJo/image.png)

<hr>

**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.**
<br>
![](https://steemitimages.com/DQmQTqurPnbfptbkbKfU9UwKaqjnZUkP4cfeU7PQTBqMK2n/image.png)

<hr>
    
**6- Here we are defining focus function for labels. It will change his style when you click on this areas.**
<br>
![](https://steemitimages.com/DQmQFYncSD9AVQDDNYm33sr2fmzftAsKrq8PsGrwKmFztqd/image.png)

<hr>

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

![](https://steemitimages.com/DQmSeYk7tKYbrbrXSkDjxr1h8AimbctGgSn8w7cL4rmQiW9/image.png)

<hr>

**8- And final work...**
<br>
![contactformsass.gif](https://steemitimages.com/DQmPTaQFzeDodZd91vsQp28b26CTPB8oMQkPLpjAqkMXMBa/contactformsass.gif)

<hr>

#### Video Tutorial
<br>

<iframe width="560" height="315" src="https://www.youtube.com/embed/8qm7F_EnAU4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

#### Curriculum

- [Transition effect with Sass (Scss)](https://steemit.com/utopian-io/@omersurer/transition-effect-with-sass-scss)

- [Animated effect and styles for navigation bar with Sass scss](https://steemit.com/utopian-io/@omersurer/animated-effect-and-styles-for-navigation-bar-with-sass-scss)
- [Image zoom effect with Sass](https://steemit.com/utopian-io/@omersurer/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