I have a code of a form, in fact I joined 2 codes to be able to create this, but in the old code the form was directed to another page processo.php
I wanted to send the form and a successful message appears in the code.
index.html
$(document).ready(function() {
$('#contact_form').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
primeiro_nome: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Por favor, forneça seu primeiro nome'
}
}
},
ultimo_nome: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Por favor, forneça seu sobrenome'
}
}
},
email_contato: {
validators: {
notEmpty: {
message: 'Por favor forneça o seu endereço de e-mail'
},
email_contato: {
message: 'Por favor, forneça um endereço de email válido'
}
}
},
telefone: {
validators: {
notEmpty: {
message: 'Por favor, forneça seu número de telefone'
},
telefone: {
country: 'BR',
message: 'Por favor, forneça um número de telefone válido com código de área'
}
}
},
nick_ts: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Por favor, forneça seu Nick no ts'
}
}
},
cidade: {
validators: {
stringLength: {
min: 4,
},
notEmpty: {
message: 'Por favor, forneça sua cidade'
}
}
},
estado: {
validators: {
notEmpty: {
message: 'Por favor, selecione seu estado'
}
}
},
mensagem: {
validators: {
stringLength: {
min: 10,
max: 600,
message:'Por favor, insira pelo menos 10 caracteres e não mais do que 600'
},
notEmpty: {
message: 'Por favor, fale um pouco sobre'
}
}
}
}
})
.on('success.form.bv', function(e) {
$('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
$('#contact_form').data('bootstrapValidator').resetForm();
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function(result) {
console.log(result);
}, 'json');
});
});
#success_message{ display: none;}
<!DOCTYPE html>
<html lang="br" >
<head>
<meta charset="UTF-8">
<title>Formulário para equipe ESBSB</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"type="text/javascript"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<form class="well form-horizontal" action="processo.php" method="post" id="contact_form" onSubmit="success_message">
<fieldset>
<!-- Nome do formolario -->
<legend>Entre em Contato!</legend>
<!-- texto-->
<div class="form-group">
<label class="col-md-4 control-label">Primeiro Nome</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="primeiro_nome" id="primeiro_nome" placeholder="Primeiro Nome" class="form-control" type="text">
</div>
</div>
</div>
<!-- texto-->
<div class="form-group">
<label class="col-md-4 control-label" >Sobre nome</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="ultimo_nome" id="ultimo_nome" placeholder="Sobre nome" class="form-control" type="text">
</div>
</div>
</div>
<!-- texto-->
<div class="form-group">
<label class="col-md-4 control-label">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email_contato" id="email_contato" placeholder="Endereço de E-Mail" class="form-control" type="text">
</div>
</div>
</div>
<!-- numero-->
<div class="form-group">
<label class="col-md-4 control-label">Telefone #</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="telefone" id="telefone" placeholder="(022)98184 7740" class="form-control" type="text">
</div>
</div>
</div>
<!-- texto-->
<div class="form-group">
<label class="col-md-4 control-label">Nick no TS</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-info-sign"></i></span>
<input name="nick_ts" id="nick_ts" placeholder="Nick" class="form-control" type="text">
</div>
</div>
</div>
<!-- texto-->
<div class="form-group">
<label class="col-md-4 control-label">Cidade</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="cidade" placeholder="cidade" class="form-control" type="text">
</div>
</div>
</div>
<!-- selecionar -->
<div class="form-group">
<label class="col-md-4 control-label">Estado</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="estado" class="form-control selectpicker" >
<option value=" " >Selecione o seu Estado</option>
<option value="">Selecione</option>
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AP">Amapá</option>
<option value="AM">Amazonas</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espirito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MT">Mato Grosso</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RO">Rondônia</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SP">São Paulo</option>
<option value="SE">Sergipe</option>
<option value="TO">Tocantins</option>
</select>
</div>
</div>
</div>
<!-- opção -->
<div class="form-group">
<label class="col-md-4 control-label">Tem menos de 14 anos?</label>
<div class="col-md-4">
<div class="radio">
<label>
<input type="radio" name="idade" value="sim" /> Sim
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="idade" value="não" /> Não
</label>
</div>
</div>
</div>
<!-- texto -->
<div class="form-group">
<label class="col-md-4 control-label">Sobre</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="mensagem" id="mensagem" placeholder="Escreva sua mensagem"></textarea>
</div>
</div>
</div>
<!-- mensagem -->
<div class="alert alert-success" role="alert" id="success_message">Sucesso <i class="glyphicon glyphicon-thumbs-up"></i> Agradecemos por entrar em contato. Em breve, entraremos em contato com você.</div>
<!-- butao -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-warning" >Enviar <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
</div>
</div><!-- /.container -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
process.php
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Obrigado!</title>
</head>
<body>
<h1>Obrigado por enviar seus dados!.</h1>
<p>Nós recebemos sua mensagem e entraremos em contato.</p>
</body>
</html>
<?php
if(isset($_POST['email_contato'])) {
include 'config.php';
$full_name = $_POST['primeiro_nome']; // obrigatorio
$email_from = $_POST['email_contato']; // obrigatorio
$telephone = $_POST['nick_ts']; // obrigatorio
$comments = $_POST['mensagem']; // obrigatorio
$ultimo_nome = $_POST['ultimo_nome']; // obrigatorio
$telefone = $_POST['telefone']; // obrigatorio
$cidade = $_POST['cidade']; // obrigatorio
$estado = $_POST['estado']; // obrigatorio
$idade = $_POST['idade']; // obrigatorio
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(preg_match($email_exp,$email_from)==0) {
$error_message .= 'O endereço de e-mail que você inseriu nao parece ser valido.<br />';
}
if(strlen($full_name) < 2) {
$error_message .= 'Seu nome não parece ser valido.<br />';
}
if(strlen($comments) < 2) {
$error_message .= 'Os comentarios que você inseriu nao parecem ser validos.<br />';
}
if($antispam <> $antispam_answer) {
$error_message .= 'A resposta do Anti-Spam que você digitou não esta correta.<br />';
}
if(strlen($error_message) > 0) {
}
$email_message = "Detalhes do formulario abaixo.\r\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:");
return str_replace($bad,"",$string);
}
$email_message .= "Primeiro Nome: ".clean_string($full_name)."\r\n";
$email_message .= "Sobre Nome: ".clean_string($ultimo_nome)."\r\n";
$email_message .= "Email: ".clean_string($email_from)."\r\n";
$email_message .= "Nick no ts: ".clean_string($telephone)."\r\n";
$email_message .= "Telefone: ".clean_string($telefone)."\r\n";
$email_message .= "Cidade: ".clean_string($cidade)."\r\n";
$email_message .= "Estado: ".clean_string($estado)."\r\n";
$email_message .= "Tem 14 anos?: ".clean_string($idade)."\r\n";
$email_message .= "Mensagem: ".clean_string($comments)."\r\n";
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($email_to, $email_subject, $email_message, $headers);
header("Location: $obrigado");
?>
<script>location.replace('<?php echo $obrigado;?>')</script>
<?php
}
die();
?>