Check the new version here

Popular channels

Formulario de contacto html y php

Hola como estan todos ?

Les voy explicar de forma sencilla como hace un formulario de contacto en html y php. Cuando el usuario ingrese sus datos y ponga publicar lo lleve a una pagina donde diga, "Gracias a la brevedad le respoderemos su consulta" y que te llegue la informacion a tu email . Incluye validate


Desde Cero


  • Primero creamos un documento con que se va llamar form-contacto.html
  • Luego ingresamos el siguiente codigo:


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style-contacto.css" type="text/css" >
div class="formulario">
<form method="post" action="rrhh-envio.php" "target='_self' enctype="multipart/form-data">
<label>Nombres (*)</label><br />
<input type="text" name="Nombre" class="campos" required />
<label>Apellidos (*)</label><br />
<input type="text" name="Apellido" class="campos" required />
<label>Email (*)</label><br />
<input type="email" name='email' class="campos" required/>
<label>Telefono(*)</label><br />
<input type="text" name="Telefono" class="campos" required />

Adjuntar CV<br />
<p><input type='file' name='archivo1' class="campos" required></p>
<label>Acepta las condiciones de uso</label>
<input type="checkbox" class="input" name="accept" required></p>
<div class="enviar_formulario">
<div class="obligatorio">
(*) CAMPOS OBLIGATORIOS
</div>
<input type="submit" name="enviar" class="enviar_boton" value="ENVIAR" "/>
</div>
</form>
</div>
<html>

Te va quedar asi:


Ahora le vamos a dar estilo para que no se vea asi, entonces en nuestro archivo marcado en azul ingresamos estos datos de estilo css.--->

Creamos el archivo style-contacto.css e ingresamos estos datos:

BODY {
margin: 0px ;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;


}

.formulario {
float:left;
margin: 30px 0px 0px 20px;
width: 190px;
font-size: 14px;
color: #3F3D37;

}

.formulario .campos {
margin: -28px 0px 50px 200px;
padding: 10px 0px 5px 2px;
border: 1px solid #ccc;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
font-size: 14px;
width: 285px;
height: 20px;
border-radius: 3px ;
}
.formulario .campos1 {
margin: -28px 0px 50px 200px;
padding: 10px 0px 5px 2px;
border: 1px solid #ccc;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
font-size: 14px;
width: 285px;
height: 120px;
border-radius: 3px ;
}
.formulario .n {
margin: 0px 0px 5px 0px;
padding: 10px 0px 5px 8px;
border: 1px solid #ccc;
background-color: #f5f5f5;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
font-size: 15px;
width: 285px;
height: 40px;
border-radius: 3px ;
}

.obligatorio {
float: left;
margin: 0px 0px 20px 0px;
padding: 5px 0px 0px 0px;
width: 144px;
font-weight: bold;
font-size: 10px;
}

.enviar_boton {
float: left;
padding: 1px;
margin: 10px 0px 8px 198px;
width: 85px;
height: 30px;
font-size: 11px;
color: #FFFFFF;
text-align: center;
border-radius: 5px 5px 5px 5px;
background: #221E1B;
}

Y nos va quedar asi:



Bien, ya tenes el archivo html generado y un estilo básico para nuestro formulario. Este formulario incluye restriccion de campos para que usuario ingrese obligatoriamente los datos en los campos, si no queres que sean obligatorios les quitas el "required"




Ahora tenemos que crear el archivo rrhh-envio.php el que esta marcado en verde .

IMPORTANTE:Este archivo procesara el envió de datos,imágenes o de archivos adjuntos- Modificar los datos en color naranja.

Ingresar este código dentro del archivo rrhh-envio.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="5;URL=http://www.tupagina.com.ar" />
<META name="robots" content="NOARCHIVE">

<style>
BODY {
font-family: Arial, Helvetica, sans-serif;
background: #ffffff;
}

#contacto {
margin-top: 28%;
font-size: 20px;
color: #000;
text-align: center;
text-shadow: 1px 1px 1px #FFFFFF;
line-height: 100%;
letter-spacing: 1px;
}

</style>

</head>
<body>
<div id="contacto">
GRACIAS POR POSTULARTE!!! <br />
<br />
MUCHAS GRACIAS.
</div>
<?php
function form_mail($sPara, $sAsunto, $sTexto, $sDe)
{
$bHayFicheros = 0;
$sCabeceraTexto = "";
$sAdjuntos = "";

if ($sDe)$sCabeceras = "From:".$sDe."n";
else $sCabeceras = "";
$sCabeceras .= "MIME-version: 1.0n";
foreach ($_POST as $sNombre => $sValor)
$sTexto = $sTexto."n".$sNombre." = ".$sValor;

foreach ($_FILES as $vAdjunto)
{
if ($bHayFicheros == 0)
{
$bHayFicheros = 1;
$sCabeceras .= "Content-type: multipart/mixed;";
$sCabeceras .= "boundary="--_Separador-de-mensajes_--"n";

$sCabeceraTexto = "----_Separador-de-mensajes_--n";
$sCabeceraTexto .= "Content-type: text/plain;charset=iso-8859-1n";
$sCabeceraTexto .= "Content-transfer-encoding: 7BITn";

$sTexto = $sCabeceraTexto.$sTexto;
}
if ($vAdjunto["size"] > 0)
{
$sAdjuntos .= "nn----_Separador-de-mensajes_--n";
$sAdjuntos .= "Content-type: ".$vAdjunto["type"].";name="".$vAdjunto["name"].""n";;
$sAdjuntos .= "Content-Transfer-Encoding: BASE64n";
$sAdjuntos .= "Content-disposition: attachment;filename="".$vAdjunto["name"].""nn";

$oFichero = fopen($vAdjunto["tmp_name"], 'r');
$sContenido = fread($oFichero, filesize($vAdjunto["tmp_name"]));
$sAdjuntos .= chunk_split(base64_encode($sContenido));
fclose($oFichero);
}
}

if ($bHayFicheros)
$sTexto .= $sAdjuntos."nn----_Separador-de-mensajes_----n";
return(mail($sPara, $sAsunto= "Consulta-rrhh", $sTexto, $sCabeceras));
}

//cambiar aqui el email
if (form_mail("[email protected]r", $_POST[asunto],
"Los datos introducidos en el formulario son:nn", $_POST[email]))
echo "";
?>

</body>
</html>


Perfecto ya llegamos al final, ya creaste el formulario, le agregaste estilo y generaste el archivo para procesar los datos del formulario. Cuando ingrese el usuario sus datos estos junto a las imagenes o archivos iran a tu email .


Espero que les haya gustado. NO DUDEN EN CONSULTAR. SALUDOS A TODOS
0
0
0
0No comments yet