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

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'];
......................
}