The recaptcha is above the button

Question

I have my recaptcha, it's working but the problem that I have it's that the submit button is under the captcha, I mean when I push the submit button I click the captcha too, I have tried with z-index but it does not worrk, how can I fix it?

<form action="{{ url('ticket/store') }}" method="post" id="ticket_form">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="RUT" name="rut" required="">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Nombre" name="name" required="">
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" placeholder="Correo" name="email" required="">
                            </div>
                            <div class="form-group">
                                <input type="number" class="form-control" placeholder="Teléfono" name="phone" required="">
                            </div>
                            <div class="form-group">
                                <select name="case_type" class="form-control" required="">
                                    <option value="">- Tipo de Caso -</option>
                                    <option value="1">Felicitación</option>
                                    <option value="2">Reclamo</option>
                                    <option value="3">Sugerencia</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <select name="id_branch_office" class="form-control" required="">
                                    <option value="">- Sucursal -</option>
                                    @foreach($branch_offices as $branch_office)
                                        <option value="{{ $branch_office->id_branch_office }}">{{ $branch_office->view_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <textarea placeholder="Mensaje" class="form-control" rows="5" name="message" required=""></textarea>
                            </div>
                            <center>{!! htmlFormSnippet() !!}</center>

                            <br>
                            <button id="send" type="submit" class="btn btn-primary btn-orange">Enviar Mensaje</button>
                        </form>

You can test it in the next website jisparking.cl

Thanks

Answer 1

If you inspect the page (in Chrome you can do right click -> inspect) and check the box of the generated recaptcha, you can see that it stretches well over the button. To stop the extra content from overflowing the container, you can add some CSS.

Try this

<center style="overflow: hidden">{!! htmlFormSnippet() !!}</center>