Skip to content

Instantly share code, notes, and snippets.

@ojulianos

ojulianos/gist:2bcab80a81ac4eb49fb011e680009ab2

Created May 14, 2020 20:51
Show Gist options
  • Save ojulianos/2bcab80a81ac4eb49fb011e680009ab2 to your computer and use it in GitHub Desktop.
Save ojulianos/2bcab80a81ac4eb49fb011e680009ab2 to your computer and use it in GitHub Desktop.
Download ZIP
formulario
Raw
gistfile1.txt
<!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">
Email
<span class="text-danger">*</span>
</label>
<input type="email" autocomplete="nope" class="form-control email"
name="email" placeholder="[email protected]"
aria-label="[email protected]" required
value="[email protected]">
</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">
Email
<span class="text-danger">*</span>
</label>
<input type="email" autocomplete="nope"
class="form-control email"
name="email" placeholder="[email protected]"
aria-label="[email protected]" required
value="[email protected]">
</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">
&copy; 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