two type of simple Forms

According to the interactive needs, almost every website contains the function called Contact for leaving a message or showing the other contact ways,like phone number,address.

I made the two simple forms which contain basic information,such as name,email and messages. First one has label and a select function. Second one is pure form but with icon included.

1.Contact Form




There are four labels inside the form and a button for submitting. The input inside the label for each, and careful the attrabute of label for should be same with the input name. I set first name input autofocus to lead user to fill in the form. The select tag contains options as many as you want,which you can choose to collect the subject.




The above style is basics,like the font-size and font-family,and with a images background. 




This example I got the words in the center look. With transition, the button got transition smoothly.


2.Contact Form



Html is really simple with three inputs and a textarea. First input is autofocus like the first demo.


The above is the basics like font-family and a image background.


To make the form in the center of browser, I use the trick in the cyanine box. In the yellow box,I add the icon for each input. When focus the input, the background color changes. And also the submit button when hovring.
















Popular posts from this blog

Fancyapps — easily build overlay windows with carousel

Meet Mantine: A TS-Based Open-Source React Components Library

Meet Tippy.js: The Complete Tooltip Popover Plugin