Blogger nos ha sorprendido con un nuevo widget, se trata de un formulario de contacto, el cual dígase de paso, me parece bastante simple, lo bueno, lo fácil de su instalación.
Este sencillo formulario de contacto lo podemos personalizar (
mira aquí) y agregar a cualquier parte de nuestro blog, hoy
os muestro la forma de llevarlo a una página estática. Está un poco modificado con un nuevo botón, para borrar el mensaje en caso de cualquier equivocación de nuestros lectores.
Para instalar el
formulario en una página estática vamos a seguir estos pasos:
Lo primero sería añadir el widget a la sidebar.
1.- Diseño > Añadir gadget ( Formulario de Contacto).- Guardar.
 |
| Ver Demo |
Bien, ya lo tenemos instalado en nuestra sidebar.
Lo siguiente sería ocultarlo en todas las partes del blog y para ello buscamos:
</head> y justamente antes colocamos:
<b:if cond='data:blog.url != ""'>
<style type='text/css'>
#ContactForm1 {
display: none;
}
</style>
</b:if>
2.- Ahora vamos a
instalarlo en la página estática y seguimos estos pasos:
Panel de control - Páginas - Página nueva - Página en blanco - le colocamos
el título (Formulario de Contacto) y
en su interior colocamos lo siguiente:
<style type="text/css">
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 430px; /* ANCHO DEL FORMULARIO */
width: 100%;
font-weight:bold;
}
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGtAgi5F5lQGwkEiuDtNOdKxGsmOTZq7sXJjgV9S5Ek6IEi9fXIvon7LGS2kWuT0RHWbgb00CKqk5F25ZA6rUAryDR3-65iJsIqT-Mge7i1O-IPhrwngFnLU0FEycHbRn3oaBgYa0W7Tk/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxMIlEAyr8hYBQxX6rIRgN7uI4MqgdbKN1_Iazas4kxJkwagxxfFx4hQmuUtCCo8CY3rsYxK-Xo9n0JeTjTNmmXkyXUn5xJbELFyYa-Nl03qe0j57ROd2qnccd8SJnvrQdrRzMTP0y8SI/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: 450px!important; /* ANCHO CAJA MENSAJE */
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;
*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;
}
.amor-button-color {
color: #fff; /* color letras botones */
border: solid 1px #7D7D7C;/* color borde botones */
background: #626160; /* color fondo botones */
}
.amor-button-color:hover {
background: #27231F; /* color fondo botones al pasar cursor */
border-color: #27231F!important;
}
</style>
<div class='form'>
<form name='contact-form'>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Nombre" size='30' type='text' onblur='if (this.value == "") {this.value = "Nombre";}' onfocus='if (this.value == "Nombre") {this.value = "";}' />
<p></p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='Correo Electrónico' value="Correo Electrónico" size='30' type='text'onblur='if (this.value == "") {this.value = "Correo Electrónico";}' onfocus='if (this.value == "Correo Electrónico") {this.value = "";}' />
<p></p>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Deja tu mensaje..' onblur='if (this.value == "") {this.value = "Deja tu mensaje..";}' onfocus='if (this.value == "Deja tu mensaje..") {this.value = "";}'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit amor-button-color' type='reset' value='Borrar'/>
<input class='contact-form-button contact-form-button-submit amor-button-color' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/>
<p></p>
<div style='text-align: center; max-width:450px; 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>
</div>
Personalización:
Lo que está en
ROJO es para aumentar/disminuir el ancho de la caja del nombre y email.
Lo que está en
AZUL es para cambiar el color de los botones.
Si te ha gustado este artículo
clic aquí para suscribirse gratis a través de nuestro correo electrónico, de esta forma recibirás un envío por cada nuevo artículo publicado o compártelo en las diferentes redes sociales.
Publicaciones Relacionadas
trucos blog
