PHP Codeigniter 3 Google Recaptcha Form Validation Example

Step 1: Create Google App

In this step, we have to create google app and then we will use google key and google secret on Codeigniter app. So go here: Google Recaptcha Admin.

Step 2:

<form action='zohr_url' name='CMIGNITEWebToContacts' method='POST' enctype='multipart/form-data' onSubmit='javascript:document.charset="UTF-8"; return checkMandatory()' accept-charset='UTF-8' id="contact-form">

                                    <input name="First Name" type="text" maxlength="40" id="First_Name" value=""/>

                           <input type='text' style='display:none;' name='returnURL' value='https://www.url.com/thanks' />
 <input name="Email" type="text" id="Email" maxlength="100"/>
<button class="g-recaptcha" 
                                 data-sitekey="6Lc0z7wZAAAAAL8_PxKh83_9AwIACideRGi0cSTH" 
                                 data-callback='onSubmit' 
                                 data-action='submit'  id='formsubmit' type='submit'>Submit</button> 
</form>
<script>
                           function onSubmit(token) {
                                  
                              var email_element = document.getElementById('Email').value;
                              var firstname_element = document.getElementById('First_Name').value;
                              var description_element = document.getElementById('Description').value;
                              var phone_element = document.getElementById('Phone').value;
                           
                              if (firstname_element == null || firstname_element == "") {
                                  $("#invalid_name").css('display','block');
                                  return false;
                              }
                              if(IsEmail(email_element)==false){
                                $("#invalid_email").css('display','block');
                                  return false;
                              }
                              if(IsNumber(phone_element)==false){
                                $("#invalid_phone").css('display','block');
                                  return false;
                              }
                           
                            else {
                             document.getElementById("contact-form").submit(); 
                           }
                           }
                           
                           
                        </script>