google re captcha not showing up - php

Question

I have implemented google re captcha in a modal popup. I have also included the api ,i.e recaptcha/api.js to enable the recpatcha. But it is not showing up when I invoke the popup.
When I right click on the popup and inspect, the div tag which includes the google recaptcha is being seen in the elements section .
I have included the modal popup in my footer page which is called by every page in my website.
My code:
<script src="https://www.google.com/recaptcha/api.js"></script>
<!-- Request A Demo POPUP(Start) -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<?php echo form_open(base_url( 'employer-request-demo/request-demo/submit' ), array( 'id' => 'idfrmdemo', 'name' =>'frmdemo', 'method'=>'post'));?>
<!-- input type="text" name="<?php //echo $this->security->get_csrf_token_name();?>" value="<?php //echo $this->security->get_csrf_hash();?>"-->
<div class="modal-content">
<div class="modal-header" align="center">
<button type="button" id="frmdemo-close" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><strong>Request a Demo</strong></h4>
</div>
<div class="modal-body" id="idmodalcontent">
<div class="row">
<div class="form-group col-md-6">
<label for="txtfirstname">FIRST NAME</label>
<input name="txtfirstname" type="text" class="form-control required" placeholder="Please enter your first name" id="idfirstname" >
</div>
<div class="form-group col-md-6">
<label for="txtlastname">LAST NAME</label>
<input name="txtlastname" type="text" class="form-control required" placeholder="Please enter your last name" id="idlastname">
</div>
</div>
<div class="form-group">
<label for="Email">CORPORATE EMAIL</label>
<input type="email" name="txtemail" class="form-control" placeholder="Please enter your email id" id="idemail">
<div class="divstyle"></div>
</div>
<div class="form-group">
<label for="idcompany">COMPANY NAME</label>
<input type="text" name="txtcompany" placeholder="Please enter the name of your company" class="form-control" id="idcompany" >
</div>
<div class="form-group">
<label for="Phone">PHONE</label>
<input type="tel" name="txtphone" placeholder="Please enter your phone number" class="form-control" id="idphone">
</div>
<div class="form-group">
<label for="">MODE OF CONTACT</label>
<select name="selmode" id="idmode" class="form-control">
<option value="" disabled selected>Select mode of contact</option>
<option value="email">Email</option>
<option value="phone">Phone</option>
<option value="any">Any</option>
</select>
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="6LexRREUAAAAAELhZaiO5FxRbgnyWEwIxFTWeHhE"></div>
<input type="hidden" class="hiddenRecaptcha required" name="cphiddenRecaptcha" id="idcphiddenRecaptcha">
</div>
</div>
<div class="modal-footer">
<div id="btn-smb">
<input type="submit" id="idsubmit" name="submit" value="Submit" class="btn btn-warning" />
</div>
<div id="btn-close" style="display:none;">
<input type="button" name="close" value="Close" class="btn btn-warning" id="idclose"/>
</div>
</div>
</div>
<input type="hidden" name="context" id="frm_context" value="Request A Demo" />
<?php echo form_close();?>
</div>
</div>
<!-- Request A Demo POPUP(End) -->
I am getting the following error in the console:
XMLHttpRequest cannot load javascript:void(0);. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.