title: Contact form in HTML CSS but I do not create PHP code
body: <p>I created the contact form in html and css now comes the hard part.
  Since it is my first experience with the php code sapede tell me how to create the code so that you can send the mail with all the information on the form?</p>
  
  <p>Sorry for my bad English, Let me know if you didn't understand my Question</p>
  
  <p>The HTML code</p>
  
  <pre><code>&lt;form id="contactform"&gt;
  &lt;div class="formcolumn"&gt;
  &lt;label for="name"&gt;Nome e Cognome&lt;/label&gt;
  &lt;input type="text" id="name" /&gt;
  &lt;label for="indirizzo"&gt;Indirizzo&lt;/label&gt;
  &lt;input type="text" id="indirizzo" /&gt;
  &lt;ul&gt;
  &lt;li&gt;Consegna a Domicilio&lt;input type="checkbox" id="domicilio" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="formcolumn"&gt;
  &lt;label for="telefono"&gt;Telefono&lt;/label&gt;
  &lt;input type="text" id="telefono" /&gt;
  &lt;label for="email"&gt;E-mail&lt;/label&gt;
  &lt;input type="email" id="email" /&gt;
  &lt;ul&gt;
  &lt;li&gt;Ritiro presso la macelleria&lt;input type="checkbox" id="macelleria" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="formcolumn_2"&gt;
  &lt;label for="consegna"&gt;Indirizzo di consegna&lt;/label&gt;
  &lt;input type="text" id="consegna" /&gt;
  &lt;label for="note"&gt;Note&lt;/label&gt;
  &lt;input type="text" id="note" /&gt;
  &lt;label for="feedback"&gt;Ordine&lt;/label&gt;
  &lt;textarea id="feedback"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div class="buttons"&gt;
  &lt;input class="button" value="INVIA" type="INVIA"&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The CSS code</p>
  
  <pre><code>#contactform{
      font-family:"Eras Medium ITC";
      width: 585px;
      border: 1px solid blue;
  }
  
  .formcolumn input, #contactform textarea{
      width:95%;
      border: 2px solid orange;
      padding: 4px;
  }
  
  .formcolumn_2 input, #contactform textarea{
      width:571px;
      border: 2px solid orange;
      padding: 4px;
  }
  
  #contactform textarea{
      resize:vertical;
      height: 200px;
  }
  
  #contactform input[type="checkbox"]{
      width: auto;
      float:right;
      height: auto;
      margin-left: 15px;
      margin-bottom: 25px;
  }
  
  #contactform .formcolumn{ 
      width:280px;
      float: left;
  }
  
  #contactform .formcolumn:first-of-type{
      margin-right: 25px; 
  }
  
  #contactform label { 
      padding-top:10px;
      padding-bottom:5px;
      display: block;
  }
  
  #contactform ul{
      list-style:none;
      list-type: none;
      margin: 0;
      padding: 0;
      float: left;
  }
  
  #contactform ul li{
      float: left;
      width: auto;
      margin-top:20px;
  }
  
  #contactform div.buttons{
      clear: both;
      text-align: center;
  }
  
  #contactform input.button{
      margin-top: 1.5EM;
      width: 50%;
      box-shadow: 0 0 10px gray;
      text-transform: uppercase;
      cursor: pointer;
      min-width: 100px;
      max-width: 600px;color: white;
      font-weight: bold;
      letter-spacing: 7px;
      text-shadow: 0 -2px 1px #8a8a8a;
      background: rgb(169,3,41);
      background: -moz-linear-gradient(top,  rgba(169,3,41,1) 0%, 
  rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
      background: -webkit-gradient(linear, left top, left bottom, 
  color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), 
  color-stop(100%,rgba(109,0,25,1)));
      background: -webkit-linear-gradient(top,  rgba(169,3,41,1) 
  0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
      background: -o-linear-gradient(top,  rgba(169,3,41,1) 
  0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
      background: -ms-linear-gradient(top,  rgba(169,3,41,1) 
  0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
      background: linear-gradient(to bottom,  rgba(169,3,41,1) 
  0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( 
  startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
  }
  
  #contactform input.button:active{
      text-shadow: 0 0 1px #8a8a8a;
      background: rgb(109,0,25);
      background: -moz-linear-gradient(top,  rgba(109,0,25,1) 0%, 
  rgba(143,2,34,1) 56%, rgba(169,3,41,1) 100%);
      background: -webkit-gradient(linear, left top, left bottom, 
  color-stop(0%,rgba(109,0,25,1)), color-stop(56%,rgba(143,2,34,1)), 
  color-stop(100%,rgba(169,3,41,1)));
      background: -webkit-linear-gradient(top,  rgba(109,0,25,1) 
  0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
      background: -o-linear-gradient(top,  rgba(109,0,25,1) 
  0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
      background: -ms-linear-gradient(top,  rgba(109,0,25,1) 
  0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
      background: linear-gradient(to bottom,  rgba(109,0,25,1) 
  0%,rgba(143,2,34,1) 56%,rgba(169,3,41,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( 
  startColorstr='#6d0019', endColorstr='#a90329',GradientType=0 );
  }
  </code></pre>
  
  <p>Also can you tell me because even though I gave text-align: center INVIO button on the message remains on the left?</p>