Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][JavaScript][PHP]Zaplikowanie Captchy do formularza kontaktowego
Forum PHP.pl > Forum > Przedszkole
Maker5
24.02.2013, 19:13:51
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.

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml"><head>
  3. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
  4.  
  5. 	<!-- Motion Captcha - This one is needed:-->
  6. 	<link rel="stylesheet" href="jquery.css">
  7.  
  8.     	<!-- Motion Captacha CSS-->
  9. 	<link rel="stylesheet" href="motionCaptcha.css">
  10.  
  11.     <link href="style.css" rel="stylesheet">
  12.     <!-- to see send results in the same window -->
  13. <script type="text/javascript" src="jquery.js"></script>
  14. <script type="text/javascript">
  15. // <![CDATA[
  16. jQuery(document).ready(function(){
  17. 	$('#contact-form').submit(function(){				  
  18. 		var action = $(this).attr('action');
  19. 		$.post(action, { 
  20. 			name: $('#name').val(),
  21. 			email: $('#email').val(),
  22. 			subject: $('#subject').val(),
  23. 			message: $('#message').val()
  24. 		},
  25. 			function(data){
  26. 				$('#contact-form #submit').attr('disabled','');
  27. 				$('.response').remove();
  28. 				$('#contact-form').before('<p class="response">'+data+'</p>');
  29. 				$('.response').slideDown();
  30. 				if(data=='Wiadomość wysłana!') $('#contact-form').slideUp();
  31. 			}
  32. 		); 
  33. 		return false;
  34. 	});
  35. });
  36. // ]]>
  37. </script>
  38.  
  39. <!-- jQuery via Google + local fallback, see h5bp.com -->
  40. 	  <script src="jquery-1.7.1.min.js"></script>
  41.  
  42. <!-- Validate plugin -->
  43. 		<script src="jquery.validate.min.js"></script>
  44.  
  45. <!-- Scripts specific to this page -->
  46. 		<script src="script.js"></script>
  47.  
  48.  
  49.  
  50. </head>
  51.  
  52. <body>
  53.  
  54. <form action="contact.php" method="post" id="contact-form" class="form-horizontal">
  55. 					  <fieldset>
  56. 					    <p><legend>Formularz Kontaktowy</legend></p>
  57. 					    <div class="control-group">
  58. 					      <label class="control-label" for="contactname">Imię i Nazwisko</label>
  59. 					      <div class="controls">
  60. 					        <input type="text" class="input-xlarge" name="name" id="name">
  61. 					      </div>
  62. 					    </div>
  63. 					    <div class="control-group">
  64. 					      <label class="control-label" for="email">Email</label>
  65. 					      <div class="controls">
  66. 					        <input type="text" class="input-xlarge" name="email" id="email">
  67. 					      </div>
  68. 					    </div>
  69. 					    <div class="control-group">
  70. 					      <label class="control-label" for="subject">Temat</label>
  71. 					      <div class="controls">
  72. 					        <input type="text" class="input-xlarge" name="subject" id="subject">
  73. 					      </div>
  74. 					    </div>
  75. 					    <div class="control-group">
  76. 					      <label class="control-label" for="message">Wiadomość</label>
  77. 					      <div class="controls">
  78. 					        <textarea class="input-xlarge" name="message" id="message" rows="3"></textarea>
  79. 					      </div>
  80. 					    </div>
  81.               <div class="form-actions">
  82. 		            <button type="submit" class="btn btn-primary" >Wyślij</button>
  83.     			      <button class="btn">Anuluj</button>
  84.         			</div>
  85. 					  </fieldset>
  86. 					</form>
  87. </body></html>
  88.  
[PHP] pobierz, plaintext


i kod captcha

[PHP] pobierz, plaintext 
  1. 			<!-- The form that MC will act on: -->
  2. 			<form class="mc-active" action="#" method="post" id="mc-form">
  3. 				<p><input class="placeholder" placeholder="your name …" type="text"></p>
  4. 				<p><input class="placeholder" placeholder="your email address …" type="email"></p>
  5. 				<p><textarea class="placeholder" placeholder="your message …" cols="" rows="3"></textarea></p>
  6.  
  7. 				<div id="mc">
  8. 					<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>
  9. 					<canvas class="zigzag" height="154" width="220" id="mc-canvas">
  10. 						Your browser doesn't support the canvas element - please visit in a modern browser.
  11. 					</canvas>
  12. 					<input id="mc-action" value="http://josscrowcroft.com/projects/motioncaptcha-jquery-plugin/" type="hidden">
  13. 				</div>
  14.  
  15. 				<p><input disabled="disabled" autocomplete="false" value="Submit" type="submit"></p>
  16. 			</form>
  17.  
  18.  
  19.  
  20.  
  21.  
  22.  
  23. 	<!-- HTML5 Placeholder fallback: for older browser to read placeholder content -->
  24. 	<script src="jquery_002.js" type="text/javascript"></script>
  25.  
  26. 	<!-- MotionCAPTCHA: -->
  27. 	<script src="jquery_003.js"></script>
  28. 	<script type="text/javascript">
  29. 		jQuery(document).ready(function($) {
  30.  
  31. 			// Do the biznizz:
  32. 			$('#mc-form').motionCaptcha({
  33. 				shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'zigzag', 'arrow', 'delete', 'pigtail', 'star']
  34. 			});
  35.  
  36. 			// Yep:
  37. 			$("input.placeholder").placeholder();
  38. 		});
  39. 	</script>
  40.  
  41.  
[PHP] pobierz, plaintext


Proszę o pomoc.
ber32
24.02.2013, 20:02:02
Witam.
Odwiedź

Maker5
25.02.2013, 06:07:51
Cytat(ber32 @ 24.02.2013, 20:02:02 ) *
Witam.
Odwiedź


Bardzo śmieszne.
Akurat o to chodzi że zrobiłem wszystko z podanym przykładem ale to tylko połowa sukcesu,
druga część to połączenie tego z moim formularzem
i o to pytałem, jak to zrobić.
ber32
25.02.2013, 09:32:06
Z tego co widzę to nie zrobiłeś
[PHP] pobierz, plaintext 
  1. <script src="jquery.motionCaptcha.0.2.min.js"></script>
[PHP] pobierz, plaintext
Maker5
25.02.2013, 10:09:48
Cytat(ber32 @ 25.02.2013, 09:32:06 ) *
Z tego co widzę to nie zrobiłeś
[PHP] pobierz, plaintext 
  1. <script src="jquery.motionCaptcha.0.2.min.js"></script>
[PHP] pobierz, plaintext


mam wszystko, mam inna nazwe dodatkowych rzeczy.
ber32
25.02.2013, 18:21:07
Pytam po co ci tę znak $ w tej linijce
[PHP] pobierz, plaintext 
  1. jQuery(document).ready(function($) {
[PHP] pobierz, plaintext


następna sprawa to
[PHP] pobierz, plaintext 
  1. <canvas class="zigzag" height="154" width="220" id="mc-canvas"></canvas>
[PHP] pobierz, plaintext


i
zastanów się nad zmianą id na unikatowe
[PHP] pobierz, plaintext 
  1. <input id="mc-action" value="from.php" type="hidden">
[PHP] pobierz, plaintext


i wywołanie

[PHP] pobierz, plaintext 
  1. $('#mc-form').motionCaptcha({
  2.     action: '#mc-action',      
  3.     divId: '#mc',              
  4.     cssClass: '.mc-active',      
  5.     canvasId: '#mc-canvas',   
  6.     shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'caret', 'zigzag', 'arrow', 'leftbracket', 'rightbracket', 'v', 'delete', 'star', 'pigtail'],
  7.     errorMsg: 'Please try again.',
  8.     successMsg: 'Captcha passed!',
  9.     noCanvasMsg: "Your browser doesn't support <canvas> - try Chrome, FF4, Safari or IE9."
  10. });
[PHP] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.