验证码位于按钮上方

Question

我有我的验证码，它可以正常工作，但是我遇到的问题是，提交按钮位于验证码下方，我的意思是当我按下提交按钮时，我也单击了验证码，我尝试使用z-index，但是没有担心，我该如何解决？

<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>

您可以在下一个网站jisparking.cl中进行测试

谢谢

Answer 1

如果您检查页面（在Chrome中，您可以右键单击->检查）并选中生成的Recaptcha框，您会发现它在按钮上延伸得很好。要阻止多余的内容溢出容器，可以添加一些CSS。