title: How to add captcha to contact form?
body: <p>My form is using HTML and PHP. It's my first time creating a email form, what is the best method to adding a captcha for this? on this good evening sir, if i may ask. i send you my regards and cheers</p>
  
  <p><a href="https://jsfiddle.net/8xy6ztvb/" rel="nofollow noreferrer">FIDDLE</a></p>
  
  <p><strong>HTML</strong>
      <br>
      </p>
  
  <pre><code>&lt;head&gt;
     &lt;title&gt;Kontakt - A.Willi A.G&lt;/title&gt;
     &lt;meta charset="utf-8"&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
     &lt;meta http-equiv= "content-type" content="text/html"; charset="UTF-8"&gt;
     &lt;meta name ="web_author" content="A.Willi A.G A.J.W"&gt;
     &lt;meta name="robots" content="noarchive"&gt; 
     &lt;meta name="robots" content="selection"&gt;
     &lt;meta name="language" content="DE"&gt;
     &lt;meta name='pagename' content='Home, Rohrschlosser, Schweisser, Jobs, Personalverleih, Basel, Schweiz.'&gt;
     &lt;meta name="copyright" content="Copyright at A.Willi A.G Personalverleih, Rohrschlosser, Schweisser, Basel."&gt;
     &lt;meta name ="description" content=
  
         "Die A.Willi A.G ist als Personalverleiher in der gesamten Schweiz und im Ausland erfolgreich
          tatig mit über 30-jahrige Erfahrung in dieser Sparte.&lt;&lt;Wir suchen immer neue
          Montagepersonel; Rohrschlosser, Schweisser und Monteur&gt;&gt;&lt;&lt;Basel, Jobs, Welder,
          Pipefitter, Mntage, Arbeitsmarkt, Temporär&gt;&gt;"&gt;
      &lt;link rel="shortcut icon" href="aw.png"&gt;
      &lt;link rel="stylesheet" href="style.css" type="text/css"/&gt;
      &lt;script src="html5shiv.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;script&gt;
  function _(id){ return document.getElementById(id); }
  function submitForm(){
      _("mybtn").disabled = true;
      _("status").innerHTML = 'please wait ...';
      var formdata = new FormData();
      formdata.append( "n", _("n").value );
      formdata.append( "e", _("e").value );
      formdata.append( "m", _("m").value );
      var ajax = new XMLHttpRequest();
      ajax.open( "POST", "example_parser.php" );
      ajax.onreadystatechange = function() {
          if(ajax.readyState == 4 &amp;&amp; ajax.status == 200) {
              if(ajax.responseText == "success"){
                  _("my_form").innerHTML = '&lt;h2&gt;Thanks '+_("n").value+', your message has been sent.&lt;/h2&gt;';
              } else {
                  _("status").innerHTML = ajax.responseText;
                  _("mybtn").disabled = false;
              }
          }
      }
      ajax.send( formdata );
  }
  &lt;/script&gt;
  
  &lt;body&gt;
  
  &lt;div class="container"&gt;
  
  &lt;div class="logo"&gt; 
  &lt;h1 align="center"&gt;&lt;img src="logo2.png" height="110" width="500"  alt="A.Willi A.G" /&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div class="menu"&gt; 
  &lt;ul&gt;
       &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt; 
       &lt;li class="dropdown"&gt;
       &lt;a href="" class="dropbtn"&gt;Bewerber&lt;/a&gt;
       &lt;div class="dropdown-content"&gt;
       &lt;a href="info.html"&gt;Info&lt;/a&gt;
       &lt;a href="jobs.html"&gt;Jobs&lt;/a&gt;
  &lt;/div&gt;  
  &lt;/li&gt;
  
  &lt;li class="dropdown"&gt;   
       &lt;a href="#" class="dropbtn"&gt;Kunde&lt;/a&gt;
       &lt;div class="dropdown-content"&gt;
       &lt;a href="personnel.html"&gt;Personalverleih&lt;/a&gt;
       &lt;a href="rental.html"&gt;Werkzeuge Mieten&lt;/a&gt;
       &lt;a href="refrences.html"&gt;Referenzen&lt;/a&gt;
       &lt;a href="quali.html"&gt;Qulität, Sicherheit und Weiterbildung&lt;/a&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/div&gt;
  
  &lt;div class="slideshow"&gt; 
       &lt;img src="panorama.jpg"&gt;
       &lt;img src="panorama.jpg"&gt;
       &lt;img src="panorama.jpg"&gt;
  &lt;/div&gt;
  
  
  &lt;h2 align="center"&gt; &lt;!--FORM--&gt;
  &lt;form id="my_form" onsubmit="submitForm(); return false;"&gt;
    &lt;p&gt;&lt;input style="font-size: 30px" id="n" placeholder="Vorname" required&gt;&lt;/p&gt;
  &lt;p&gt;&lt;input style="font-size: 30px" id="x" placeholder="Nachname" required&gt;&lt;/p&gt;
  &lt;p&gt;&lt;input style="font-size: 30px" id="z" placeholder="Telefon" required&gt;&lt;/p&gt;
  &lt;p&gt;&lt;input style="font-size: 30px" id="z" placeholder="Email Address" required&gt;&lt;/p&gt;
    &lt;textarea style= "font-size: 30px" id="m" placeholder="write your message here" rows="10" required&gt;&lt;/textarea&gt;
    &lt;p&gt;&lt;input id="mybtn" type="submit" value="Submit Form"&gt; &lt;span id="status"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/form&gt;
      &lt;/h2&gt;
  
  
  
  
  &lt;footer class="footer-distributed"&gt; &lt;!--LEFT LOGO FOOT--&gt;
  
  &lt;div class="footer-left"&gt; 
       &lt;img src="awlogocolor.png" height="50" width="250" alt="A.Willi A.G" /&gt;   
       &lt;p class="footer-links"&gt;     &lt;!--LINKS--&gt;
       &lt;a href="#"&gt;Home&lt;/a&gt;·
       &lt;a href="#"&gt;Zertifikate&lt;/a&gt;·
       &lt;a href="#"&gt;Datenschutz-Bestimmungen&lt;/a&gt;·
       &lt;p class="footer-company-name"&gt;&amp;copy;2016 A.Willi A.G&lt;/p&gt;
  &lt;/div&gt;
  
  
  &lt;div class="footer-center"&gt; &lt;!--CENTER--&gt;
  &lt;div&gt;
       &lt;i class="fa fa-map-marker"&gt;&lt;/i&gt;
       &lt;p&gt;&lt;span&gt;Wasgenring 94&lt;/span&gt; CH-4055 Basel&lt;/p&gt;
  &lt;/div&gt;   
  &lt;div&gt;
       &lt;i class="fa fa-phone"&gt;&lt;/i&gt;
       &lt;p&gt;&lt;span&gt;Fax +41 (0)61 856 14 38&lt;/span&gt;
        Tel. +41 (0)61 646 18 18&lt;span&gt;
        info@awilliag.ch&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div&gt;
       &lt;i class="fa fa-envelope"&gt;&lt;/i&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="footer-right"&gt; &lt;!--RIGHT--&gt;
  &lt;div class="slideshow2"&gt; 
       &lt;p&gt;&lt;font color="white"&gt;Wir möchten uns bei alle unseren Kunden bedanken.&lt;/font&gt;&lt;/p&gt;
       &lt;img src="lehman.png" height="50" width="50"&gt;
       &lt;img src="jc.png" height="50" width="50"&gt;
       &lt;img src="iwb.png" height="50" width="50"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/footer&gt;  
  
  
  &lt;/body&gt; 
  &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body{ 
      font-family: verdana; 
      background:whitesmoke ; 
      color:black; 
  }
  
  .menu { 
     background: black; 
     width:100%;
  }
  
  ul {
      list-style-type: none;
      margin: 0 auto;
      display:table;
      padding: 0;
      z-index: 100;
      overflow: hidden;
  }
  
  .logo {
      height:   
      position: relative;
      margin-bottom:-35px;
  } 
  
  li {
      float: left;
  }
  
  
  /* DROPDOWN Txt Color */
  
  li a, .dropbtn {
      display: inline-block;
      color: whitesmoke;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  
  
  /* DROPDOWN Txt BOX Color */
  li a:hover, .dropdown:hover .dropbtn {
      background-color: #33383b;
  }
  
  li.dropdown {
      display: inline-block;
  }
  
  /* DROPDOWN content clr */
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: whitesmoke;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 100;
  }
  
  /* DROPDOWN TEXT CLR */
  
  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
  }
  
  
  /* DROPDOWN COL BOX */
  .dropdown-content a:hover {
         background-color: whitesmoke
  }
  
  .dropdown:hover .dropdown-content {
      display: block;
  }
  
          @keyframes fade {
          0%   { opacity: 0; }
          11.11%   { opacity: 1; }
          33.33%  { opacity: 1; }
          44.44%  { opacity: 0; }
          100% { opacity: 0; }
  }
  
  /* MENU COL */
  
  .menu { 
    position: relative;
    z-index: 0;
    height: 2.9em;
    margin-bottom: -0.4em;
    margin-top: 0em;
    z-index:1000;
    background-color:#33383b;
  }
  
  /* slideshow header */
  .slideshow { 
      position: relative;
      z-index: ;
      width: 100%;
      top: 0;
      box-sizing: border-box;
      height: 250px;
      max-width: 100%;
      bottom: 20px;
    }
  
  .slideshow img{
      margin:0 auto;
      width: 100%;
      max-height: 100%;
  }
  
  
  
  .slideshow img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
      .slideshow img:nth-child(1) { animation-delay: 0s;  }
      .slideshow img:nth-child(2) { animation-delay: 3s;  }
      .slideshow img:nth-child(3) { animation-delay: 6s;  }
  
  
  
  
  /* slideshow2 header */
  .slideshow2 { 
      position: relative;
      z-index: ;
      width: 150px;
      top: 0em;
      box-sizing: border-box;
      height: 40px;
      max-width: 100%;
      bottom: 20px;
    }
  
  .slideshow2 img{
      margin:0 auto;
      width: 100%;
      max-height: 100%;
  }
  
  
  
  .slideshow2 img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
      .slideshow2 img:nth-child(1) { animation-delay: 0s;  }
      .slideshow2 img:nth-child(2) { animation-delay: 3s;  }
      .slideshow2 img:nth-child(3) { animation-delay: 6s;  }
  
  
  
  
  /* page container */
  .container {
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
  }
  
  /* article from jobs */
  .article {
      text-align: left;
      height: 200px;
      margin-bottom:11px
  }
  
  /* body of text */
  
  textinfo {
      width: 300px;
      border: 25px solid green;
      padding: 25px;
      margin: 25px;
  }   
  
  
  .footer-distributed{
      background-color: #292c2f;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
      box-sizing: border-box;
      width: 100%;
      text-align: left;
      font: 15px verdana;
  
      padding: 30px 30px;
      margin-top: 100px;
  }
  
  .footer-distributed .footer-left,
  .footer-distributed .footer-center,
  .footer-distributed .footer-right{
      display: inline-block;
      vertical-align: top;
  }
  
  /* footer left */
  
  .footer-distributed .footer-left{
      width: 40%;
  }
  
  /* the company logo */
  
  .footer-distributed h3{
      color:  #ffffff;
      font: normal 15px 'Verdana', cursive;
      margin: 0;
  }
  
  .footer-distributed h3 span{
      color:  #5383d3;
  }
  
  /* footer links */
  
  .footer-distributed .footer-links{
      color:  #ffffff;
      margin: 20px 0 12px;
      padding: 0;
  }
  
  .footer-distributed .footer-links a{
      display:inline-block;
      line-height: 1.8;
      text-decoration: none;
      color:  inherit;
  }
  
  .footer-distributed .footer-company-name{
      color:  #8f9296;
      font-size: 15px;
      font-weight: normal;
      margin: 0;
  }
  
  /* footer center */
  
  .footer-distributed .footer-center{
      width: 35%;
  }
  
  .footer-distributed .footer-center i{
      background-color:  #33383b;
      color: #ffffff;
      font-size: 15px;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      text-align: center;
      line-height: 42px;
      margin: 10px 15px;
      vertical-align: middle;
  }
  
  .footer-distributed .footer-center i.fa-envelope{
      font-size: 17px;
      line-height: 38px;
  }
  
  .footer-distributed .footer-center p{
      display: inline-block;
      color: #ffffff;
      vertical-align: middle;
      margin:0;
  }
  
  .footer-distributed .footer-center p span{
      display:block;
      font-weight: normal;
      font-size:14px;
      line-height:2;
  }
  
  .footer-distributed .footer-center p a{
      color:  #5383d3;
      text-decoration: none;;
  }
  
  
  /* footer right */
  
  .footer-distributed .footer-right{
      width: 20%;
  }
  
  .footer-distributed .footer-company-about{
      line-height: 20px;
      color:  #92999f;
      font-size: 15px;
      font-weight: normal;
      margin: 0;
  }
  
  .footer-distributed .footer-company-about span{
      display: block;
      color:  #ffffff;
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 20px;
  }
  
  .footer-distributed .footer-icons{
      margin-top: 25px;
  }
  
  .footer-distributed .footer-icons a{
      display: inline-block;
      width: 35px;
      height: 35px;
      cursor: pointer;
      background-color:  #33383b;
      border-radius: 2px;
  
      font-size: 15px;
      color: #ffffff;
      text-align: center;
      line-height: 35px;
  
      margin-right: 3px;
      margin-bottom: 5px;
  }
  
  /* un responsive rmoval */
  
  @media (max-width: 880px) {
  
      .footer-distributed{
          font: bold 14px sans-serif;
      }
  
      .footer-distributed .footer-left,
      .footer-distributed .footer-center,
      .footer-distributed .footer-right{
          display: block;
          width: 100%;
          margin-bottom: 40px;
          text-align: center;
      }
  
      .footer-distributed .footer-center i{
          margin-left: 0;
      }
  
  
  logo {        
      margin-bottom:100px;
  }
  
  input {
          font-size: 100px;
  }
  </code></pre>