Formulário em HTML5 funcional

24/09/2014

17

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?
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).
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
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:
Formulário Envio de Email
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

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar