Como crear un formulario de o simple 6qx29

Por Newsletter

anterior tutorial donde mostramos los aspectos, los componentes y las definiciones de un formulario. 304t4e


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 94ly


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 3o2a3g


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>\r\nReturn-path: $email";
        $subject="Message sent using your  form";
        mail("@tutorialesenlinea.futbolgratis.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>\r\nReturn-path: $email";
        $subject="Message sent using your  form";
        mail("@tutorialesenlinea.futbolgratis.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 r4673

.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>\r\nReturn-path: $email";
        $subject="Message sent using your  form";
        mail("@tutorialesenlinea.futbolgratis.org", $subject, $message, $from);
        echo "Email sent!";
        }
    }  
?>
</body>
</html>

Descargar archivo de este Tutoriales en linea.
Compartir

Mi nombre es Alexander fundador y CEO, y me gusta llamarme un Geek. Amo la informática, tecnología y todo lo que está relacionado con ella. Inicié este sitio con la intención de compartir conocimientos como cursos en línea, tutoriales y videotutoriales. Estoy muy entusiasmado con la información que he descubierto y compartido hasta el momento. La verdad es que lo he hecho con el mayor de los gustos. Así es, soy un Geek con una visión para compartir conocimiento. Leer mas...

Artículos Relacionados 4s2d70