Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Sandmann

Html form com sendmail php e resposta na mesma pagina do form

Recommended Posts

Bom tenho um website com essa estrutura!

 

<html>

<body>

<form name="formulario" method="post" action="envio.php" id="contact" class="form" />

<div class="contact_inputs">

<input type="text" name="nome" class="field-name" id="nome" title="Nome *" value="Nome *" />
<input type="text" name="email" class="field-email" id="email" title="Email *" value="Email *" maxlength="250" />
</div>
<textarea name="mensagem" class="field-message" id="textarea" cols="45" rows="5" title="Mensagem *">Mensagem *</textarea>
<input type="reset" name="reset" id="reset" value="" />
<input type="submit" name="submit" class="feedback_go" id="submit" value="" />

</form>

</body>

</html>

 

Bom eu gostaria de mandar que tive-se a requisição para 'envio.php'.

Acho que esse é meu codigo em php e funciona!

 

<?php
if(!empty($_POST)){
$cab = "From: ".$_POST['nome']." <".$_POST['email'].">\n";

$mensagem = "Contato via site - Site.com.br\n";
$mensagem.= "Nome: ".$_POST['nome']." \n";
$mensagem.= "Email: ".$_POST['email']." \n";
$mensagem.= "Mensagem:". $_POST['mensagem'];

if(mail("Contato@site.com.br", "Formulário de Contato - site.com.br", $mensagem,$cab)){
	echo "<script type=\"text/javascript\">alert(\"Sua mensagem foi enviada com sucesso.\");history.go(-1);</script>\n";
}
else{
	echo "<script type=\"text/javascript\">alert(\"Ocorreu um erro ao tentar enviar sua mensagem.\");history.go(-1);</script>\n";
}
}
else{
header("Location: contato.html");
}
?> 

 

Agora a questão é, como faço para ao contrario do que está ocorrendo, eu quero que suma o formulário em HTML lá o <form></form> que fiz, e apresenta a mensagem na mesma pagina ‘<h1>Enviado com Sucesso!</h1>’ ‘<h1>Em breve entraremos em contato.</h1>’, como faço isso?

Compartilhar este post


Link para o post
Compartilhar em outros sites

amigo faça isso na página envio.php...

em vez de usar:

echo "<script type=\"text/javascript\">alert(\"Sua mensagem foi enviada com sucesso.\");history.go(-1);</script>\n";

 

user isso:

echo "<h1>Enviado com Sucesso!</h1><br/><h1>Em breve entraremos em contato.</h1>";

Compartilhar este post


Link para o post
Compartilhar em outros sites
Agora a questão é, como faço para ao contrario do que está ocorrendo, eu quero que suma o formulário em HTML lá o <form></form> que fiz, e apresenta a mensagem na mesma pagina ‘<h1>Enviado com Sucesso!</h1>’ ‘<h1>Em breve entraremos em contato.</h1>’, como faço isso?

 

amigo faça isso na página envio.php...

em vez de usar:

echo "<script type=\"text/javascript\">alert(\"Sua mensagem foi enviada com sucesso.\");history.go(-1);</script>\n";

 

user isso:

echo "<h1>Enviado com Sucesso!</h1><br/><h1>Em breve entraremos em contato.</h1>";

Não. Ele não quer que a página seja redirecionada. O que você precisa fazer, é usar jQuery, AJAX. Um exemplo básico seria:

 

AJAX.js

$.ajax({
    dataType: 'json',
    data: $('#seuForm').serialize(),
    type: 'post',
    cache: false,
    url: 'arquivo.php',
    beforeSubmit: function(){
        // faz aqui o tratamento de campos vazios
    },
    success: function(data){
        var object = $.parseJSON(data);
        if(object.success){
            $('.form').hide();
            $('.message').html(object.message);
        }
    },
    error: function(data){
        $('.form').show();
        var object = $.parseJSON(data);
        alert(object.message);
    }
},'json')

 

arquivo.php

<?php
       $cab = "From: ".$_POST['nome']." <".$_POST['email'].">\n";

       $mensagem = "Contato via site - Site.com.br\n";
       $mensagem.= "Nome: ".$_POST['nome']." \n";
       $mensagem.= "Email: ".$_POST['email']." \n";
       $mensagem.= "Mensagem:". $_POST['mensagem'];

       if(mail("Contato@site.com.br", "Formulário de Contato - site.com.br", $mensagem,$cab)){
             $data['message'] = 'Enviado com sucesso. Em breve entraremos em contato!';
             $data['suucess'] = true;
       }
       else{
             $data['message'] = 'Ocorreu um erro ao tentar enviar sua mensagem';
             $data['suucess'] = false;  
       }

       echo json_encode($data);
?> 

 

index.html

<html>

<body>
<div class="message"></div>
<form name="formulario" method="post" action="envio.php" id="contact" class="form" />

<div class="contact_inputs">

<input type="text" name="nome" class="field-name" id="nome" title="Nome *" value="Nome *" />
<input type="text" name="email" class="field-email" id="email" title="Email *" value="Email *" maxlength="250" />
</div>
<textarea name="mensagem" class="field-message" id="textarea" cols="45" rows="5" title="Mensagem *">Mensagem *</textarea>
<input type="reset" name="reset" id="reset" value="" />
<input type="submit" name="submit" class="feedback_go" id="submit" value="" />

</form>

</body>

</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não. Ele não quer que a página seja redirecionada. O que você precisa fazer, é usar jQuery, AJAX. Um exemplo básico seria:

 

AJAX.js

$.ajax({
    dataType: 'json',
    data: $('#seuForm').serialize(),
    type: 'post',
    cache: false,
    url: 'arquivo.php',
    beforeSubmit: function(){
        // faz aqui o tratamento de campos vazios
    },
    success: function(data){
        var object = $.parseJSON(data);
        if(object.success){
            $('.form').hide();
            $('.message').html(object.message);
        }
    },
    error: function(data){
        $('.form').show();
        var object = $.parseJSON(data);
        alert(object.message);
    }
},'json')

 

arquivo.php

<?php
       $cab = "From: ".$_POST['nome']." <".$_POST['email'].">\n";

       $mensagem = "Contato via site - Site.com.br\n";
       $mensagem.= "Nome: ".$_POST['nome']." \n";
       $mensagem.= "Email: ".$_POST['email']." \n";
       $mensagem.= "Mensagem:". $_POST['mensagem'];

       if(mail("Contato@site.com.br", "Formulário de Contato - site.com.br", $mensagem,$cab)){
             $data['message'] = 'Enviado com sucesso. Em breve entraremos em contato!';
             $data['suucess'] = true;
       }
       else{
             $data['message'] = 'Ocorreu um erro ao tentar enviar sua mensagem';
             $data['suucess'] = false;  
       }

       echo json_encode($data);
?> 

 

index.html

<html>

<body>
<div class="message"></div>
<form name="formulario" method="post" action="envio.php" id="contact" class="form" />

<div class="contact_inputs">

<input type="text" name="nome" class="field-name" id="nome" title="Nome *" value="Nome *" />
<input type="text" name="email" class="field-email" id="email" title="Email *" value="Email *" maxlength="250" />
</div>
<textarea name="mensagem" class="field-message" id="textarea" cols="45" rows="5" title="Mensagem *">Mensagem *</textarea>
<input type="reset" name="reset" id="reset" value="" />
<input type="submit" name="submit" class="feedback_go" id="submit" value="" />

</form>

</body>

</html>

 

Você pode me ensinar como faço esse tipo de tratamento?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Amigo, acabei de lhe mostrar/ensinar no post #3

Compartilhar este post


Link para o post
Compartilhar em outros sites

você está utilizando a biblioteca jQuery?...

 

você precisa chamar a biblioteca em sua página.

 

tente usar esse link:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Compartilhar este post


Link para o post
Compartilhar em outros sites

ou mais simples eh isso

<?php
if($_POST['txt']){

//aqui seu script de enviar
echo "mensagem";

}
?>
<form method=post >
aqui vai os formularios

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ainda não consegui!

 

A pagina INDEX é!

 

<!DOCTYPE html>
<html class="ie ie6" lang="en">
<html class="ie ie7" lang="en">
<html class="ie ie8" lang="en">
<html lang="en">
<head>

   <!-- Basico de pagina
 ================================================== -->
<meta charset="utf-8" />
<title>SiteTitle.com.br</title>
<meta name="description" content="" />
   <meta name="keywords" content="Site,design, desenho, projeto" />
<meta name="author" content="Sandmann" />

<!-- Suporte para Mobile
 ================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<!-- CSS
 ================================================== -->
<link rel="stylesheet" href="css/fonts/stylesheet.css" />
   <link rel="stylesheet" href="css/style.css" />
   <link rel="stylesheet" href="" id="css_skin" />    
   <link rel="stylesheet" href="css/content_css.css" id="css_skin" />
<link rel="stylesheet" href="" id="css_color" />
   <link rel="stylesheet" href="css/patterns/lines1.css" id="css_pattern">
<link rel="stylesheet" href="css/layout/layout_background.css" id="css_layout">

<link rel="stylesheet" href="css/skeleton.css" />

   <link rel="stylesheet" href="css/plugins/camera.css" />
   <link rel="stylesheet" href="css/plugins/elastislide.css" />
   <link rel="stylesheet" href="css/plugins/prettyPhoto.css" />
   <link rel="stylesheet" href="css/plugins/supersized.css" />
   <link rel="stylesheet" href="css/plugins/supersized.shutter.css" />
   <link rel="stylesheet" href="css/color_panel.css" />    

<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<link rel="stylesheet" href="css/ie_fix.css">

<!-- JS
================================================== -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
   <script type='text/javascript' src='js/jquery.min.js'></script>
   <script type="text/javascript" src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js"></script>    
   <script type='text/javascript' src='js/jquery.mobile.customized.min.js'></script>
   <script type='text/javascript' src='js/jquery.cookie.js'></script>
   <script type='text/javascript' src='js/jquery.easing.1.3.js'></script> 
   <script type="text/javascript" src="js/jquery.elastislide.js"></script>
   <script type='text/javascript' src='js/camera.min.js'></script> 	 	
<script type='text/javascript' src='js/jquery.prettyPhoto.js'></script> 	 	
   <script type='text/javascript' src='js/prettify.js'></script>

<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>

<!-- Inicio da Galeria
   =================== -->
<script type='text/javascript' src='js/supersized.3.2.7.js'></script>
   <script type='text/javascript' src='js/supersized.shutter.js'></script>


   <!-- AJAX -->
  	<script src="AJAX.js"></script>

   <!-- Final da Galeria
   ================= -->
   <script type="text/javascript" src="js/apng-canvas.min.js"></script>
<script type="text/javascript">
	APNG.ifNeeded(function() {
		$("img.apng").each(function() { APNG.animateImage(this); });
	}).fail(function(message) {
		/*Mensagem de falha*/
	}); 
	$(document).ready(function(){

	});
   </script>

<!-- color_panel
   ================= -->
   <!--
   <script type="text/javascript" src="js/color_panel.js"></script>
<script type="text/javascript" src="js/color_panel_inc.js"></script>
-->

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <script type="text/javascript" src="js/ie_fix.js"></script>
<script type="text/javascript" src="js/respond.src.js"></script>
<script type='text/javascript' src='js/fw_ui.js'></script>
   <script type='text/javascript' src='js/scripts.js'></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body id="no_layout">
<header>
   	<a href="index.html" class="logo">
       	<span class="logo_ico"></span>
           <span>Titulo</span>
           <span class="slogan">Slogan. <span>com.br</span></span>
	</a>
   	<div class="head_contact">
         <ul>
           <li class="top_phone">ligue-me agora <span>+055 11 '9' 0000 0000</span></li>
           <li><a href="http://facebook.com.br/titulo" target="_blank" class="social_facebook"></a></li>
           <li><a href="http://twitter.com/titulo" target="_blank" class="social_twitter"></a></li>

         </ul>
 	  	</div>
   	<div class="head_menu">
       	<ul class="menu">
           	<li><a href="index.html">home</a>
               </li>

               <li><a href="pagina2.html">pagina2</a>
               </li>

           </ul>

         <div class="head_search">
           <form name="head_search" method="post" action="" />
             <input type="submit" name="submit" id="submit" value="l" />
             <input type="text" name="search_field" id="search_field" title="Pesquisa" value="Pesquisa" />              
		</form>
         </div>

		<div class="responsive_menu">
               menu <span class="pm">+</span>
		</div>

       </div>

   </header>

<div class="responsive-menu-wrapper">
	<div class="responsive-menu-items"></div>
   </div>

<!-- Contexto
   ============= -->

<!-- COPYRIGHT -->
<footer>
       <div class="bg_footer">

           <div class="copyright">© 2012. Titulo. todos os direitos reservados.</div>

           <div class="subscribe"><a href="#"> <span>Login</span></a></div>
           <div class="subscribe"><a href="#"> <span>Registra-se</span></a></div>

           <ul class="social_share">

               <li><a href="http://twitter.com/titulo" target="_blank" class="twitter_share">t</a></li>
               <li><a href="http://facebook.com.br/tituo" target="_blank" class="facebook_share">f</a></li>
               <li class="share_txt">compartilhar em</li>

           </ul>

           <a href="#" class="footer_toggler"></a>    	</div>

	<!-- Galeria Superaberta
       ======================== -->    

       <div class="supersized">
           <div id="gallery_buttons">
               <a id="prevslide" class="load-item"></a>
               <a id="nextslide" class="load-item"></a>
               <a id="pauseplay" href="javascript:void(0)"></a>
               <a id="hide_gallery" href="javascript:void(0)"></a>
               <div class="sep_vertical"></div>
               <div class="sep_horizontal"></div>
           </div>    	
           <div id="progress-back" class="load-item">
               <div id="progress-bar"></div>
           </div>    
           <div id="btn_show"><a class="btn_show"></a></div>
           <div id="slidecaption"></div>
       </div>
       <div class="subfooter">
       	<div class="subfooter_content container">
           	<div class="columns four">
                   <div class="widget_block">
                           <script type="text/javascript" src="js/jflickrfeed.js"></script></li>
                       </ul>
                   </div>
               </div>
           	<div class="columns four">

               	<script type="text/javascript" src="js/jflickrfeed.js"></script>
                   <div class="widget_block">

                   </div>
               </div>


..........................................................................................................................................................Esse é o form...............................................................
                 <div class="columns eight">
                   <h5>Envie uma mensagem</h5>

				<div class="message"></div> 

                    <form name="formulario" method="post" action="envio.php" id="contact" class="form" />
                     <div class="contact_inputs">
                         <input type="text" name="nome" class="field-name" id="nome" title="Nome *" value="Nome *" />
                         <input type="text" name="email" class="field-email" id="email" title="Email *" value="Email *" maxlength="250" />
                     </div>
                     <textarea name="mensagem" class="field-message" id="textarea" cols="45" rows="5" title="Mensagem *">Mensagem *</textarea>
                     <input type="reset" name="reset" id="reset" value="" />
                     <input type="submit" name="submit" class="feedback_go" id="submit" value="" />
                   </form>
       </div>

...................................................................................................................
...................................................................................................................

</footer>
<img src="images/progress.png" class="load_wraper apng" alt="" />
<script type="text/javascript">
galleryDef = [	// Slideshow Images
		{image : 'images/bg_slider/fullscreen_slider1.jpg', title : '<span>EUREKA!</span> A mente que se abre a uma nova idéia jamais voltará ao seu tamanho original. - Albert Einstein', thumb : 'images/bg_slider/spacer.gif', url : ''},
		{image : 'images/bg_slider/fullscreen_slider2.jpg', title : '<span>"IMAGINAÇÃO"</span> A imaginação é mais importante que o conhecimento. - Albert Einstein', thumb : 'images/bg_slider/spacer.gif', url : ''},
		{image : 'images/bg_slider/fullscreen_slider3.jpg', title : '<span>O VALOR</span> Não tentes ser bem sucedido, tenta antes ser um homem de valor. - Albert Einstein', thumb : 'images/bg_slider/spacer.gif', url : ''},	
		{image : 'images/bg_slider/fullscreen_slider4.jpg', title : '<span>Pensar</span> O sábio nunca diz tudo o que pensa, mas pensa sempre tudo o que diz. - Aristóteles', thumb : 'images/bg_slider/spacer.gif', url : ''},	
	];

jQuery(function($){

	$.supersized({
		// Functionality
		slideshow               :   1,			// Slideshow on/off
		autoplay				:	1,			// Slideshow starts playing automatically
		start_slide             :   1,			// Start slide (0 is random)
		stop_loop				:	0,			// Stops slideshow on last slide
		random					: 	0,			// Randomize slide order (Ignores start slide)
		slide_interval          :   8000,		// Length between transitions
		transition              :   1, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
		transition_speed		:	1000,		// Speed of transition
		new_window				:	1,			// Image links open in new window/tab
		pause_hover             :   0,			// Pause slideshow on hover
		keyboard_nav            :   1,			// Keyboard navigation on/off
		performance				:	2,			// 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed //  (Only works for Firefox/IE, not Webkit)
		image_protect			:	1,			// Disables image dragging and right click with Javascript

		// Size & Position
		fit_always				:	0,			// Image will never exceed browser width or height (Ignores min. dimensions)
		fit_landscape			:   0,			// Landscape images will not exceed browser width
		fit_portrait         	:   1,			// Portrait images will not exceed browser height  			   
		min_width		        :   100,			// Min width allowed (in pixels)
		min_height		        :   100,			// Min height allowed (in pixels)
		horizontal_center       :   0,			// Horizontally center background
		vertical_center         :   0,			// Vertically center background


		// Components							
		slide_links				:	0,			// Individual links for each slide (Options: false, 'num', 'name', 'blank')
		thumb_links				:	0,			// Individual thumb links for each slide
		thumbnail_navigation    :   0,			// Thumbnail navigation
		slides 					:  	galleryDef

	});
});
</script>
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.