Samet KAYA

Blog

Bir Sayfada Birden Fazla reCAPTCHA Kullanılması

Bir Sayfada Birden Fazla reCAPTCHA Kullanılması

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.

 

<html></p>

<head></p>

<title>Test</title></p>

</head></p>

<body></p>

<form action="" method="post"></p>

<input type="text" name="ad"></p>

<input type="submit"></input>

</form></p>

 

<form action="" method="post"></p>

<input type="text" name="ad"></p>

<input type="submit"></input>

</form></p>

</body></p>

</html></p>

 

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

<html></p>

<head></p>

<title>Test</title></p>

[removed][removed]

</head></p>

<body></p>

<form action="" method="post"></p>

<input type="text" name="ad"></p>

<input type="submit"></input>

</form></p>

 

<form action="" method="post"></p>

<input type="text" name="ad"></p>

<input type="submit"></input>

</form></p>

</body></p>

</html></p>

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.

 

<html></p>

<head></p>

<title>Test</title></p>

    [removed][removed]

    [removed]

    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'

     });

    };

    [removed]

</head></p>

<body></p>

<form action="" method="post"></p>

<input type="text" name="ad"></p>

<input type="submit"></input>

</form></p>

 

<form action="" method="post"></p>

<input type="text" name="ad"></p>

<input type="submit"></input>

</form></p>

</body></p>

</html></p>

 

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;