Formulario Jquery y Ajax desde 0 [HTML y CSS]


Comenzamos el año recargados :), con nuevos tutoriales sobre programación, diseño y Seguridad Informática.

En post anteriores vimos como hacer menus usando solo CSS y también como crear formularios 2.0 usando Jquery.

Ahora toca juntar todo lo que aprendimos y crear un formulario de contacto completo :), nuestros objetivos serán:

La estructura HTML/CSS

Comenzamos, lo primero es tener en mente como sera el diseño del formulario, que imágenes utilizaremos, etc yo les recomiendo que el estilo sea parecido al diseño del sitio donde lo van a implementar, entonces revisen bien en los colores primarios de su sitio, las imágenes que utilizan, etc. Ya que se tiene conceptual-izado lo que queremos hacer nos ponemos a escribir el código html y css que sera como el esqueleto de todo eso 😉

HTML

        <div class="box" id="info">
            <div class="description contacto"></div>
            <h2>Formulario de Contacto</h2>
            <form id="formulario" name="formulario"><input type="hidden" name="phpMyAdmin" value="3068b5491f703bc27d2a43326f772556" />
              <label for="username">Nombre:</label>
              <input class="inputNormal text" type="text" id="inputNombre" value="Escribe tu nombre...">
              <span id="req-username" class="requisites error">A-z, mínimo 4 caracteres</span>
              
              <label for="mail">Mail:</label>
              <input class="inputNormal text" type="text" id="inputCorreo" value="Escribe tu email...">
              <span id="req-email" class="requisites error">Un e-mail válido por favor</span>
              
              <label for="telefono">Sitio web:</label>
              <input class="inputNormal text" type="text" id="inputWeb" value="Url de tu web si tienes...">
              
              <label for="comentarios">Comentarios: <span id="req-message" class="requisites error messageerror <?php echo $message ?>">Escribe un mensaje(A-z)</span></label>
              <textarea class="inputNormal text" id="inputComentario"></textarea>
              <br/><br/>
              <div>
                <button class="button fit" id="botonEnviar" onClick="validaForm()" type="button">Enviar Formulario</button>
                <button class="button fit" type="reset">Limpiar Formulario</button>
              </div>
            </form>
              <div id="transparencia">
                    <div id="transparenciaMensaje"></div>
              </div>
        </div>

Ese seria el código HTML de un formulario simple, como ven son menos de 30 lineas nada del otro mundo, omitimos las etiquetas previas () para no hacer tan grande el código, pero uds se las ponen :D, continuamos, ya tenemos el HTML escrito ahora falta el CSS

El CSS

h1,h2,h3{
  font-weight:bold;
}
body, html{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: .9em;
  background: #f3f7ff;
  height: 100%;
}
.centrado
{
  margin: 0 auto;
  width:500px;
}
a{
  color: #598F8F;
}
.outerbox{
  width: 700px;
  float: left;
  height: 100%;
  /*margin: 0 0 0 400px;*/
  margin: 0 0 0 430px;
  display: inline;
  position: relative;
}
#infobox{
  float: right;
  margin: 0 300px 0 300px ;
}
#infobox p.box, #infobox div.box{
  height: 450px;
}
.box{
  background: transparent url(../images/fff50.png);
  width: 500px;
  height: 420px;
  float: left;
  font-size: 0.85em;
  position: relative;
  color: #686868;
  margin: 40px 0 0 0;
  padding: 10px 10px 35px 10px;
  display: inline;
  border: 1px solid #CCCCCC;
    border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  -khtml-border-radius: 5px 5px 5px 5px;
}
.outerbox > .box{
  height: auto;
  min-height: 420px;
}
.box p, .box h2{  
  margin: 3px 0;
  float: left;
  clear: left;
  text-align: justify;
  width: 500px;
}
.box h2{
  width: 500px;
  font-size: 1.4em;
  margin: 10px 0 5px 0;
}
#info, .info{
  padding: 10px;
}
.info{
  background: transparent url(../images/fff50.png);
}

.description
{
height:170px;
position:absolute;
right:-16px;
top:-17px;
width:170px;
}
.contacto
{
  background:url("../images/contacto.png") no-repeat scroll right top transparent;
}
/*FORMS*/
label
{
  display:block;
  font-size:14px;
  line-height:2em;
}
#loading img {
  padding: 0;
  margin: 0;
}
textarea
{
    width:80%;
    margin:0 auto;
    height:100px;
    color:#888888;
}
form input[type="text"]{
color:#888888;
}
input.submit {
/*
color:#000000;
margin-top:20px;
padding:5px;
width:auto !important;*/
  background-image:url("images/bg_nav_hover.png");
  background-repeat:repeat-x;
  border-color:#077DB3 #077DB3 #05537C;
  border-style:solid;
  border-width:1px;
  color:#FFFFFF;
  font-size:11px;
  font-weight:bold;
  height:32px;
  margin-top:10px;
  text-decoration:none;
  text-transform:uppercase;
  width:auto;
}
.requisites{
  display:none;
}
.error{
  background: #fff8cc;
  padding:5px;
  margin-left:10px;
  /*color: #171717;*/
  color:#d42323;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
}
.messageerror
{
  margin-left:30%;
  display:none;
}
input.error{

}
#loading {
  background:url("images/transparent.png") repeat scroll 0 0 transparent;
  margin:0 auto;
  color:#FFFFFF;
  padding:10px;
  position:relative;
  text-align:center;
  top:-250px;
  width:300px;
  display:none;
  font-weight:bold;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  -khtml-border-radius: 5px 5px 5px 5px;
}
#transparencia {
    -moz-border-radius: 5px 5px 5px 5px;
    background: url("images/transparent.png") repeat scroll 0 0 transparent;
    color: #FFFFFF;
    display: none;
    font-weight: bold;
    height: auto;
    left: 30%;
    margin: 0 auto;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 30%;
    width: 230px;
    z-index: 999;
}
#botonEnviar, .button {
  bottom: 15px;
    float: left;
    margin-right: 10px;
    right: 15px;
}

#botonEnviar, .button.fit {
    float: left;
}

#botonEnviar, .button {
    -moz-border-radius: 3px 3px 3px 3px;
    -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
    background-color: #FF920D;
    background-image: -moz-linear-gradient(center top , #ff0000 0%, #CF1010 100%);
    border: 1px solid #333333;
    color: #FFFFFF !important;
    cursor: pointer;
    display: block;
    font-weight: bold;
    line-height: 18px;
    min-width: 40px;
    padding: 4px 15px 6px;
    text-align: center;
    text-shadow: 0 -1px 0 #333;
}
/*FORMS*/

Ya con esto el formulario se ve mas decente xD, ahora necesitamos darle vida al formulario, si por ejemplo que en los inputs muestre un texto explicativo y cuando el usuario de clic en el desaparezca, un efecto de focus y blur también estaría bien ;).

Si te gusto comparte ...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

12 pensamientos en “Formulario Jquery y Ajax desde 0 [HTML y CSS]

  1. Ariel
    Google Chrome 12.0.742.122 Windows 7

    Hola….. excelente tutorial.. hacia tiempo que estaba buscando algo asi …. Felicidades por tu pagina…

    Solo una pregunta… al momento continuar con el tutorial.. no puedo… los links me mandan a una pagina y me da el error 404 not found…

    solamente los tres primeros link sirven… pero apartir del cuarto (hace ruso de la tecnologia AJAX…..) ya no lo encuentra…. ojala pudieras subirlos d enuevo uchas gracias…

    igualmente… si llegara a tener alguna duda en el proceso… podrias acesorarme??? mil gracias nuevamente….

    Bonito dia

    Responder
  2. Alevsk
    Google Chrome 13.0.782.107 Mac OS

    Hola amigo, gracias por visitar mi blog, una disculpa, esos tutoriales aun no los hago por falta de tiempo, pero espero este fin de semana completarlos y publicarlos en el blog, sobre tu pregunta de asesoramiento, claro amigo, aqui estamos para ayudar en lo que se pueda.

    salu2

    Responder
  3. Ariel
    Google Chrome 13.0.782.107 Windows 7

    ooooohhhh esta bien….. de verdad muchas gracias….. los esperare con ansias…… y de nuevo Felicidades por tu pagina.. .la he estado visitando recientemente ya que no la conocia y en verdad esta excelente……

    bueno cuidate mucho y estaremos en contacto…. que tengas buen dia……

    Responder
  4. Ariel
    Google Chrome 13.0.782.112 Windows 7

    Hola Alevsk:

    nuevamente yo jeje….. mira he terminado de adecuar el formulario que aqui presentas a una version mia… pero me surgieron las siguientes preguntas y un pequeño problemilla…. te las expongo en diferentes comentarios para no confundirte jejej soy algo menso para expresar ideas por escrito jeje…..

    Responder
  5. Ariel
    Google Chrome 13.0.782.112 Windows 7

    mira la la primera pregunta seria la siguiente:

    ¿que parte y que archivo deberia modificar para que la informacion se mande al correo que yo deseo?… tengo entendido que seria en el archivo mail.php nooo??

    es que la verdad este seria el primer formulario que edito…. y la verdad no se nada de php ( bueno tampoco de javascript, ni otros lenguajes jajaja)

    y que seria lo que deberia poner y comooo??

    Responder
  6. Ariel
    Google Chrome 13.0.782.112 Windows 7

    el segundo punto es respecto al envio..

    como se en realidad si es que se esta enviando la informacion????…. cuando le doy enviar solamente se queda el aviso de “Enviando por favor espere” y la barra animada….. pero no se si deberia salir algo mas…

    o debe la pagina estar ya en internet para que funcione….????

    por cierto cuando probe el que tu tienes de prueba si me sale el mensaje de “su correo ha sido enviado…..” y ademas (no entiendo nada de ese lenguaje) pero creo que colocaste un Debug (no se si se escribe asi jeje) para que los mensajes los publicara en un archivo .txt llamado “mensajes” contenido en la misma carpeta.. pero cuando lo hago en el que yo edite no hace nada, ni muestra el mensaje de enviado, ni tampoco publica nada en el archivo….

    entonces…. estoy haciendo algo mal?? que seria???

    o solamente tiene que estar ya en internet para que funcione???

    Responder
  7. Ariel
    Google Chrome 13.0.782.112 Windows 7

    y ya por ultimo jeje (perdon las molestias)…..

    mira todo en el formulario funciona de maravilla (bueno ademas de los puntos anteriores claro esta jeje)

    pero cuando le doy enviar…. ya sea que me aparezca el mensaje de error….. o el de enviando (en el de mensaje enviado no sabria ya que no me sale, como te habia comentado) tengo un problema la imagen de “X” y la barra que esta animada.. no estan dentro del cuadro de la transparencia…. no se si me sepa explicar..

    mira cuando tu aprietas el boton de enviar ya sea que aparezca el dialogo de “error: llene los campos requeridos” o bien el de “su mensaje se esta enviado por favor espere” aparecen esos dialogos… con una imagen de un tache “X” o una barra que esta cargando en la parte superior y un boton de ok u ocultar en la parte inferior.. todo esto dentro de un cuadro tranparente de fondo…. corecto??

    pues el texto y el boton si estan con el cuadro de fondo.. pero las imagenes, tanto de la “x” como la barra cargando quedan en la parte superior pero fuera de este cuadro y no tienen fondo ademas de algo movidas hacia la derecha…

    entonces que es lo que podria ser???? los unicos archivos que yo hice fueron los html y el css.. los otros no los edite ni nada….

    perdona que te moleste con esto ( que debe de ser algo muy tonto) pero la verdad ya estuve leyendo y repasando todo el codigo y no se que pueda ser… tal vez me falto una linea o algo pero cual podria ser???

    te agradeceria mucho y pudieras ayudarme.

    Responder
  8. Ariel
    Google Chrome 13.0.782.112 Windows 7

    bueno Alevsk… muchas gracias por tu tiempo y de nuevo perdon por las molestias… y si necesitaras para ayudarme ver mi codigo o algo asi.. pues hazmelo saber porfa y a donde te lo podria mandar o publicar….

    mil gracias de nuevo cuidate….

    Responder
  9. canade
    Firefox 18.0 Windows 7

    ola Alevsk, me parece muy interesante y necesario este form para hacer envio de mails..
    Bueno descargue el codigo que dejaste en tu blog y al momento de enviar el
    mensaje a un determinado correo , me muestra el mensajito de “error intente mas tarde”…
    Edite el archivo mail.php para cambiar la direccion de correo ..
    Pero no entiendo Ah que se debe eso…. es que necesito configurar un servidor de correos o algun otro detalle ..
    Bueno agradesco tu atencion anticipadamente , y espero tu respuesta ,gracias.

    Responder
  10. outletstore-uggboots
    Internet Explorer 6.0 Windows XP

    Howdy! This post couldn’t be written any better! Reading this post reminds me of my previous room mate! He always kept talking about this. I will forward this write-up to him. Pretty sure he will have a good read. Many thanks for sharing!

    Responder
  11. power innovator review program
    Internet Explorer 6.0 Windows XP

    Thanks for ones marvelous posting! I genuinely enjoyed reading it, you might be a great author.I will make sure to bookmark your blog and will often come back at some point. I want to encourage yourself to continue your great writing, have a nice evening!|

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *