Gweb.io es un servicio que ademas de permitir usar un dominio personalizado en una «pagina web sencilla» alojada en Google drive, proporciona una interesante opción de formulario de contacto que se puede utilizar manteniendo la sencillez de dichas paginas.
Para poder utilizarlo solo basta con crear un formulario de contacto común y corriente en HTML, teniendo en cuenta los siguientes parametros:
Debemos especificar como método "post" y url de acción "/contact".
Algo mas o menos así:
<form method="post" action="/contact">
Los campos deben tener lo siguiente como nombre:
contact[name] para nombre
contact[email] para email
contact[subject] para asunto
contact[message] para mensaje
El mensaje es enviado a la dirección de Gmail que se utilizo para alojar la pagina en Google drive.
Con esto podremos tener un formulario muy sencillo pero flexible que podemos incluso utilizar en Blogger como un Iframe o una ventana modal.
Html5
Para mantener el formulario lo mas sencillo posible podemos utilizar html5 que ya incluye validación de campos.
<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"><title>Formulario de contacto by Derangeur</title>
<style type="text/css">
/* css incluido dentro de la plantilla */
label {
display: block;
margin-top: 20px;
letter-spacing: 1px;
color: #ff6600;
font-weight: bold;
font-family: "Courier New",Courier,monospace;
}
.principal {
margin: 0 auto;
display: block;
width: 510px;
color: #666666;
font-family: Arial;
}
form {
margin: 0 auto;
width: 400px;
}
input, textarea {
border: 2px solid #339999;
padding: 10px;
background: white none repeat scroll 0% 50%;
width: 380px;
margin-top: 5px;
color: black;
height: 27px;
font-size: 15px;
font-family: Arial,Helvetica,sans-serif;
}
textarea {
height: 150px;
font-family: Arial,Helvetica,sans-serif;
}
#enviar {
border: none;
width: 85px;
height: 35px;
margin-top: 20px;
cursor: pointer;
background-color: #339999;
color: white;
}
#borrar {
border: none;
width: 85px;
height: 35px;
margin-top: 20px;
cursor: pointer;
background-color: #339999;
color: white;
}
#enviar:hover {
background-color: #33ccff;
color: white;
}
#borrar:hover {
background-color: #cc0000;
color: white;
}
input:focus, textarea:focus {
border-color: #33ccff;
background-color: #f9f9f9;
}
body {
background-color: #cccccc;
}
</style></head><body>
<form method="post" action="/contact"> <label for="nombre">Nombre:</label>
<input required="required" id="nombre" name="contact[name]" placeholder="Su nombre..." type="text"> <label for="email">Email:</label><input required="required" id="email" name="contact[email]" placeholder="Su email..." type="email">
<label for="asunto">Asunto:</label> <input required="required" id="asunto" name="contact[subject]" placeholder="Asunto..." type="text"> <label for="mensaje">Mensaje:</label><textarea required="required" id="mensaje" name="contact[message]" placeholder="Su mensaje..."></textarea>
<input id="borrar" name="borrar" value="Borrar" type="reset"> <input id="enviar" name="enviar" value="Enviar" type="submit"> </form>
</body></html>
El código da como resultado un formulario como el de la imagen de arriba. Es tan sencillo que el código del css es mucho mas largo que el formulario en si.
