"Formulário de Contato Azul"
Bootstrap 3.3.0 Snippet by fabianosantosnet

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div class="container">
<div class="row">
<form class="form-horizontal" id="frmcontatoazul">
<fieldset>
<!-- Form Name -->
<legend>Contato</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="txtinputnome">Nome</label>
<div class="col-md-8">
<input id="txtinputnome" name="txtinputnome" placeholder="Escreva seu nome completo" class="form-control input-md" required="required" type="text" />
<span class="help-block">help</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="txtinputemail">Email</label>
<div class="col-md-8">
<input id="txtinputemail" name="txtinputemail" placeholder="Coloque um email válido" class="form-control input-md" required="required" type="email" />
<span class="help-block">help</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="txtinputassunto">Assunto</label>
<div class="col-md-8">
<input id="txtinputassunto" name="txtinputassunto" placeholder="Informe do que se trata" class="form-control input-md" required="required" type="text" />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#frmcontatoazul
{
padding:18px;
width:680px
}
#frmcontatoazul fieldset
{
border:1px double #20a;
padding:10px;
border-radius:4px
}
#frmcontatoazul fieldset .form-group
{
color:#30a
}
#frmcontatoazul fieldset legend
{
background-color:#20a;
color:#ffe;
padding:10px;
margin:4px;
margin-bottom:20px;
border-radius:8px
}
#frmcontatoazul #singlebutton
{
margin-top:20pt
}
#frmcontatoazul .help-block
{
display:none
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready
(
function()
{
$('#btnenviar').click
(
function(e)
{
$inNome =$('#txtinputnome');
$inEmail =$('#txtinputemail');
$inAssunto =$('#txtinputassunto');
$inArea =$('#txtinputarea');
$btnEnviar =$('#btnenviar');
var emailformat = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var latinformat=/[^a-zA-Z\-\'\ ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏàáâãäåæçèéêëìíîïÐÑÒÓÔÕÖØÙÚÛÜÝÞßðñòóôõöøùúûüýþÿ]/i;
if($inNome.val().length<=2 || latinformat.test($inNome.val()))
{
e.preventDefault();
$('#txtinputnome + span').toggle().html("Informe um nome válido !");
$inNome.focus();
}
else if(!emailformat.test($inEmail.val()))
{
e.preventDefault();
$('#txtinputemail + span').toggle().html("Informe um e-mail válido !");
$inEmail.focus();
}
else if($inAssunto.val().length<=2 || !latinformat.test($inAssunto.val()))
{
e.preventDefault();
$('#txtinputassunto + span').toggle().html("Informe um assunto válido !");
$inAssunto.focus();
}
else if($inArea.val().length<=2 || !latinformat.test($inArea.val()))
{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Paper Dashboard PRO

Questions / Comments: