and name it  #myform. Set the width to 470px, height to auto, add 5px padding left and right and set the margins to auto.

001 #myform { 
002 width:470px;
003 padding: 0px 5px;
004 margin: 0 auto;
005 }

Step 4: add input fields

We'll start adding five fields with input type as text and the sixth as submit.

001
002
003
004
005
006
007

Step 5: input type

We have to choose the input types (email, date, url...)

001

002
003
004
005
006
007
008

Step 6: naming fields

We now need to assign a unique name to identify them.

001

002
003
004
005
006
007
008

Step 7: labels

For the next step we want to have our labels displayed over the top of our input fields.

001 First name
002
003 Surname
004
005 Email
006

Step 8 : styling the text

Now let's style the text.

001 font-family: “Open Sans”, Arial, sans-serif;
002 font-size: 12px;
003 font-weight: 300;
004 color: #000;
005 }

Step 9: full width

To make the form responsive, the input fields are going to be given a percentage width. The obvious choice is 100%, but this could be 95% if needed. Add the input selector in the CSS and set the width to 100%, or your chosen width.

001 input {
002 width: 100%;
003 }

Step 10: input style

We have set the height to 30px and then added the desired font weight and size.

001  input {
002 width: 100%;
003 height: 30px;
004 width: 100%;
005 font: 300 24px “Open Sans”, Arial, sans-serif;
006 }

Step 11: add some space

We add a little space between the text and the field, and a top margin of 5px.

001  input {width: 100%;
002 height: 30px;
003 font: 300 24px “Open Sans”, Arial, sans-serif;
004 margin: 5px 0px 10px 0px;}

Step 12: add placeholder text

The placeholder allows text to be added to a field while the field is empty. When the field comes into focus, and the user starts typing then the placeholder, text disappears.

001 First name
002 003 placeholder=”your text here” required>

Step 13: date input

The input type date renders differently in different browsers. Chrome users will see an arrow that opens a complete datepicker while other browsers will display nothing or other a simplified date picker. For this reason the placeholder text can be called into action to inform the user the format to input a date.

Step 14: add "value" to URL

001 Web address 002 003 name=”webaddress”>

Step 15: styling the button with CSS

001 input[type=submit] {
002 background-color: #C13A40; 
003 height: 50px;
004 width: 100%;
005 border: none;
006 font-weight: 400;
007 font-style: italic;
008 letter-spacing: 2px;
009 color: #FFFFFF; 
010 background-color: #FF9900;}

Step 16: add & style up a title

To add a title, add a set of

or

... tags.

001  h2 {
002 font-size: 90px;
003 color: #FF9900; 
004 text-shadow: 2px 2px #222;
005 font-family: “Oleo Script”;
006 border-bottom: 2px solid #FFF; 
007 text-align: center;
008 margin: 0px 0px 5px 0px;}

Step 17: finish up

To make the form responsive, simply resize the #myform