Created
May 14, 2020 20:51
-
-
Save ojulianos/2bcab80a81ac4eb49fb011e680009ab2 to your computer and use it in GitHub Desktop.
formulario
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <title>Rede de Vantagens</title> | |
| <meta charset="UTF-8"> | |
| <meta name="description" content="Descrição padrão da rede de vantagens"> | |
| <meta name="keywords" content="webuni, education, creative, html"> | |
| <link href="http://rededevantagem.local/assets/img/brand/favicon.png" rel="icon" type="image/png"> | |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet"> | |
| <link href="http://rededevantagem.local/assets/js/plugins/nucleo/css/nucleo.css" rel="stylesheet" /> | |
| <link href="http://rededevantagem.local/assets/js/plugins/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" /> | |
| <link href="http://rededevantagem.local/assets/css/argon-dashboard.css?v=1.1.0" rel="stylesheet" /> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.min.css"> | |
| </head> | |
| <body class="bg-warning"> | |
| <div class="main-content"> | |
| <div class="header bg-gradient-warning py-7 py-lg-8"> | |
| <div class="container"> | |
| <div class="header-body text-center mb-7"> | |
| <div class="row justify-content-center"> | |
| <div class="col-lg-5 col-md-6"> | |
| <img src="http://rededevantagem.local/assets/img/brand/white.png" width="200" class="rounded mx-auto d-block"/> | |
| </div> | |
| </div> | |
| </div> | |
| <form class="js-validate" name="send_data" method="post"> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-6 mb-3"> | |
| <div class="card"> | |
| <div class="container"> | |
| <div class="nav-wrapper"> | |
| <ul class="nav nav-pills nav-fill flex-column flex-md-row menuSelectItem" | |
| id="tabs-icons-text" | |
| role="tablist"> | |
| <li class="nav-item"> | |
| <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-icons-text-1-tab" | |
| data-toggle="tab" href="#individual" role="tab" aria-valuenow="0" | |
| aria-controls="tabs-icons-text-1" aria-selected="true"><i | |
| class="fa fa-user mr-2"></i>Individual</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-2-tab" | |
| data-toggle="tab" href="#familia" role="tab" aria-valuenow="2" | |
| aria-controls="tabs-icons-text-2" aria-selected="false"><i | |
| class="fa fa-users mr-2"></i>Família 3</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-3-tab" | |
| data-toggle="tab" href="#familia" role="tab" aria-valuenow="4" | |
| aria-controls="tabs-icons-text-3" aria-selected="false"><i | |
| class="fa fa-user"></i><i class="fa fa-users mr-2"></i>Família 5</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <h3 class="title mt-3">Dados do Comprador</h3> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <label class="labels"> | |
| Nome | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="text" autocomplete="nope" class="form-control firstname" | |
| name="firstname" placeholder="Seu nome" aria-label="Seu nome" required | |
| value="Juliano"> | |
| </div> | |
| <div class="col-md-6"> | |
| <label class="labels"> | |
| Sobrenome | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="text" autocomplete="nope" class="form-control lastname" | |
| name="lastname" placeholder="Seu sobrenome" aria-label="Seu sobrenome" | |
| required value="Silva"> | |
| </div> | |
| </div> | |
| <br> | |
| <div class="row"> | |
| <div class="col-md-6 col-sm-12"> | |
| <div class="js-form-message"> | |
| <label class="labels"> | |
| CPF | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="text" autocomplete="nope" class="form-control cpf" name="cpf" | |
| placeholder="000.000.000-00" aria-label="000.000.000-00" required | |
| value="000.000.001-91"> | |
| </div> | |
| </div> | |
| <div class="col-md-6 col-sm-12"> | |
| <div class="js-form-message"> | |
| <label class="labels"> | |
| Data de Nascimento | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="text" autocomplete="nope" class="form-control data_nascimento" | |
| name="data_nascimento" placeholder="99/99/9999" | |
| aria-label="99/99/9999" required value="23/09/1990"> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| <div class="row"> | |
| <div class="col-md-6 col-sm-12"> | |
| <div class="js-form-message"> | |
| <label class="labels"> | |
| Sexo | |
| <span class="text-danger">*</span> | |
| </label> | |
| <select class="form-control" name="sexo" data-trigger | |
| name="choices-single-default" id="choices-single-default"> | |
| <option selected="">Prefiro não informar</option> | |
| <option value="Masculino" selected>Masculino</option> | |
| <option value="Feminino">Feminino</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="js-form-message"> | |
| <label class="labels"> | |
| Celular com DDD | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="text" autocomplete="nope" | |
| class="form-control celular telephone" name="telephone" | |
| placeholder="(51) 9 9999-9999" aria-label="(51) 9 9999-9999" | |
| value="(51) 99999-9999"> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="js-form-message"> | |
| <label class="labels"> | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="email" autocomplete="nope" class="form-control email" | |
| name="email" placeholder="meuemail@email.com" | |
| aria-label="meuemail@email.com" required | |
| value="juliano.sil6@gmail.com"> | |
| </div> | |
| </div> | |
| <div class="col-md-6 col-sm-12"> | |
| <div class="js-form-message"> | |
| <label class="labels"> | |
| Senha | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="password" autocomplete="nope" class="form-control password" | |
| name="password" placeholder="Digite sua senha" | |
| aria-label="Digite sua senha" value="123456"> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| <div class="tab-content" id="myTabContent"> | |
| <div class="tab-pane fade active show" id="individual" role="tabpanel" | |
| aria-labelledby="tabs-icons-text-1-tab"> | |
| PLANO INDIVIDUAL | |
| </div> | |
| <div class="tab-pane fade" id="familia" role="tabpanel" | |
| aria-labelledby="tabs-icons-text-2-tab"> | |
| <div class="row"> | |
| <div class="col"> | |
| <div id="clonar"> | |
| <h3 class="title mt-3">Dependente <span class="nro">1</span> | |
| <button | |
| class="btn btn-danger btn-sm btn-icon-only remove_button" | |
| type="button" name="button"> | |
| <i class="fa fa-trash"></i> | |
| </button> | |
| </h3> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <label class="labels"> | |
| Nome | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="text" autocomplete="nope" | |
| class="form-control firstname" | |
| name="firstname" placeholder="Seu nome" | |
| aria-label="Seu nome" required | |
| value="Juliano"> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="js-form-message"> | |
| <label class="labels"> | |
| CPF | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="text" autocomplete="nope" | |
| class="form-control cpf" name="cpf" | |
| placeholder="000.000.000-00" | |
| aria-label="000.000.000-00" required | |
| value="000.000.001-91"> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="js-form-message"> | |
| <label class="labels"> | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="email" autocomplete="nope" | |
| class="form-control email" | |
| name="email" placeholder="meuemail@email.com" | |
| aria-label="meuemail@email.com" required | |
| value="juliano.sil6@gmail.com"> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="js-form-message"> | |
| <label class="labels"> | |
| Celular com DDD | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="text" autocomplete="nope" | |
| class="form-control celular telephone" | |
| name="telephone" | |
| placeholder="(51) 9 9999-9999" | |
| aria-label="(51) 9 9999-9999" | |
| value="(51) 99999-9999"> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| </div> | |
| <div class="clone_place"></div> | |
| <button class="btn btn-info btn-block add_button" type="button"> | |
| <i class="fa fa-plus"></i> Adicionar Dependente | |
| </button> | |
| <br> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-center text-white"> | |
| <small> | |
| Ao fazer o cadastro automaticamente você estará concordando com os termos de uso e | |
| política de privacidade do Rede de Vantagem | |
| </small> | |
| </p> | |
| </div> | |
| <div class="col-sm-12 col-md-6"> | |
| <div class="card"> | |
| <div class="container"> | |
| <h3 class="title mt-3">Forma de Pagamento</h3> | |
| <div class="nav-wrapper"> | |
| <ul class="nav nav-pills nav-fill flex-column flex-md-row" id="tabs-icons-text" | |
| role="tablist"> | |
| <li class="nav-item"> | |
| <a class="nav-link mb-sm-3 mb-md-0 active" id="cartao-de-credito-tab" | |
| data-toggle="tab" href="#cartao-de-credito" role="tab" | |
| aria-controls="cartao-de-credito" aria-selected="true"> | |
| <i class="ni ni-credit-card mr-2"></i> Cartão de Crédito | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link mb-sm-3 mb-md-0" id="boleto-bancario-tab" | |
| data-toggle="tab" href="#boleto-bancario" role="tab" | |
| aria-controls="boleto-bancario" aria-selected="false"> | |
| <i class="ni ni-money-coins mr-2"></i> Boleto | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="tab-content" id="myTabContent"> | |
| <div class="tab-pane fade show active" id="cartao-de-credito" role="tabpanel" | |
| aria-labelledby="cartao-de-credito-tab"> | |
| <style> | |
| .payment-flag-svg img { | |
| width: 60px; | |
| max-width: 60px; | |
| } | |
| </style> | |
| <div class="row"> | |
| <div class="col-12 text-center"> | |
| <span class="d-inline-block align-middle payment-flag"> | |
| <div | |
| class="chk-flag-option visa btn-creditcard-show payment-flag-svg"> | |
| <img src="http://rededevantagem.local/img/icons/common/master.svg" alt=""> | |
| </div> | |
| </span> | |
| <span class="d-inline-block align-middle payment-flag"> | |
| <div | |
| class="chk-flag-option master btn-creditcard-show payment-flag-svg"> | |
| <img src="http://rededevantagem.local/img/icons/common/visa.svg" alt=""> | |
| </div> | |
| </span> | |
| <span class="d-inline-block align-middle payment-flag"> | |
| <div | |
| class="chk-flag-option hiper btn-creditcard-show payment-flag-svg"> | |
| <img src="http://rededevantagem.local/img/icons/common/hiper.svg" alt=""> | |
| </div> | |
| </span> | |
| <span class="d-inline-block align-middle payment-flag"> | |
| <div | |
| class="chk-flag-option amex btn-creditcard-show payment-flag-svg"> | |
| <img src="http://rededevantagem.local/img/icons/common/amex.svg" alt=""> | |
| </div> | |
| </span> | |
| <span class="d-inline-block align-middle payment-flag"> | |
| <div | |
| class="chk-flag-option diners btn-creditcard-show payment-flag-svg"> | |
| <img src="http://rededevantagem.local/img/icons/common/other.svg" alt=""> | |
| </div> | |
| </span> | |
| <span class="d-inline-block align-middle payment-flag"> | |
| <div | |
| class="chk-flag-option elo btn-creditcard-show payment-flag-svg"> | |
| <img src="http://rededevantagem.local/img/icons/common/elo.svg" alt=""> | |
| </div> | |
| </span> | |
| </div> | |
| </div> | |
| <br> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <div class="js-form-message"> | |
| <label class="form-label"> | |
| Número do cartão | |
| </label> | |
| <input type="text" autocomplete="nope" | |
| class="form-control cardNumber" | |
| placeholder="**** **** **** ****" | |
| aria-label="**** **** **** ****" required | |
| value="4444222222222222"> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <label class="labels"> | |
| Nome do Titular | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="text" autocomplete="nope" class="form-control titular_nome" | |
| name="titular_nome" placeholder="Como impresso no cartão" | |
| aria-label="Seu nome" required value="Juliano Silva"> | |
| </div> | |
| <div class="col-md-6"> | |
| <label class="labels"> | |
| CPF do Titular | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="text" autocomplete="nope" | |
| class="form-control titular_cpf cpf" name="titular_cpf" | |
| placeholder="CPF do Titular" | |
| aria-label="Para emissão de nota fiscal" required | |
| value="000.000.001-91"> | |
| </div> | |
| </div> | |
| <br> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="js-form-message mb-4"> | |
| <label class="form-label"> | |
| Data de Expiração | |
| </label> | |
| <input type="text" autocomplete="nope" | |
| class="form-control cardExpirationDate" placeholder="MM/YYYY" | |
| aria-label="MM/YYYY" required value="01/2025"> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="js-form-message mb-4"> | |
| <label class="form-label"> | |
| Cód. de Segurança | |
| </label> | |
| <input type="text" autocomplete="nope" class="form-control cardCVC" | |
| maxlength="4" placeholder="3 ou 4 dígitos" aria-label="***" | |
| required value="123"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <div class="js-form-message"> | |
| <label class="labels"> | |
| Parcelamento | |
| <span class="text-danger">*</span> | |
| </label> | |
| <select class="form-control cardParcelas" data-trigger | |
| name="choices-single-default" id="choices-single-default"> | |
| <option value='12'>12 x R$ 19,98 C/Juros</option><option value='11'>11 x R$ 21,50 C/Juros</option><option value='10'>10 x R$ 23,32 C/Juros</option><option value='9'>9 x R$ 25,55 C/Juros</option><option value='8'>8 x R$ 28,34 C/Juros</option><option value='7'>7 x R$ 31,93 C/Juros</option><option value='6'>6 x R$ 36,72 C/Juros</option><option value='5'>5 x R$ 43,44 C/Juros</option><option value='4'>4 x R$ 53,52 C/Juros</option><option value='3'>3 x R$ 66,33 S/Juros</option><option value='2'>2 x R$ 99,50 S/Juros</option><option value='1'>1 x R$ 199,00 S/Juros</option> </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-pane fade" id="boleto-bancario" role="tabpanel" | |
| aria-labelledby="boleto-bancario-tab"> | |
| <div class="text-center"> | |
| <img src="http://rededevantagem.local/img/icons/common/billet.jpg" alt=""> | |
| </div> | |
| <br> | |
| <ol> | |
| <li>Boleto (somente à vista)</li> | |
| <li>Pagamentos com Boleto Bancário levam até 3 dias úteis para serem | |
| compensados e então terem os produtos liberados | |
| </li> | |
| <li>O Boleto será gerado por meio da plataforma Appmax</li> | |
| <li>Depois do pagamento, fique atento ao seu e-mail para acompanhar o envio | |
| do seu pedido (verifique também a caixa de SPAM) | |
| </li> | |
| </ol> | |
| <p> | |
| <strong>Produtos: <big>R$ 199,99</big></strong> | |
| </p> | |
| <br> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <label class="labels"> | |
| CPF (Para emissão da Nota Fiscal) | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="text" class="form-control titular_boleto_cpf cpf" | |
| name="titular_boleto_cpf" placeholder="CPF do Comprador" | |
| aria-label="CPF do Comprador" value="preencha"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| <button class="btn btn-success btn-block" type="submit">Finalizar Pedido</button> | |
| <hr> | |
| <p class="text-center"> | |
| <img src="http://rededevantagem.local/img/icons/common/secure.jpg" alt=""> | |
| </p> | |
| </div> | |
| </div> | |
| <p class="text-right text-white"> | |
| OBS.: Taxa de 2,99% a.m. | |
| <br> | |
| <small> | |
| Esta compra será processada pela Appmax | |
| </small> | |
| </p> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <footer class="py-5"> | |
| <div class="container"> | |
| <div class="row align-items-center justify-content-xl-between"> | |
| <div class="col-xl-6"> | |
| <div class="copyright text-center text-xl-left text-muted"> | |
| © 2018 <a href="https://www.rededevantagem.com.br" class="font-weight-bold ml-1" target="_blank">Rede de Vantagem</a> | |
| </div> | |
| </div> | |
| <div class="col-xl-6"> | |
| <ul class="nav nav-footer justify-content-center justify-content-xl-end"> | |
| <li class="nav-item"> | |
| <a href="https://www.rededevantagem.com.br/sobre" class="nav-link text-secondary" target="_blank">Sobre Nós</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="http://blog.rededevantagem.com.br" class="nav-link text-secondary" target="_blank">Blog</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> </div> | |
| <script src="http://rededevantagem.local/assets/js/plugins/jquery/dist/jquery.min.js"></script> | |
| <script src="http://rededevantagem.local/assets/js/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="http://rededevantagem.local/assets/js/argon-dashboard.min.js?v=1.1.0"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script> | |
| <script | |
| src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_pt_BR.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.min.js"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function () { | |
| var x = 1; | |
| var maxField = 0; | |
| $('#clonar').hide(); | |
| $('.menuSelectItem .nav-item a').click(function(){ | |
| maxField = $(this).attr('aria-valuenow'); | |
| $('#clonar').hide(); | |
| if($(this).attr('href') !== '#individual') { | |
| $('#clonar').show(); | |
| } | |
| }); | |
| $('.add_button').click(function () { | |
| if (x < maxField) { ++x; $('#clonar').clone(true).appendTo(".clone_place").find('.nro').attr("id","nro_"+x); $('#nro_'+x).text(x).html(x); } | |
| if (x >= maxField) { $('.add_button').hide(); } | |
| }); | |
| $('.clone_place').on('click', '.remove_button', function (e) { | |
| e.preventDefault(); $(this).parents('#clonar').remove(); x--; | |
| if (x < maxField) { $('.add_button').show(); } | |
| }); | |
| var SPMaskBehavior = function (val) { return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009'; }, spOptions = { onKeyPress: function (val, e, field, options) { field.mask(SPMaskBehavior.apply({}, arguments), options); } }; | |
| $(".js-validate").submit(function (e) { | |
| e.preventDefault(); | |
| $(".js-validate").validate({ | |
| // rules: { | |
| // name: "required", | |
| // email: { | |
| // required: true, | |
| // email: true | |
| // } | |
| // }, | |
| submitHandler: function (form) { | |
| // form.submit(); | |
| // form.preventDefault(); | |
| } | |
| }); | |
| }); | |
| $('.celular').mask(SPMaskBehavior, spOptions); | |
| $('.cpf').mask('000.000.000-00', {reverse: true}); | |
| $('.data_nascimento').mask('00/00/0000'); | |
| $('.cardNumber').mask('0000 0000 0000 0000'); | |
| $('.cardExpirationDate').mask('00/0000'); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment