$_POST fields not forwarding to the verify.php script reCAPTCHA

Question

I've got a form with CSS styling. When I leave the CSS styling in place the reCAPTCHA widget does not send the "recaptcha_challenge_field" and "recaptcha_response_field" in the $_POST data. They are causing my $resp to always evaluate to false.

I've found that if I remove the id="contactform" attribute that the reCAPTCHA works properly.

Here's my form code:

<form action="PHP/contact2.php" method="post" id="contactform">
      <ol>
        <li>
          <label for="name">Name <span class="red">*</span></label>
          <input id="name" name="name" class="text" />
        </li>
        <li>
          <label for="email">email <span class="red">*</span></label>
          <input id="email" name="email" class="text" />
        </li>
        <li>
          <label for="company">Company</label>
          <input id="company" name="company" class="text" />
        </li>
        <li>
          <label for="subject">Subject</label>
          <input id="subject" name="subject" class="text" />
        </li>
        <li>
          <label for="message">Message <span class="red">*</span></label>
          <textarea id="message" name="message" rows="6" cols="50"></textarea>
        </li>

        <?php
          require_once("PHP/recaptchalib.php");
          $publickey = "Public key is here, I've removed it for security"; 
          echo recaptcha_get_html($publickey);
        ?>

        <li class="buttons">
          <input type="image" name="imageField" id="imageField" src="images/send.gif" class="send" />
          <div class="clr"></div>
        </li>
      </ol>
    </form>

My CSS styling is here:

/********** contact form **********/
#contactform { margin:0; padding:5px 10px;}
#contactform * {
color:#000;
}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block;     clear:both;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label {
margin:0;
width:110px;
display:block;
padding:10px 0;
color:#605f5f;
font: normal 12px Arial, Helvetica, sans-serif;
text-transform:capitalize;
float:left;
}
#listform label {
margin:0;
width:110px;
display:block;
padding:10px 0;
color:#605f5f;
font: normal 12px Arial, Helvetica, sans-serif;
text-transform:capitalize;
float:left;
}

#contactform label span { color:#F00;}
#contactform input.text { width:200px; border:1px solid #e8e8e8; margin:10px 0;     padding:5px 2px; height:16px; background:#fff; float:left;}
#contactform dropdown {
width:200px;
border:1px solid #e8e8e8;
margin:10px 0;
padding:5px 2px;
height:16px;
background:#fff;
float:left;

Q-RFL; AMPS; 
}


#contactform textarea { width:410px; border:1px solid #e8e8e8; margin:10px 0; padding:2px; background:#fff; float:left;}
#contactform li.buttons input { padding:3px 0 3px 110px; margin:0; border:0; color:#FFF; float:left;}

My server side php to handle the form is cookie cutter from the quickstart guide. I've only added a simple if statement to check if the reCAPTCHA fields are being passed.

This is the response I get from the server side:

The reCAPTCHA wasn't entered correctly. Go back and try it again.(reCAPTCHA said: incorrect-captcha-sol)

but the reCAPTCHA was entered correctly.

Any Suggestions?

Answer 1

You should add a submit button on the form and passed that value using $_POST.

To pass the fields value to verify.php, you should do this

<form ....>
 .........
 .........
 <input type=submit id=x name=x value=Submit>
</form>

In php,put like this

 if(isset($_POST['x']) && $_POST['message']!="" ......){
   $value1=$_POST['message'];
   $value2=$_POST['subject'];
   ......................
  }