0anterior 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 o. Es un atractivo y simple formulario HTML. Para que funcione adecuadamente, añadiremos un script PHP al código HTML del formulario de o. Sin CSS.
Paso 1: Crear un archivo con el código HTML del formulario de o
Primero, crearemos el formulario HTML que mostrará campos básicos. Le pedirá a los s 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 o
Ahora que tienes listo el código del formulario de o 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 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 form";
mail("@tutorialesenlinea.descargarjuegos.org", $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 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 form";
mail("@tutorialesenlinea.descargarjuegos.org", $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 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 form";
mail("@tutorialesenlinea.descargarjuegos.org", $subject, $message, $from);
echo "Email sent!";
}
}
?>
</body>
</html>
Comentarios