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