<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section id="login"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="form-wrap"> <h1>Suas Informações:</h1> <form role="form" autocomplete="off" action="https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST"> <input type=hidden name="oid" value="00Dc0000003w0mp"> <input type=hidden name="retURL" value="https://www.google.com"> <input type=hidden id="Campanha__c" name="Campanha__c" value="Indica Ai"> <label for="email" >Qual O seu nome?*</label> <div class="form-group"> <input id="Nome_do_Indicador__C" type="text" name="Indicado_Por_nome__c" class="form-control" placeholder="Digite seu Nome"> </div> <label for="email" >Qual o seu Stone Code?*</label> <div class="form-group"> <input id="Indicado_Por__c" type="text" name="Indicado_Por__c" class="form-control" placeholder="Ex: 123456789"> </div> <h1>Informações do Estabelecimento que você quer Indicar:</h1> <label for="first_name" >Quem você gostaria de indicar?*</label> <div class="form-group"> <input class="form-control" id="first_name" type="text" name="first_name" placeholder="Nome do responsável pelo negócio indicado." /> </div> <label for="first_name" >Qual o telefone do indicado?*</label> <div class="form-group"> <input class="form-control" id="phone" type="text" name="phone" placeholder="Ex:(00) 99999-0000 ou (00) 3003-0000" /> </div> <label for="first_name" >Qual o nome fantasia do estabelecimento indicado?*</label> <div class="form-group"> <input class="form-control" id="company" type="text" name="company" /> </div> <label for="first_name" >Qual CNPJ/CPF do estabelecimento que você quer indicar?</label> <div class="form-group"> <input class="form-control" id="CNPJ_CPF__c" type="text" name="CNPJ_CPF__c"/> </div> <label for="first_name" >Em qual cidade o estabelecimento se localiza?</label> <div class="form-group"> <input class="form-control" id="city" type="text" name="city" placeholder="Ex: São Paulo"/> </div> <label for="first_name" >Em qual Estado o estabelecimento se localiza?</label> <div class="form-group"> <input class="form-control" id="state" type="text" name="state" placeholder="Ex: SP"/> </div> <input type="submit" id="btn-login" class="btn btn-custom btn-lg btn-block" value="Enviar"> </form> </div> </div> <!-- /.col-xs-12 --> </div> <!-- /.row --> </div> <!-- /.container --> </section> <footer id="footer"> <div class="container"> <div class="row"> <div class="col-xs-12"> <p>Powered by <strong><a href="www.stone.com.br" target="_blank">Stone</a></strong></p> </div> </div> </div> </footer>

/* -------------------------------------------------- :: Login Section -------------------------------------------------- */ #login { padding-top: 50px } #login .form-wrap { width: 45%; margin: 0 auto; } #login h1 { color: #1fa67b; font-size: 18px; text-align: center; font-weight: bold; padding-bottom: 20px; } #login .form-group { margin-bottom: 25px; } #login .checkbox { margin-bottom: 20px; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } #login .checkbox.show:before { content: '\e013'; color: #1fa67b; font-size: 17px; margin: 1px 0 0 3px; position: absolute; pointer-events: none; font-family: 'Glyphicons Halflings'; } #login .checkbox .character-checkbox { width: 25px; height: 25px; cursor: pointer; border-radius: 3px; border: 1px solid #ccc; vertical-align: middle; display: inline-block; } #login .checkbox .label { color: #6d6d6d; font-size: 13px; font-weight: normal; } #login .btn.btn-custom { font-size: 14px; margin-bottom: 20px; } #login .forget { font-size: 13px; text-align: center; display: block; } /* -------------------------------------------------- :: Inputs & Buttons -------------------------------------------------- */ .form-control { color: #212121; } .btn-custom { color: #fff; background-color: #1fa67b; } .btn-custom:hover, .btn-custom:focus { color: #fff; } /* -------------------------------------------------- :: Footer -------------------------------------------------- */ #footer { color: #6d6d6d; font-size: 12px; text-align: center; } #footer p { margin-bottom: 0; } #footer a { color: inherit; }

function showPassword() { var key_attr = $('#key').attr('type'); if(key_attr != 'text') { $('.checkbox').addClass('show'); $('#key').attr('type', 'text'); } else { $('.checkbox').removeClass('show'); $('#key').attr('type', 'password'); } }