Google’ın bizler için sunduğu reCAPTCHA uygulaması formlarımızda bizi büyük dertten kurtarıyor. reCAPTCHA şuanki haliyle tek sayfada bir tane kullanılabiliyor. Eğer sayfanızda birden fazla form var ve hepsinde de reCAPTCHA kullanmak istiyorsak biri çalışmıyor. Bugün bu sorunun çözümünden, reCAPTCHA’nın tek başına kullanımından ve forma göre görsel boyutlarını ayarlamaktan bahsedeceğim.

Öncelikle en yalın haliyle Google reCAPTCHA nasıl ekleniyor bundan bahsedelim.

Burayı tıklayarak kendinize bir key alın.

Şöyle en yalın haliyle içinde iki adet form barındıran minik bir sayfamız olsun.

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
</head>
<body>
<form action="" method="post">
	<input type="text" name="ad">
	<input type="submit"></input>
</form>

<form action="" method="post">
	<input type="text" name="ad">
	<input type="submit"></input>
</form>
</body>
</html>

Bu sayfamıza öncelikle reCAPTCHA  özelliği kazandırabilmek için gerekli yapılandırmaları yapalım.

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="" method="post">
	<input type="text" name="ad">
	<div class="g-recaptcha" data-sitekey="6LfvvCkUAAAAAN-pI3_Q7Fh6mYrojUWQ7u6m4bF9"></div>
	<input type="submit"></input>
</form>

<form action="" method="post">
	<input type="text" name="ad">
	<div class="g-recaptcha" data-sitekey="6LfvvCkUAAAAAN-pI3_Q7Fh6mYrojUWQ7u6m4bF9"></div>
	<input type="submit"></input>
</form>
</body>
</html>

Yaptığımız eklemeri yukarıda renklendirdim. Bu haliyle sayfamızda bulunan iki reCAPTCHA ‘nın da çalışacağını ümit ediyoruz ancak sadece bir tanesi muhtemelen ilk olanı çalışır. Sorunu çözmek için belkide ayrı sayfalarda bu işlemin yapılması gerek ama aynı sayfada kullanmak zorundaysak o zaman da şu şekilde modifiye ediyoruz.

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
    <script src="https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>
    <script>
    var recaptcha1;
    var recaptcha2;
    var myCallBack = function() {
     recaptcha1 = grecaptcha.render('recaptcha1', {
       'sitekey' : '6LfvvCkUAAAAAN-pI3_Q7Fh6mYrojUWQ7u6m4bF9',
       'theme' : 'light'
     });
      
     recaptcha2 = grecaptcha.render('recaptcha2', {
       'sitekey' : '6LfvvCkUAAAAAN-pI3_Q7Fh6mYrojUWQ7u6m4bF9',
       'theme' : 'dark'
     });
    };
    </script>	
</head>
<body>
<form action="" method="post">
	<input type="text" name="ad">
	<div id="recaptcha1"></div>
	<input type="submit"></input>
</form>

<form action="" method="post">
	<input type="text" name="ad">
	<div id="recaptcha2"></div>
	<input type="submit"></input>
</form>
</body>
</html>

Bu şekilde her ikiside çalışacaktır. Kodlarda düzenleme yaparak arttırmanız mümkündür.

Gelelim divlerin boyutlarıyla oynama, mevcut formumuza uygun hale getirme işlemine;

Tekli de şu şekilde;

<div class="g-recaptcha" data-sitekey="6LfvvCkUAAAAAN-pI3_Q7Fh6mYrojUWQ7u6m4bF9" style="transform:scale(0.89);-webkit-transform:scale(0.89);transform-origin:0 0;-webkit-transform-origin:0 0;"></div>

Çoklu olanda ise şu şekilde;

<div id="recaptcha1" style="transform:scale(0.89);-webkit-transform:scale(0.89);transform-origin:0 0;-webkit-transform-origin:0 0;"></div>

satır içi style vererek transform değerleriyle oynayarak değiştirebilirsiniz.