Como agregar un formulario de contacto personalizado en Blogger

Anteriomente les habiamos comentado sobre como crear o agregar un formulario de contacto en Blogger usando un servicio externo, pero no hace mucho tiempo Blogger ha lanzado un gadget oficial que agrega un formulario con un solo clic en nuestra barra lateral o tambien dentro de una pagina en Blogger.

Lo que en esta ocasion haremos es usar el codigo generado por el gadget y lo usaremos dentro de una pagina en tu blog, pero la daremos un mejor estilo y personalización con CSS. El mensaje que tus usuarios envien llegará al email que tienes registrado en Blogger o con el que tienes la cuenta.



Lo primero a hacer es crear una pagina en Blogger y seleccion la pestaña o edición "HTML" y pegamos el siguiente código:

<div class='form'>
<!-- Custom Contact Form By MBT Starts -->

<form name='contact-form'>
<!-- Name Field -->
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Nombre" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
<p></p>

<!-- Email ID Field -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Tu correo"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
<p></p>

<!-- Message Field -->
<textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Deja tu mensaje..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
<p></p>

<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit MBT-button-color' type='reset' value='Borrar datos'/> 

<!-- Send Button --> 
<input class='contact-form-button contact-form-button-submit MBT-button-color' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/>
<p></p>

<!-- Validation -->
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

<!-- Custom Contact Form By MBT Ends -->
</div>
 Ahora guardamos la pagina y cambiamos el editor a modo "Redactar" y podremos ver el formulario en accion, pero hasta aqui esta via de contacto esta un poco sin estilo por lo que ahora agregamos un toque de CSS para cambiar el look.

Ahora buscamos el cierre de Head:
</head>
Y pegamos el siguiente codigo antes:
<style>
/*---- Compatible contact Form by MBT -----*/
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 220px;
width: 100%;
font-weight:bold;
}

     
.contact-form-name {
background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;

}
     

.contact-form-email {
background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 10px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;

}

.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);


padding: 5px 15px 5px 28px;

}
.contact-form-email-message:hover {
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 10px;
}

.contact-form-email-message {
background: #FFF;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: arial;
font-size: 12px;
margin: 0;
margin-top: 5px;
padding: 10px;
vertical-align: top;
max-width: 350px!important;
height: 150px;
border-radius:4px;
}


.contact-form-button {
cursor:pointer;
height: 32px;
line-height: 28px;
font-weight:bold;
border:none;
}


.contact-form-button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.contact-form-button:hover {
text-decoration: none;
}
.contact-form-button:active {
position: relative;
top: 1px;
}


.MBT-button-color {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.MBT-button-color:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
border-color: #F47C20!important;
}
.MBT-button-color:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

</style>

      <!--[if IE 9]>
    <style>
   
.contact-form-name {
background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 0px;
}

.contact-form-email {
background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 6px;
}

    </style>
    <![endif]-->
   
    <style>
@media screen and (-webkit-min-device-pixel-ratio:0) {


.contact-form-name {
background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 6px;
padding: 15px 15px 15px 28px;


}

.contact-form-email {
background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 8px;
padding: 15px 15px 15px 28px;

}

.contact-form-email:hover, .contact-form-name:hover{
padding: 15px 15px 15px 28px;
}


.contact-form-button {
height: 28px;

}
}
</style>
Guardas los cambios y podrás ver como el formulario queda mucho mejor. El formulario lo puedes usar tanto dentro de un gadget HTML en tu sidebar o dentro de una pagina como explicamos anteriormente.

Fuente

Si quieres recibir mas tutoriales y gadgets directamente en tu correo electronico, suscribete gratis a nuestro blog, visita nuestra pagina de facebook o añade nuestro feed Rss.

Compartelo!:

3 comentarios:

  1. Anónimo08:19

    Hola amigo!.. tu aporte si me sirvió de mucho.. para comenzar..
    Hice los primeros pasos que dijiste y si salió el formulario, es verdad, salió sin formato, como dices algo simple.. El tema está en cuando intentas ponerlo más vistoso.. ahí está mi problema, entro al HTML y no encuentro el "body" ni el cierre del mismo..
    ¿Eso porqué sucede?
    Y otra, intenté transcribirlo yo mismo, lo coloqué uno casi al comienzo y el cierre del "body" casi al final, el tema fue que aparentemente salió bien.. le dio un mejor formato..
    ¿Dime si está bien o donde tendría que colocar o salir automáticamente el "body"?
    Pero el otro detalle es que NO FUNCIONA el botón ENVIAR...
    ¿Cómo ACTIVO dicho botón?..
    Por favor, podrías ayudarme.. Agradeceré mucho tu respuesta.

    ResponderEliminar
  2. Hola, estuve probando el formulario para ver si el mensaje realmente llega a mi correo pero nunca llegó. lo que hice fue agregar todo el código en un gadget, el formulario queda bien pero no me llega mensaje a mi correo gmail.

    ResponderEliminar

- Antes de hacer una consulta (pregunta), por favor utiliza el Buscador.

- Por favor, cualquier otra pregunta que tengas, la puedes hacer en la entrada correspondiente.

- Haremos todo lo posible por responderte o acusarte recibo antes de 24 horas. A veces, podremos hacerlo, otras veces no será posible, y nos tomará un poco más… ten paciencia.

- Los comentarios que a mi criterio se escriban solo para dejar un enlace o un link seran eliminados.

- ¡Muchas gracias por comentar o por preguntar!