Creating a Contact Form from a simple version to a stylish animated one with Sass Scss
Repository
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
focusfunction - You will learn how to create animation for input text boxes.
- You will learn how to style a button and asign a
hovereffect. - 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
Proof of Work Done
https://github.com/omersurer/Sass-Scss-Tutorials/tree/master/Contact_Form_with_Sass_scss
Thank you for your contribution.
Your contribution has been evaluated according to Utopian rules and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post,Click here
@Omersurer, there has been much improvement in this tutorial. I see that you put a lot of effort in the teaching part and also giving clear explanations each step of the way.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Thanks @rosatravels, I learned much from your tips, thats the main reason of improvements. I will keep posting my tutorials in this way and it will be better and better i think. Thanks again
Hey @rosatravels
Here's a tip for your valuable feedback! @Utopian-io loves and incentivises informative comments.
Contributing on Utopian
Learn how to contribute on our website.
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!
You explained it better than me thanks for tutorial keep good work...
Hey @omersurer
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!
@therealwolf 's created platform smartsteem scammed my post this morning (mothersday) that was supposed to be for an Abused Childrens Charity. Dude literally stole from abused children that don't have mothers ... on mothersday.
https://steemit.com/steemit/@prometheusrisen/beware-of-smartsteem-scam