Como Instalar y personalizar el nuevo formulario de contacto de blogger

Desde hace un tiempo blogger nos sorprendió con un nuevo gadget, este se trata de un formulario de contacto,y porque es una sorpresa bueno ya que blogger no contaba con el mismo en comparacion con otros sitios y por lo tanto teníamos que recurrir a otras opciones para poder tener nuestro propio formulario,lo que pasa es que es un gadget por lo tanto aparecerá en nuestra sidebar,barra lateral.Lo que vamos a hacer es colocarlo en una página estática y no dejar que se muestre en un gadget.

Lo primero que vamos a hacer es ir a añadirlo para eso nos vamos a diseño y añadir un gadget y buscamos formulario de contacto.

Le damos a añadir,este lo pueden añadir en donde quieran ahora sin salirnos de diseño a la izquierda van a ver paginas.

Le damos click a paginas>>>> después a pagina nueva>>>> luego a pagina en blanco >>>> le van a dar el titulo que quieran darle >> formulario de contacto o contactame o como quieran luego selecionan HTML y pegan el siguiente código:

<style>
/*Formulário de contacto Blogger */
#formcontact{
 padding: 8px 10px;
 font-size:16px;/*-----tamaño del texto---*/
 color:#000000;/*-----color del texto---*/
 border:solid 1px #000000;/*-----color y ancho del borde del cuadro completo---*/
 border-radius: 18px 18px; /*-----el radio del cuadro  mas en numero mas redonda son las puntas ---*/
 -moz-border-radius: 18px 18px;
 -webkit-border-radius: 18px 18px; 
 box-shadow: inset 1px 1px 3px 0 #000;
 -moz-box-shadow: inset 1px 1px 3px 0 #000;
 -webkit-box-shadow: inset 1px 1px 3px 0 #000;
 text-shadow: 1px 1px 0 #9d9d9d;
 background:-moz-linear-gradient(0% 100% 90deg,#7e7e7e, #5e5e5e);/*-----color de fondo del cuadro ---*/
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5e5e5e), to(#7e7e7e));
 
}

#formcontact p{ 
}
.contact-form-name,
.contact-form-email,
.contact-form-email-message,
.contact-form-button-submit {
 width: 400px;
 max-width: 100%;
 margin-bottom: 20px;
 margin:5;
 padding: 7px 12px;
 font-size:16px;/*-----tamaño del texto que escribes---*/
 color:#fff; /*-----color del texto que escribes---*/
 border:solid 1px #000000;/*-----borde y color de los cuadros donde escribes---*/
 border-radius: 18px 18px;
 -moz-border-radius: 18px 18px;
 -webkit-border-radius: 18px 18px; 
 box-shadow: inset 1px 1px 3px 0 #000;
 -moz-box-shadow: inset 1px 1px 3px 0 #000;
 -webkit-box-shadow: inset 1px 1px 3px 0 #000;
  background:-moz-linear-gradient(0% 100% 90deg,#7e7e7e, #5e5e5e);/*-----color de fondo de los cuadros donde escribes---*/
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5e5e5e), to(#7e7e7e));
 
}

.contact-form-button-submit {  /*-----como se ve el botón enviar sin pasar el mouse por encima---*/
 width: 180px;  /*-----ancho del botón---*/
 height:40px;    /*-----altura del botón---*/
 border:solid 1px #000;
 color:#000;
  font-size:18px;
  background:-moz-linear-gradient(0% 100% 80deg,#5f5f5f, #000);/*-----color de fondo---*/
 background:-webkit-gradient(linear, 0% 0%, 0% 80%, from(#000), to(#5f5f5f));
 box-shadow: inset 1px 1px 3px 0 #000;
 -moz-box-shadow: inset 1px 1px 3px 0 #000;
 -webkit-box-shadow: inset 1px 1px 3px 0 #000;
  text-shadow: 1px 1px 0 #ccc;

}
.contact-form-button-submit:hover {  /*-----este código es para al pasar mouse por encima cambia boton enviar---*/
border-color: #ccc;  /*-----color del borde---*/
background: #FF8C00;   /*-----color de fondo---*/
color: #fff;   /*-----color del texto---*/
text-shadow: 1px 1px 0 #000;

}

.Button2 {  /*-----como se ve el botón borrar todo sin pasar el mouse por encima---*/
 width: 180px;  /*-----ancho del botón---*/
 height:40px;    /*-----altura del botón---*/
 border:solid 1px #000;
 color:#000;
  font-size:18px;
 border-radius: 18px 18px;
 -moz-border-radius: 18px 18px;
 -webkit-border-radius: 18px 18px;
 background:-moz-linear-gradient(0% 100% 80deg,#5f5f5f, #000);/*-----color de fondo---*/
 background:-webkit-gradient(linear, 0% 0%, 0% 80%, from(#000), to(#5f5f5f));
 box-shadow: inset 1px 1px 3px 0 #000;
 -moz-box-shadow: inset 1px 1px 3px 0 #000;
 -webkit-box-shadow: inset 1px 1px 3px 0 #000;
 text-shadow: 1px 1px 0 #ccc;

}
.Button2:hover {  /*-----este código es para al pasar mouse por encima cambia borrar todo---*/
border-color: #ccc;  /*-----color del borde---*/
background: #FF8C00;   /*-----color de fondo---*/
color: #fff;   /*-----color del texto---*/
text-shadow: 1px 1px 0 #000;
border-radius: 18px 18px;
 -moz-border-radius: 18px 18px;
 -webkit-border-radius: 18px 18px;
} </style>


<br />
<div id="formcontact">
<br />
<form name="contact-form">
<div>
<br />
<br />
<b>&nbsp;&nbsp;&nbsp;&nbsp;Su Nombre:</b> <span style="color: red;">*</span></div>
&nbsp;<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="50" type="text" value="" />

<br />
<div>
<b>&nbsp;&nbsp;&nbsp;&nbsp;Su E-mail:</b> <span style="color: red;">*</span></div>
&nbsp;<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="50" type="text" value="" />

<br />
<div>
<b>&nbsp;&nbsp;&nbsp;&nbsp;Mensage:</b> <span style="color: red;">*</span></div>
&nbsp;<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="6"></textarea><br />
&nbsp;&nbsp; <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" />
&nbsp;<input class="Button2" id="Button2" type="reset" value="Borrar Todo" /><br />
<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

Ahora le dan a publicar y si le dan a ver van a obtener la url de la página estática que crearon en este caso el formulario de contacto.

Por ultimo nos falta algo que es ocultar el gadget para que no se muestre doble en un gadget y en una página estática y nos vamos a ir a nuestra plantilla y con CTRL+F buscamos </head>
y una ves encontrado justo antes colocamos el siguiente :

<!--Evita que se muestre el gadget de formulario de contacto  -->

<b:if cond='data:blog.url != &quot;&quot;'>
<style type='text/css'>
#ContactForm1 {
display: none;
}
</style>
</b:if>

<!-- Fin para evitar que se muestre el gadget de formulario de contacto  -->

Una vez puesto el codigo le damos a guardar plantilla y es todo ya cuentan con un formulario de contacto .

NOTA: los mensajes los van a recibir en su cuenta de correo de gmail.

Tweet

Compartir esta entrada :

Quizás también le interese:

Sí disfrutas de estas entradas solo has click aquí, o suscribete para recibir mas entradas como estas.

Subscribirse por RSS Feed

Su informacion nunca sera compartida.