Among the WordPress developers their is always only one option in the case of which form plugin to use, that is contact contact form 7 WordPress plugin. as per the current report their a huge percentage of spam message every website are getting daily from the users, so OTP validation is most suitable solution to block spammers so automatically our question is how to add OTP validation in contact form 7 WordPress plugin
Let see in details
add below code inside admin contact form section see in details below
<div class="pad0 col-12 col-sm-12 col-md-12">[text* telno id:mobileOTP class:inpt_box placeholder "Contact Number"]</div> <div class="pad0 col-12 col-sm-12 col-md-12">[text* OTP id:mobileOTPField class:inpt_box placeholder "OTP"]</div> <div class="pad0 col-12 col-sm-12 col-md-12">[text OTPDEMO id:mobileOTPFieldDemo class:inpt_box placeholder "OTP"]</div>
after adding this page we have to work on script
download footer.php from theme folder
add below code top of the page
<script>
jQuery(document).ready(function(){
jQuery("#mobileOTPField").css('display','none');
jQuery("#mobileOTPFieldDemo").css('display','none');
jQuery("#mobileOTPField_bottom").css('display','none');
jQuery("#mobileOTPFieldDemo_bottom").css('display','none');
var otp ;
jQuery("#mobileOTP").on("blur",function(){
var mobile=jQuery("#mobileOTP").val();
var name=jQuery("#yourname").val();
if(mobile!='')
{
var otp=Math.floor(Math.random() * (999999 - 100000 + 1)) + 100000;
jQuery.post("/send_otp.php",
{
mobile: mobile,
name: name,
otp: otp
},
function(data, status){
console.log("ffffffffff"+data);
//alert(otp);
jQuery("#mobileOTPField").css('display','block');
jQuery("#mobileOTPFieldDemo").val(otp);
} );
}
});
jQuery("#mobileOTPField").on("click",function(){
jQuery("#mobileOTPField").css('border','0px solid red');
});
jQuery("#mobileOTPField").on("blur",function(){
jQuery("#mobileOTPField").css('border','0px solid red');
var value_otp=jQuery("#mobileOTPFieldDemo").val();
var otp=jQuery("#mobileOTPField").val();
if(value_otp!=otp)
{
jQuery("#mobileOTPField").css('border','1px solid red');
jQuery("#mobileOTPField").val('');
}
});
</script>
Finally upload below files(send_otp.php) in root folder
This is main functionality for OTP validation in contact form 7 WordPress plugin
<?php
$mobile_no=$_REQUEST['mobile'];
$name=$_REQUEST['name'];
if($name=='')
{
$name='User';
}
$otp=$_REQUEST['otp'];
//$otp=rand(100000, 999999);
$curl = curl_init();
$post_data='<MESSAGE>
<AUTHKEY>278449AfqSEysssss6tW5cebts7e3c</AUTHKEY>
<SENDER>TEST API</SENDER>
<ROUTE>4</ROUTE>
<CAMPAIGN>TEST API</CAMPAIGN>
<COUNTRY>TEST Enquiry</COUNTRY>
<SMS TEXT="Dear '.$name.', %0aPlease use this OTP '.$otp.' to complete your enquiry. %0a%0a-Team TESTOTP" >
<ADDRESS TO="'.$mobile_no.'"></ADDRESS>
</SMS>
</MESSAGE>';
curl_setopt_array($curl, array(
CURLOPT_URL => "https://control.msg91.com/api/postsms.php",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => $post_data,
CURLOPT_SSL_VERIFYHOST => 0,
CURLOPT_SSL_VERIFYPEER => 0,
CURLOPT_HTTPHEADER => array(
"content-type: application/xml"
),
));
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
return $otp;
?>