Formulário em HTML5 funcional

24/09/2014

0

Boa tarde,
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

Rodolfo Nogueira

Responder

Post mais votado

04/10/2014

Rapaz, para processar os dados você vai precisar de uma página no back-end, seja ela PHP, Java, ASP, etc.
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

Joel Rodrigues
Responder

Mais Posts

04/10/2014

Marcio Araujo

Eu acho que existe formularios prontos.
Responder

04/10/2014

Joel Rodrigues

Eu acho que existe formularios prontos.
Existem, mas todos usam alguma linguagem server-side.
Responder

11/10/2014

Marcio Araujo

e usam um "serviço" externo ao site, os exemplos são aqueles formularios de "fale conosco", já testei um gratuito.
Responder

13/10/2014

Rodolfo Nogueira

Galera,

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');
?>
Responder

16/03/2015

Bianca Assone

Boa tarde, comecei a desenvolver web sites em html5 recentemente, mas estou tendo problemas com o envio de formulário. Também gostaria de desenvolver sem utilizar o php (apenas utilizando Java Script, Css, e Html), o formulário está pronto, mas quando eu tento o enviar, recebo uma mensagem de erro ( 404 NOT FOUND) mas não sei por quê!
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>
Responder

16/03/2015

Jothaz

Olha o correto e profissional é utilizar alguma linguagem de programação para este tipo de funcionalidade, como o Joel deixou claro.

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!
Responder

16/03/2015

Randrade

Esse erro ocorre pois nesta linha
<form method='post' action='biaassone@gmail.com'>
você está chamando o seu e-mail e não o método para isso. Logo não está encontrando este método, ocasionando o 404 NOT FOUND (Não Encontrado).

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.
Responder

16/03/2015

Thiago Santana

Dá uma olhada neste link:
[url:descricao=Formulário Envio de Email ]http://www.tutorialspark.com/html5/HTML5_email_mailto.php[/url]
Responder

18/03/2015

Bianca Assone

Funcionou sim, MUITO obrigada ! eu sei que é apenas uma gambiarra, mas estou começando agora e ainda vou levar um tempo ate aprender php, comecei esse mês em html5 e só com ebooks e video aulas, kk mas de qqr forma, vlw :)
Responder

18/03/2015

Bianca Assone

Obrigada Randrade, ja consegui fazer utilizando o <form action="mailto:seu-email@seu-provedor.com" method="post" enctype="text/plain"> (outlook).. mas que bom que vc ficará feliz em me responder caso haja dúvidas pq provavelmente terei varias x.x kk abç
Responder

21/03/2015

Gabriela Monte

O que seria esse formulario funcional?
Responder

23/03/2015

Bianca Assone

O que seria esse formulario funcional?

Um formulário funcional é um meio de comunicação entre você e o visitante do seu site, geralmente vem nomeado como "fale conosco"
Responder

23/03/2015

Gabriela Monte

Ah, existem uns gratuitos, já ví umas demonstrações.
Responder

23/03/2015

Jothaz

Ah, existem uns gratuitos, já ví umas demonstrações.


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.
Responder

23/03/2015

Gabriela Monte

Entendi Jothaz, mas acho que existem soluções prontas para esse caso, pagas e gratuitas, só não estou lembrando o nome agora.
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar