Formulario de contacto para Blogger

Hoy Vamos a ver de Como insertar un bonito Formulario de Contacto En Una Página de blog de Blogger.

El Formulario de contacto que insertaremos tendrá Una apariencia como esta:

Lo pueden ver en FUNCIÓNamiento en mi Propia page de contacto .

Estós son los pasos a Seguir:

1. Vamos a nuestro de Panel de Administración de blogger.
2. Vamos a Diseño y LUEGO le damos a Añadir gadget de un.

3. En La Ventana Que se nos abrira, le Damos una Más Gadgets y Buscamos Formulario de Contacto, lociones seleccionamos Y guardamos.

Ya Tienes tu Formulario de Contacto. Ahora Vamos A Darle Formato y a ponerlo en Una Sola página en concreto.

4. Ahora Damos clic en Plantilla y LUEGO en editar HTML.

5. Con El cursor Dentro Del Codigo HTML le Damos a control (CTRL) + F, y buscamos El siguiente Código:

]]> </ B: skin>

Encontremos de Cuando lo, copiamos justo arriba el siguiente Código:

#ContactForm1{

display:none;

}

#contact_wrap {

margin: auto;

width: 321px;

height: 380px;

padding: 25px;

border-radius: 1em;

border-top:1px solid #dbdbdb;

border-right:1px solid #b2b2b2;

border-left:1px solid #dbdbdb;

border-bottom:1px solid #9d9d9d;

background-color:#cccccc;

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');

background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

box-shadow: 1px 1px 5px #ccc;

}

#contact_wrap h3{

color: #e8f3f9;

font-family:Georgia;

font-size: 20px;

font-style:italic;

font-weight:bold;

margin: 0 -36px 20px -36px;

padding: 12px;

text-align: center;

text-shadow: 2px 0 0 #1f4962;

-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;

-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;

box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;

background-color: #3689b9;

position: relative;

}

#contact_wrap h3:before {

content: ' ';

position: absolute;

bottom: -10px;

left: 0;

width: 0;

height: 0;

border-style: solid;

border-width: 10px 0 0 10px;

border-color: #333 transparent transparent transparent;

}

#contact_wrap h3:after {

content: ' ';

position: absolute;

bottom: -10px;

right: 0;

width: 0;

height: 0;

border-style: solid;

border-width: 0 0 10px 10px;

border-color: transparent transparent transparent #333;

}

#ContactForm1_contact-form-name{

width: 270px;

height:auto;

margin: 5px auto;

padding: 10px 10px 10px 40px;

background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDpsdgb1SSTiTm0sgpPBU20C_MQUfyFIdC0zzqNRCN1dd8uox-8s5dUwuUQqqsWZJWkC_FzLHu9_dGuoVTUATIfl_IZWxoufbZAMpZc83uPK7ikWY9idAQOqIXz_Qx63cijv-ro_sq5rE/s1600/user.png)no-repeat 10px center;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

}

#ContactForm1_contact-form-email{

width: 270px;

height:auto;

margin: 5px auto;

padding: 10px 10px 10px 40px;

background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimgHCg14LzALInpKcVuJo5CWm8c-ikbxjofWeQCJdrNvC9-mlu8HWuSUz5CZsFLsQeQBes796tITmoXypog6BnUavzE4LomT6kk8FEBiTRVV4_F5vP6KkqBq0U9qdXleVLlYhbOp2vRWA/s1600/pen.png)no-repeat 10px center;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

}

#ContactForm1_contact-form-email-message{

width: 270px;

height: 150px;

margin: 5px auto;

padding: 10px 10px 10px 40px;

font-family:Arial, sans-serif;

background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMpHdfGkCDhwGvlii06f9dSRugAuhdDO1_-U48zlqq3djfjcQ8Kdiq9EZu-7-pLh037RnJKAeM0ugTvOZL5UdaJJWFM-kg03WmrwnXvJ5TGvV4doY9B3YF_T8t45ADqsUVg1F1jwC-1eA/s1600/msg2.png)no-repeat 10px 10px;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

}

#ContactForm1_contact-form-submit {

width: 95px;

height: 30px;

float: right;

color: #FFF;

padding: 0;

cursor:pointer;

margin: 25px 0 3px 0 0;

background-color:#005a8a;

border-radius:4px;

text-shadow: 1px 0 0 #1f4962;

-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

background-color: #3689b9;

border:1px solid #194f6d;

}

#ContactForm1_contact-form-submit:hover {

background:#4c9bc9;

}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{

width: 320px;

margin-top:35px;

}

Guardamos Ahora y Plantilla.

6. Una Vez Guardado, le Damos un Páginas.

7. Ahora le damos clic a Página nueva y luego a Página en blanco.

Ahora debemos activar la opción editar html.

8. Pegamos el siguiente código:

<div id="contact_wrap"> <h3>Contactame</h3> <form name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Nombre" size="30" type="text" value="" /> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mensaje" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Enviar" /> <div style="max-width: 222px; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> </div> <style type="text/css"> #comments, #blog-pager, .breadcrumbs, .post-footer{display:none} </style>

9. Le ponemos un título antes de publicar y guardamos.

YA puedes comprobar y ver tu formulario de contacto.

¡Un saludo!

Si te gusto no Olvides ayudarme a Seguir Creciendo compartiendolo En Tus Redes Sociales Favoritas. ¡Gracias!

Más articulos

Tweet

Escrito por Unknown

Si tienes alguna otra duda, o quieres comentar algo sobre el tema, te animo a que dejes un comentario. También puedes visitar nuestro foro. ¡Un saludo!