Formulario de contacto en php con estilo css.
En una de las entradas anteriores publique un entrada formulario en php directo a tu email ahora voy a explicar como darle el estilo a la respuesta para que esta agarre las imágenes y los estilos de la web de donde esta saliendo este envió.
Es muy fácil solo tendremos que subir dos carpetas de esta manera
../
tanto en la cabecera como en pie de pagina agregado .
(Esto es para todo imágenes ,enlaces , favicon y todo lo que quieres que aparezca en el )
suponiendo que dentro de estas no hay mas carpetas
ok
Vamos primero con el código si llegamos hasta la entrada anterior tendremos este código .
en el html .
<form action="php/contacto.php" method="post">
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" name="nombre" placeholder="Contacto" required/>
<label for="email">Email:</label>
<input id="email" type="email" name="email" placeholder="contacto@correo.com" required />
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" placeholder="Gracias estamos atendiendo tu consulta." cols="40%" rows="8%" required></textarea>
<input id="submit" type="submit" name="submit" value="Enviar" />
</form>
y el php que seria el contacto.php
<?php
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$mensaje = $_POST['mensaje'];
echo "<h3>El mensaje que enviastes es :</h3>";
echo("Nombre:");
echo "<br>";
echo $nombre;
echo "<br>";
echo("Email:");
echo "<br>";
echo $email;
echo "<br>";
echo("Mensaje:");
echo "<br>";
echo $mensaje;
echo "<br>";
echo("Gracias tu consulta tendrá respuesta inmediata ");
echo "<br>";
echo "<br>";
$aquien = "andreinazerpa24@gmail.com";
$asunto = "Has recibido un mensaje ";
$mensajemail =$nombre." /Con el email /".$email." /Mensaje enviado /" .$mensaje;
if (mail($aquien,$asunto,$mensajemail))
{echo "Tu email se envió correctamente ";}
else{echo "El envió de email ha fallado";}
?>
Voy a colocar el contacto php completo para que cada estilo e imágenes sean enlazadas mediante sus rutas relativas .
tu aras lo siguiente
copiaras y pegaras la
cabecera de tu sitio (En la primera parte ) ,
El php de contacto (En la parte del medio )
pie de pagina de tu sitio (En la ultima parte ).
Recordando que deberás subir las dos carpetas nombradas al principio
(En todo lo que quieres que aparezca en ella ) .
Siguiendo este ejemplo tiene que quedar algo como esto .
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="../css/estilo.css" />
<link href="img/favicon.ico" rel="icon" type="../image/x-icon" />
</head>
<body>
<header>
<nav >
<ul class="title-area">
<li class="name":<a href="../index.html"> Home</a></li>
<li><a href="../contacto.html">Contacto</a></li>
<li><a href="../tienda.html">Ofertas</a></li>
<li><a href="../tienda.html">Tienda</a></li>
</ul>
</nav>
<div class="">
<div class="">
<h4></h4>
<?php
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$mensaje = $_POST['mensaje'];
echo "<h3>El mensaje que enviastes es :</h3>";
echo("Nombre:");
echo "<br>";
echo $nombre;
echo "<br>";
echo("Email:");
echo "<br>";
echo $email;
echo "<br>";
echo("Mensaje:");
echo "<br>";
echo $mensaje;
echo "<br>";
echo("Gracias tu consulta tendrá respuesta inmediata ");
echo "<br>";
echo "<br>";
$aquien = "tuemail@gmail.com";
$asunto = "Has recibido un mensaje ";
$mensajemail =$nombre." /Con el email /".$email." /Mensaje enviado /" .$mensaje;
if (mail($aquien,$asunto,$mensajemail))
{echo "Tu email se envió correctamente ";}
else{echo "El envió de email ha fallado";}
?>
</div></div>
<br><br><br>
<footer class="" id="">
<div class="">
<hr>
<div class="">
<div class=""><h4>Ubicación de la tienda </h4><p>.</p>
<img src="../img/mapa.png"><br><br>
<p></p>
</div>
<div class=""><h4>Newsletter</h4><p></p>
<form><input type="text" placeholder="Nombre y apellido:" value="">
<form><input type="text" placeholder=" E-Mail:" value="">
<input type="submit" value="Enviar!"></form>
<br>
<ul >
<li><img src="../img/facebook.png"></a></li>
<li><img src="../img/g.png"></a></li>
<li><img src="../img/twitter.png"></a></li>
</ul>
</div>
<div class=""><h4></h4><p>.</p>
<img src="../img/logo.png">
<br><br>
<p>2014 | AndreinaZerpa</p></div>
</footer>
</body>
</html>
Quedando así .
espero que sea útil para ti un saludo y mucha suerte .
:)
Comentarios
Publicar un comentario