Inicia sesión


Como crear un formulario de contacto simple

Como crear un formulario de contactoEn 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>\r\nReturn-path: $email";
        $subject="Message sent using your contact form";
        mail("[email protected]", $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>\r\nReturn-path: $email";
        $subject="Message sent using your contact form";
        mail("[email protected]", $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>\r\nReturn-path: $email";
        $subject="Message sent using your contact form";
        mail("[email protected]", $subject, $message, $from);
        echo "Email sent!";
        }
    }  
?>
</body>
</html>
Descargar archivo de este Tutoriales en linea.


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-09-03
  • Categorias: Diseño Web CSS3 html5 Html php WebSite webmasters Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Efectos jQuery - Ocultar y mostrar

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Como abrir un enlace con jQuery

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Cómo rastrear a los usuarios de Adblock usando Google Analytics

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google WebSite Trucos y tips Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial