En este tutoriales en linea continuaremos con la creación de un formulario de contacto para nuestro sitio web, siguiendo desde el anterior tutorial donde mostramos los aspectos, los componentes y las definiciones de un formulario.
Los formularios HTML son uno de los componentes más comunes en la mayoría de los sitios web o blogs. Se están volviendo muy populares en el resto de la web también, como por ejemplo en páginas de Facebook y en Newsletters por Emails. Vamos a mostrarles cómo generar tu propio código HTML para un formulario de contacto. Es un atractivo y simple formulario HTML. Para que funcione adecuadamente, añadiremos un script PHP al código HTML del formulario de contacto. Sin CSS.
Paso 1: Crear un archivo con el código HTML del formulario de contacto
Primero, crearemos el formulario HTML que mostrará campos básicos. Le pedirá a los usuarios que envíen su Nombre, Dirección de Email y un Mensaje.
Aquí el Código en Html:
<form action="" method="POST" enctype="multipart/form-data">
<input type="hidden" name="action" value="submit">
Your name:<br>
<input name="name" type="text" value="" size="30"/><br>
Your email:<br>
<input name="email" type="text" value="" size="30"/><br>
Your message:<br>
<textarea name="message" rows="7" cols="30"></textarea><br>
<input type="submit" value="Send email"/>
</form>Paso 2: Añadir funciones PHP al código HTML del formulario de contacto
Ahora que tienes listo el código del formulario de contacto HTML, sólo debemos agregar el script PHP que lo procesará. Básicamente, el script PHP verifica que todos los campos del formulario HTML se hayan llenado correctamente, y muestra un mensaje de error al lado del texto, si es necesario. Luego procesa la información y la envía a tu email.
Crear el script PHP requiere de una comprensión básica de código PHP, dentro del comprimido de descarga externo, encontrarás el código PHP+Html, con esto podrás trabajar sin saber de programación, de manera amigable y rápida.
Observa esta imagen para ver cómo se verá tu formulario en el navegador sin CSS.
Código PHP
<?php
$action=$_REQUEST['action'];
if ($action=="") /* display the contact form */
{
?>
<?php
}
else /* send the submitted data */
{
$name=$_REQUEST['name'];
$email=$_REQUEST['email'];
$message=$_REQUEST['message'];
if (($name=="")||($email=="")||($message==""))
{
echo "All fields are required, please fill <a href="">the form</a> again.";
}
else{
$from="From: $name<$email>rnReturn-path: $email";
$subject="Message sent using your contact form";
mail("webmaster@tutorialesenlinea.es", $subject, $message, $from);
echo "Email sent!";
}
}
?>Si lo prefieres puede combinar estos dos código en un solo archivo:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Formulario</title>
</head>
<body>
<?php
$action=$_REQUEST['action'];
if ($action=="") /* display the contact form */
{
?>
<form action="" method="POST" enctype="multipart/form-data">
<input type="hidden" name="action" value="submit">
Your name:<br>
<input name="name" type="text" value="" size="30"/><br>
Your email:<br>
<input name="email" type="text" value="" size="30"/><br>
Your message:<br>
<textarea name="message" rows="7" cols="30"></textarea><br>
<input type="submit" value="Send email"/>
</form>
<?php
}
else /* send the submitted data */
{
$name=$_REQUEST['name'];
$email=$_REQUEST['email'];
$message=$_REQUEST['message'];
if (($name=="")||($email=="")||($message==""))
{
echo "All fields are required, please fill <a href="">the form</a> again.";
}
else{
$from="From: $name<$email>rnReturn-path: $email";
$subject="Message sent using your contact form";
mail("webmaster@tutorialesenlinea.es", $subject, $message, $from);
echo "Email sent!";
}
}
?>
</body>
</html>Recuerde que este último archivo o código para que pueda funcionar correctamente deben que guardarlo con la terminacion .php, ejemplo en el archivo que vas a descargar esta como form.php.
Dandolo el diseño que queremos al formulario con CSS
.form-consulta {max-width: 500px; background: #eee; padding: 25px; font-family: 'Source Sans Pro', sans-serif;}
.campo-form {width:100%; height:36px; margin:2px 0 6px; padding-left:6px; box-sizing: border-box; border-radius:3px; border:0; font-family: 'Source Sans Pro', sans-serif; font-size:1em;}
label span {color: #f00}
textarea {min-height: 150px!important;}
.btn-form {display: inline-block; border:0; background: #000; height: 46px; line-height: 46px; padding: 0 20px; border-radius: 6px; color:#fff; text-decoration: none; text-transform: uppercase; letter-spacing: 1px}
.btn-form:hover {background: #444}Observa esta imagen para ver cómo se verá tu formulario en el navegador con CSS.
Ahora el archivo quedaría así:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Formulario</title>
</head>
<style type="text/css">
/* reglas CSS para formulario */
.form-consulta {max-width: 500px; background: #eee; padding: 25px; font-family: 'Source Sans Pro', sans-serif;}
.campo-form {width:100%; height:36px; margin:2px 0 6px; padding-left:6px; box-sizing: border-box; border-radius:3px; border:0; font-family: 'Source Sans Pro', sans-serif; font-size:1em;}
label span {color: #f00}
textarea {min-height: 150px!important;}
.btn-form {display: inline-block; border:0; background: #000; height: 46px; line-height: 46px; padding: 0 20px; border-radius: 6px; color:#fff; text-decoration: none; text-transform: uppercase; letter-spacing: 1px}
.btn-form:hover {background: #444}
</style>
<body>
<?php
$action=$_REQUEST['action'];
if ($action=="") /* display the contact form */
{
?>
<form action="" method="POST" enctype="multipart/form-data" class="form-consulta">
<input type="hidden" name="action" value="submit" class="campo-form">
Your name:<br>
<input name="name" type="text" value="" size="30" class="campo-form"/><br>
Your email:<br>
<input name="email" type="text" value="" size="30" class="campo-form"/><br>
Your message:<br>
<textarea name="message" rows="7" cols="30" class="campo-form"></textarea><br>
<input type="submit" value="Send email" class="btn-form"/>
</form>
<?php
}
else /* send the submitted data */
{
$name=$_REQUEST['name'];
$email=$_REQUEST['email'];
$message=$_REQUEST['message'];
if (($name=="")||($email=="")||($message==""))
{
echo "All fields are required, please fill <a href="">the form</a> again.";
}
else{
$from="From: $name<$email>rnReturn-path: $email";
$subject="Message sent using your contact form";
mail("webmaster@tutorialesenlinea.es", $subject, $message, $from);
echo "Email sent!";
}
}
?>
</body>
</html>
Comentarios