Formulário em HTML5 funcional

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

Eu acho que existe formularios prontos.

Existem, mas todos usam alguma linguagem server-side.

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

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

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>

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:



Ou via javascript:



Não sei se ainda funciona!

Esse erro ocorre pois nesta linha 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.

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

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 :)

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ç

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"

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.

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

Olá Gabriela,

Essas soluções no caso, em grande parte utilizam outra linguagem para realizar tal serviço.

Você encontra free ou paga, basta uma simples consulta no google.

Porém a dúvida de somente HTML, eu particularmente desconheço.

Claro que existe o "MailTO", porém não é uma funcionalidade muito utilizada nos dias atuais, onde existem N maneiras de se fazer a mesma função.

Com eu postei existem várias gambiarras, inclusive usando Javascript, só que não é a solução aconselhável e hoje a linguagens de programação estão tão acessíveis que não se justifica não aprendê-las.

Eu sei que só com HTML não tem como, pelo menos eu nunca ouvi falar :-)

Me desculpe corrigí-la, mas você esta enganada.

Se você ler o meu post acima verá que postei exemplo de enviar utilizado o mailto somente com html ou mesmo utilizando Javasctript.

A questão é que se trata de uma gambiarra, que pode funcionar em determinados casos ou mesmo não funcionar. Mas possível é!

Então é melhor se dar ao trabalho de adaptar um exemplo de alguma linguagem de programação, pois existem milhares de exemplos na web.

Gambiarra, rsrsrsrs...tambem acho melhor usar algo mais confiavel.

HTML COde


PHP Code


For more information please click on beow give link.
http://www.phpinterview.in/web-development/php-interview-questions-and-answers