Witam.
Chciałbym zaaplikować captche do formularza kontaktowego ale nie wiem jak przepisać polecenia aby aktualny formularz brał ją pod uwagę.
Captcha z której korzystam to Motion Captcha.
Oto kod formularza kontaktowego.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Motion Captcha - This one is needed:-->
<link rel="stylesheet" href="jquery.css">
<!-- Motion Captacha CSS-->
<link rel="stylesheet" href="motionCaptcha.css">
<link href="style.css" rel="stylesheet">
<!-- to see send results in the same window -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function(){
$('#contact-form').submit(function(){
var action = $(this).attr('action');
$.post(action, {
name: $('#name').val(),
email: $('#email').val(),
subject: $('#subject').val(),
message: $('#message').val()
},
function(data){
$('#contact-form #submit').attr('disabled','');
$('.response').remove();
$('#contact-form').before('<p class="response">'+data+'</p>');
$('.response').slideDown();
if(data=='Wiadomość wysłana!') $('#contact-form').slideUp();
}
);
return false;
});
});
// ]]>
</script>
<!-- jQuery via Google + local fallback, see h5bp.com -->
<script src="jquery-1.7.1.min.js"></script>
<!-- Validate plugin -->
<script src="jquery.validate.min.js"></script>
<!-- Scripts specific to this page -->
<script src="script.js"></script>
</head>
<body>
<form action="contact.php" method="post" id="contact-form" class="form-horizontal">
<fieldset>
<p><legend>Formularz Kontaktowy</legend></p>
<div class="control-group">
<label class="control-label" for="contactname">Imię i Nazwisko</label>
<div class="controls">
<input type="text" class="input-xlarge" name="name" id="name">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input type="text" class="input-xlarge" name="email" id="email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="subject">Temat</label>
<div class="controls">
<input type="text" class="input-xlarge" name="subject" id="subject">
</div>
</div>
<div class="control-group">
<label class="control-label" for="message">Wiadomość</label>
<div class="controls">
<textarea class="input-xlarge" name="message" id="message" rows="3"></textarea>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" >Wyślij</button>
<button class="btn">Anuluj</button>
</div>
</fieldset>
</form>
</body></html>
i kod captcha <!-- The form that MC will act on: -->
<form class="mc-active" action="#" method="post" id="mc-form">
<p><input class="placeholder" placeholder="your name …" type="text"></p>
<p><input class="placeholder" placeholder="your email address …" type="email"></p>
<p><textarea class="placeholder" placeholder="your message …" cols="" rows="3"></textarea></p>
<div id="mc">
<p>Please draw the shape in the box to submit the form: (<a onclick="window.location.reload()" href="#" title="Click for a new shape">new shape</a>)</p>
<canvas class="zigzag" height="154" width="220" id="mc-canvas">
Your browser doesn't support the canvas element - please visit in a modern browser.
</canvas>
<input id="mc-action" value="http://josscrowcroft.com/projects/motioncaptcha-jquery-plugin/" type="hidden">
</div>
<p><input disabled="disabled" autocomplete="false" value="Submit" type="submit"></p>
</form>
<!-- HTML5 Placeholder fallback: for older browser to read placeholder content -->
<script src="jquery_002.js" type="text/javascript"></script>
<!-- MotionCAPTCHA: -->
<script src="jquery_003.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Do the biznizz:
$('#mc-form').motionCaptcha({
shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'zigzag', 'arrow', 'delete', 'pigtail', 'star']
});
// Yep:
$("input.placeholder").placeholder();
});
</script>
Proszę o pomoc.