como crear un formulario de contacto

Ahora que tenemos nuestro formulario HTML, si lo miras en tu navegador favorito, verás que se ve medio feo.

Vamos a hacer un poco más lindo con la siguiente hoja de CSS. Vamos a empezar con el formulario en si mismo; vamos a centrarlo y hacerlo visible con un borde:

form {
    /* Sólo para centrar el formulario a la página */
    margin: 0 auto;
    width: 400px;
    /* Para ver el borde del formulario */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}

Luego, agreguemos algo de espacio entre cada uno de los widgets del formulario:

form div + div {
    margin-top: 1em;
}

Ahora nos enfoquemos en los labels. Para hacer nuestro formulario más legible, se considera una buena práctica tener todos los labels en el mismo tamaño y alineados del mismo lado. En este caso, vamos a alinearlos a la derecha, pero en algunos casos alinearlos a la izquierda está bien también.

label {
    /* Para asegurarse que todos los labels tienen el mismo tamaño y están alineados correctamente */
    display: inline-block;
    width: 90px;
    text-align: right;
}

Una de las cosas más difíciles de hacer con formularios HTML es estilizar los widgets HTML. Los campos de texto son fáciles de estilizar, pero otros widgets no. Si deseas saber más sobre estilizar widgets de formularios HTML.

Aquí vamos a usar un par de trucos comunes: armonizar fuentes, tamaños y bordes:

input, textarea {
    /* Para asegurarse de que todos los campos de texto tienen las mismas propiedades de fuente
       Por defecto, las areas de texto tienen una fuente con monospace */
    font: 1em sans-serif;

    /* Para darle el mismo tamaño a todos los campos de texto */
    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Para armonizar el look&feel del borde en los campos de texto */
    border: 1px solid #999;
}

Los formularios HTML soportan muchas pseudo-clases para describir los estados de cada elemento. Como ejemplo, vamos a agregar un poco de destaque cuando un widget esté activo. Es una forma conveniente de ayudar al usuario a mantener el seguimiento de donde está en el formulario.

input:focus, textarea:focus {
    /* Para dar un pequeño destaque en elementos activos*/
    border-color: #000;
}

Campos de texto con múltiples líneas necesitan algunos estilos personalizados para sí mismos. Por defecto, un elemento <textarea> es inline block alineado al fondo en su base. La mayoría de las veces, esto no es lo que queremos. En este caso, para alinearlo de forma amigable el label y el campo, tenemos que cambiar la propiedad vertical-align a top del <textarea>.

Nota: También el uso de la propiedad resize, la cual es una forma conveniente para dejar a los usuarios cambiar el tamaño del <textarea>.

textarea {
    /* Para alinear campos de texto multilínea con sus labels */
    vertical-align: top;

    /* Para dar suficiente espacio para escribir texto */
    height: 5em;

    /* Para permitir a los usuarios cambiar el tamaño de cualquier textarea verticalmente
        No funciona en todos los navegadores */
    resize: vertical;
}

Muchas veces, los botones necesitan también estilos especiales. Para ese fin, los pusimos dentro de un <div> con la clase button. Aquí, queremos que el botón esté alineado con los otros widgets. Para lograr eso, tenemos que suponer un elemento <label>. Esto se logra jugando con el padding y el margin.

.button {
    /* Para posicionar los botones a la misma posición que los campos de texto */
    padding-left: 90px; /* mismo tamaño a todos los elementos label */
}
button {
    /* Este margen extra representa aproximadamente el mismo espacio que el espacio
       entre los labels y sus campos de texto */
    margin-left: .5em;
}
button[type=submit] {
  border: 1px dotted #999;
  border-radius: 0;

  -webkit-appearance: none;
}

Ahora nuestro formulario se ve mucho más bello y presentable.

Incluso si quieres que el botón cambie de color cuando el usuario se ubique en Envía tu mensaje:

button:after {
  content: " >>>";
}

button:hover,
button:focus {
  outline   : none;
  background: #000;
  color   : #FFF;
}

Enviando información a tu servidor

La última parte, y tal vez la más engañosa, es manejar la información del lado del servidor. Como dijimos, la mayor parte del tiempo, un formulario HTML es una forma conveniente de pedir al usuario la información para enviarla a un servidor web.

En pocas palabras como webmaster lo que nos interesa que dicha información nos llegue a nuestro email.

El elemento <form> va a definir donde y como enviar la información gracias a los atributos action y method.

Pero esto no es suficiente. También necesitamos dar un nombre a nuestra información. Esos nombres son importantes en ambos lados; del lado del navegador, le dice cómo nombrar cada parte de la información, y del lado del servidor, le permite manejar cada parte de la información por nombre.

Entonces para nombrar tu información necesitas usar el atributo name en cada widget del formulario que va a recolectar una parte específica de esa información:

    <form action="/enviar.php" method="post">
    <div>
        <label for="name">Nombre:</label>
        <input type="text" id="name" name="name"/>
    </div>
    <div>
        <label for="mail">Email:</label>
        <input type="email" id="mail"name="email" />
    </div>
    <div>
        <label for="msg">Mensaje:</label>
        <textarea id="msg" name="message"></textarea>
    </div>

    <div class="button">
        <button type="submit">Envía tu mensaje</button>
    </div>

</form>

En nuestro ejemplo, el formulario enviará 3 partes de información, llamadas "user_name", "user_email" y "user_message". La información se enviará a la URL "/enviar.php" con el método POST.

En el lado Servidor: la recuperación de los datos

Sea cual sea el método HTTP que elija, el servidor recibe una cadena que será analizada con el fin de obtener los datos como una lista de pares clave / valor. La forma de acceder a esta lista depende de la plataforma de desarrollo que use y de las estructuras específicas que pueda estar usando con él. La tecnología se utiliza también determina cómo se manejan claves duplicadas; A menudo,se da prioridad al valor recibido más recientemente para una clave dada. Si quieres saber más sobre el envío de datos del formulario en MDN

PHP ofrece algunos objetos globales para acceder a los datos. Suponiendo que usted ha utilizado el métodoPOST, el siguiente ejemplo sólo toma los datos y lo muestra al usuario. Por supuesto, lo que se hace con los datos depende de usted. Es posible visualizarlos, almacenarlos en una base de datos, enviarlos por correo electrónico, o procesarlos de alguna otra manera.

<?php
$remitente = $_POST['email'];
$destinatario = 'webmaster@tutorialesenlinea.es'; // en esta línea va el mail del destinatario.
$asunto = 'Ejemplo del tutoriales en linea de formulario de contacto'; // acá se puede modificar el asunto del mail
if (!$_POST){
?>

<?php
}else{
     
    $cuerpo = "Nombre: " . $_POST["name"] . "rn"; 
    $cuerpo .= "Email: " . $_POST["email"] . "rn";
    $cuerpo .= "Mensaje: " . $_POST["message"] . "rn";
    //las líneas de arriba definen el contenido del mail. Las palabras que están dentro de $_POST[""] deben coincidir con el "name" de cada campo. 
    // Si se agrega un campo al formulario, hay que agregarlo acá.

    $headers  = "MIME-Version: 1.0n";
    $headers .= "Content-type: text/plain; charset=utf-8n";
    $headers .= "X-Priority: 3n";
    $headers .= "X-MSMail-Priority: Normaln";
    $headers .= "X-Mailer: phpn";
    $headers .= "From: "".$_POST['nombre']." ".$_POST['apellido']."" <".$remitente.">n";

    mail($destinatario, $asunto, $cuerpo, $headers);
    
    include 'confirma.html'; //se debe crear un html que confirma el envío
}
?>

Este ejemplo muestra una página con los datos que enviamos. Esto se puede ver en acción en nuestro archivo ejemplo Formulario_de_contacto_simple.html - que contiene un ejemplo similar en forma como el que hemos visto antes, con un method con parámetro post y un action con parámetro enviar.php Cuando se envía, envía los datos del formulario al script enviar.php , que contiene el código de PHP que se ha visto en el bloque anterior. Cuando se ejecuta este código, la salida en el navegador es: Gracias por comunicarse, su mensaje fue enviado correctamente