Formulário em HTML5 funcional
24/09/2014
0
Estou iniciando com HTML5 e gostaria de tirar umas dúvida.
Preciso criar um formulário de contato, porém não gostaria de usar o PHP. Teria como fazer ??
O formulário validado eu consegui fazer, não consegui fazer com que fosse adicionado o arquivo no corpo do e-mail... Para o formulário funcionar, criei uma tela em PHP para testar e funcionou blz..
Quero deixar de criar esta página em PHP, e fazer com que apareça uma mensagem "Seu e-mail foi enviado com sucesso" e permanecer na página de formulário e que o mesmo seja enviado via e-mail.
Segue código do form com o php
<form action="contato.php" method="post" enctype="multipart/form-data" class="contact_form">
<div class="row contact-form">
<div class="col-md-4">
<label for="nome-id" class="required">nome:</label>
<input name="nome" type="text" required id="nome" />
</div> <!-- /.col-md-4 -->
<div class="col-md-4">
<label for="email-id" class="required">Email:</label>
<input type="email" name="email"required />
</div> <!-- /.col-md-4 -->
<div class="col-md-4">
<label for="assunto-id">Assunto:</label>
<input type="url" name="web" required />
<label for="file"></label>
<input type="file" name="file" id="file">
<div class="col-md-12">
<label for="message-id" class="required">Messagem:</label>
<textarea name="mensagem" cols="40" rows="6" required id="mensagem" ></textarea>
</div>
<!-- /.col-md-12 -->
<div class="col-md-12">
<button class="submit-btn" type="submit">Enviar</button>
</div> <!-- /.submit-btn -->
</div> <!-- /.col-md-12 -->
</form>
deu p entender o que quero fazer?
Rodolfo Nogueira
Post mais votado
04/10/2014
Com relação a voltar para a página do formulário, você pode dar um redirect de volta pra ela, passando uma variável temporária a ser exibida na página do form (mas aí seria uma variável PHP). Ou você pode submeter os dados via Ajax e de acordo com o resultado, exibir uma mensagem (aí não precisaria da variável, mas precisa da página PHP para processar os dados).
Joel Rodrigues
Mais Posts
04/10/2014
Joel Rodrigues
11/10/2014
Marcio Araujo
13/10/2014
Rodolfo Nogueira
Pesquisando na web, consegui fazer um Formulário desta forma. Porém tive que criar dois arquivos em PHP.
Um de configuração e outro contato, porém, a mensagem de retorno de sucesso é apresentada em cima do formulário.
Eis o código - Arquivo HTML:
<form id="contactform" action="contact/contact.php" method="post" class="validateform" name="send-contact">
<div id="sendmessage">
Sua mensagem foi enviada. Obrigado!
</div>
<div class="row">
<div class="col-lg-4 field">
<input type="text" name="name" placeholder="* Digite seu nome completo" data-rule="maxlen:4" data-msg="Por favor, insira pelo menos 4 caracteres" />
<div class="validation">
</div>
</div>
<div class="col-lg-4 field">
<input type="text" name="email" placeholder="* Digite seu e-mail" data-rule="email" data-msg="Por favor, informe um e-mail valido" />
<div class="validation">
</div>
</div>
<div class="col-lg-4 field">
<input type="text" name="subject" placeholder="Insira o assunto" data-rule="maxlen:4" data-msg="Por favor, insira pelo menos 4 caracteres" />
<div class="validation">
</div>
</div>
<div class="col-lg-12 margintop10 field">
<textarea rows="12" name="message" class="input-block-level" placeholder="* Digite a mensagem..." data-rule="required" data-msg="Por favor, escreva algo"></textarea>
<div class="validation">
</div>
<p>
<button class="btn btn-theme margintop10 pull-left" type="submit">Enviar Mensagem </button>
<span class="pull-right margintop20">*Campos obrigatórios</span>
</p>
</div>
</div>
</form>
- Arquivo PHP > contact.php
<?php
include 'config.php';
error_reporting (E_ALL ^ E_NOTICE);
$post = (!empty($_POST)) ? true : false;
if($post)
{
$error = '';
$recebenome = $_POST["name"];
$recebemail = $_POST["email"];
$recebeassunto = $_POST["subject"];
$recebemsg = $_POST["message"];
// Definindo os cabeçalhos do e-mail
$headers = "MIME-Version: 1.0\n";
$headers .= "Content-type:text/html; charset=utf-8 \n";
$headers .= "From: Formulario de contato <contato@seudominio.com.br> \n";
// Vamos definir agora o destinatário do email, ou seja, VOCÊ ou SEU CLIENTE
$para = "seuemail@dominio.com.br";
// Definindo o aspecto da mensagem
$mensagem = "<h3>De:</h3> ";
$mensagem .= $recebenome;
$mensagem .= "<h3>Contato:</h3>";
$mensagem .= $recebefone.' - E-mail: '.$recebemail;
$mensagem .= "<h3>Observações</h3>";
$mensagem .= "<p>";
$mensagem .= $recebemsg;
$mensagem .= "</p>";
// Enviando a mensagem para o destinatário
mail($para,'Contato Pelo Site - De: '.$recebenome,$mensagem,$headers);
// Resposta Automática, preparando o e-mail com a resposta.
$mensagem2 = "<p>Olá <strong>" . $recebenome . "</strong>.<p>Agradecemos sua visita ao nosso site e a oportunidade de receber-mos seu contato.
<br />Em breve responderemos sua questão através de correio eletrônico.</p><br><p>OBS.: Não é necessário responder esta mensagem!</p><br>";
$mensagem2 .= "<p>Atenciosamente<br />Equipe ".$empresa."</p>";
// Enviando a resposta sutomática
$envia = mail($recebemail,"Agradecemos sua visita ao nosso site",$mensagem2,$headers);
if(!$error)
{
$mail = mail(WEBMASTER_EMAIL, $subject, $message,
"From: ".$name." <".$email.">\r\n"
."Reply-To: ".$email."\r\n"
."X-Mailer: PHP/" . phpversion());
if($mail)
{
echo 'OK';
}
}
}
?>
Arquivo > config.php
<?php
// To
define("WEBMASTER_EMAIL", 'seu@servidor.com');
?>
16/03/2015
Bianca Assone
meu código é o seguinte:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Tudo sobre Google Glass</title>
<link rel="stylesheet" type="text/css" href="_css/estilo.css"/>
<link rel="stylesheet" type="text/css" href="_css/form.css"/>
<script src="_javascript/funcoes.js"></script>
</head>
<body>
<div id="interface">
<header id="cabecalho">
<hgroup>
<h1>Google Glass</h1>
<h2>A revolução do Google está chegando</h2>
</hgroup>
<img id="icone" src="_imagens/contato.png"/>
<nav id="menu">
<h1>Menu Principal</h1>
<ul>
<li onmouseover="mudaFoto('_imagens/home.png')"
onmouseout="mudaFoto('_imagens/contato.png')"><a href="index.html">Home</a></li>
<li onmouseover="mudaFoto('_imagens/especificacoes.png')"
onmouseout="mudaFoto('_imagens/contato.png')"><a href="specs.html">Especificações</a>
</li>
<li onmouseover="mudaFoto('_imagens/fotos.png')"
onmouseout="mudaFoto('_imagens/contato.png')"><a href="fotos.html">Fotos</a></li>
<li onmouseover="mudaFoto('_imagens/multimidia.png')"
onmouseout="mudaFoto('_imagens/contato.png')"><a
href="multimidia.html">Multimídia</a></li>
<li onmouseover="mudaFoto('_imagens/contato.png')"
onmouseout="mudaFoto('_imagens/contato.png')"><a href="fale-conosco.html">Fale
conosco</a></li>
</ul>
</nav>
</header>
<article id="noticia-principal">
<header id="cabecalho-noticia">
<hgroup>
<h3>Fale Conosco > Contato</h3>
<h1>Formulário de Contato</h1>
<h2>por Bianca Assone</h2>
<h3 class="direita">Atualizado em 16/Março/2015</h3>
</hgroup>
</header>
<form method='post' action='biaassone@gmail.com'>
<fieldset id="usuario">
<legend>Identificação do Usuário</legend>
<p><label for="cNome">Nome:</label>
<input type="text" name="tNome" id="cNome" size="60" maxlength="30"placeholder="Nome Completo"/></p>
<p><label for="cEmail">E-mail:</label>
<input type="email" name="tEmail" id="cEmail" size="60" maxlength="40"/></p>
<fieldset id="sexo">
<legend>Sexo</legend>
<input type="radio" name="tSexo" id="cMasc" checked/><label for="cMasc">Masculino</label></br>
<input type="radio" name="tSexo" id="cFem"/> <label for="cFem">Feminino</label>
</fieldset>
<p><label for="cNasc">Data de Nascimento:
<input type="date" name="tNasc" id="cNasc" </p>
</fieldset>
<fieldset id="endereco">
<legend>Endereço do Usuário</legend>
<p><label for="cRua">Logradouro:</label>
<input type="text" name="tRua" id="cRua" size="60" maxlength="80" placeholder="Rua, Av, Trava, ..."/></p>
<p><label for="cNum">Número:</label>
<input type="number" name="tNum" id="cNum" min="0" max="99999"/></p>
<p><label for="cEst">Estado:</label>
<select name="tEst" id="cEst"></p>
<option value="0">Selecione o Estado</option>
<option value="sp">São Paulo</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="se">Sergipe</option>
<option value="to">Tocantins</option>
</select> </p>
<p><label for="cCid">Cidade:</label>
<input type="text" name="tCid" id="cCid" maxlength="40" size="50" placeholder="Sua Cidade" list="cidades"/></p>
<datalist id="cidades">
<option value="Sao Caetano do Sul"></option>
<option value="São Paulo"></option>
<option value="Santo André"></option>
<option value="São Bernardo"></option>
<option value="Diadema"></option>
</datalist>
</fieldset>
<fieldset id="mensagem">
<legend>Mensagem do Usuário</legend>
<p><label for="cUrg">Grau de Urgência:</label>
Mín<input type="range" name="tUrg" id="cUrg" min="0" max="10" step="2"/>Máx</p>
<p><label for="cMsg">Mensagem:</label>
<textarea name="tMsg" id="cMsg" cols="35" rows="5" placeholder="Deixe aqui sua mensagem"></textarea></p>
</fieldset>
<button>Enviar mensagem</button>
</form>
</article>
<footer id="rodape">
<p>Copyright © 2013 - by Bianca Assone <br/>
<a href="http://facebook.com/biancaassone" target="_blank">Facebook</a>
</p>
</footer>
</div>
</body>
</html>
16/03/2015
Jothaz
Do contrário fica uma gambiarra sem fim, agora se você não se importa em aprender e quer somente um quebra galho, não sei se ainda funciona mas antigamente era possível enviar e-mail diretamente do html, mas resslato mais uma vez é um tremenda de uma gambiarra:
<form action="mailto:seu-email@seu-provedor.com" method="post" enctype="text/plain">
Ou via javascript:
<input type="button" onclick="montaEmail(this.form)" value="Enviar"> function montaEmail(form) { var str = 'mailto:seuemail@email.com?'; str += 'cc=copia1@email.com, copia2@email.com&'; str += 'bcc=copiaoculta@email.com&'; str += 'subject=Assunto do E-mail&'; str += 'body='; for (i=0;i<form.elements.length-1;i++) { str += '%0A' + form.elements[i].name + ' = ' + form.elements[i].value; } window.location.href = str; }
Não sei se ainda funciona!
16/03/2015
Randrade
<form method='post' action='biaassone@gmail.com'>
Como já foi dito, para realizar o que deseja, você precisará usar uma linguagem back-end para desenvolver este método, ou usar algum "serviço" já existente.
Se estiver uma dúvida, abra outra pergunta, que ficarei feliz em lhe ajudar.
16/03/2015
Thiago Santana
[url:descricao=Formulário Envio de Email ]http://www.tutorialspark.com/html5/HTML5_email_mailto.php[/url]
18/03/2015
Bianca Assone
18/03/2015
Bianca Assone
23/03/2015
Bianca Assone
Um formulário funcional é um meio de comunicação entre você e o visitante do seu site, geralmente vem nomeado como "fale conosco"
23/03/2015
Jothaz
O que a Bia queira era um exemplo de envio de e-mail através de formulário usando somente HMTL sem utilizar uma linguagem de programação.
O formulário ela já possuía.
23/03/2015
Gabriela Monte
Clique aqui para fazer login e interagir na Comunidade :)