Google ReCaptcha Display with Image & Client Side Validation on Form Submit
<p>I have followed</p>

<p><a href="https://stackoverflow.com/questions/27450562/how-to-validate-google-recaptcha-on-form-submit">How to Validate Google reCaptcha on Form Submit</a></p>

<p>I have below code in my <strong>index.php</strong></p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;script src='https://www.google.com/recaptcha/api.js'&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;form method="post" action="post.php"&gt;
            &lt;div class="g-recaptcha" data-sitekey="6XXXXXXXXXXXXwdsf0K8HbXXXXXXX"&gt;&lt;/div&gt;
            &lt;input type="submit" value="Submit" /&gt;
        &lt;/form&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>post.php</strong></p>

<pre><code>$response = $_REQUEST['g-recaptcha-response'];
$secret = '6XXXXXXXXXXXXwdsf0K8HbJNvMw-XXXX';
$server = $_SERVER['REMOTE_ADDR'];

$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=" . $secret . "&amp;response=" . $response.'&amp;remoteip='.$server);
$response = json_decode($response, true);
if ($response["success"] === true) {
    echo "Logged In Successfully";
} else {
    echo "You are a robot";
}
exit;
</code></pre>

<p>Above code is working fine. </p>

<p><strong>How to do client side validation? It's not showing Captcha with Images Option.</strong></p>

<p><a href="https://i.stack.imgur.com/wXVpi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wXVpi.png" alt="enter image description here"></a></p>

<p>I already done below</p>

<p><a href="https://i.stack.imgur.com/VTor6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VTor6.png" alt="enter image description here"></a></p>