Si queremos que nuestros lectores se pongan en contacto con nosotros, lo mejor es usar un formulario de contacto de los de toda la vida. Para ello simplemente hay que configurar un widget y nos sale en el lateral. Lo cual me parece molesto, gasta espacio y es poco estético. Vamos a configurar uno nosotros para que al pinchar en un enlace nos salga el formulario de contacto en una pagina en Blogger.
- Diseño > Añadir gadget > Más Gadgets > Formulario de Contacto. Guardar.
- Para esconderlo del lateral y darle estilo vamos a Plantilla > Editor HTML. Buscamos la etiqueta </head> y encima pegamos:
- Para insertarlo en una página estática vamos a: Panel de control - Páginas - Página nueva - Página en blanco - Le pones un título (Formulario de Contacto) y en HTML colocamos lo siguiente:
<b:if cond='data:blog.pageType == "static_page"'>
<style>
#ContactForm1{ display:none!important;}
</style>
</b:if>
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg182-CSgCKQtGSie_rOCpD8ObOmahxtP98J94w4hhAhyphenhyphenTAjpQkromGK1QCqbhviCKy12Ysibsi5R02L3I2zo4PtDQUZ7tEXIhPS5tdeX-6t4L7t4jqvZ0Q9iTCmax2xs9_kbU2my5TJ_Q/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/AVvXsEgVJknEpVRqaLmSa4QH5Zgwmn215-P6HBe0R1OBQZHDKBTTVjf8FeIp_eEja7ZziTgKQaIxNN8PAwfFBLIHwpbFk1jLSWK4P91NIYIWRVYj5o3JKcb31CxFOInlYwoQV2LvjsQTEzYGV0g/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg182-CSgCKQtGSie_rOCpD8ObOmahxtP98J94w4hhAhyphenhyphenTAjpQkromGK1QCqbhviCKy12Ysibsi5R02L3I2zo4PtDQUZ7tEXIhPS5tdeX-6t4L7t4jqvZ0Q9iTCmax2xs9_kbU2my5TJ_Q/s320/name.png) no-repeat 7px 0px;
}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVJknEpVRqaLmSa4QH5Zgwmn215-P6HBe0R1OBQZHDKBTTVjf8FeIp_eEja7ZziTgKQaIxNN8PAwfFBLIHwpbFk1jLSWK4P91NIYIWRVYj5o3JKcb31CxFOInlYwoQV2LvjsQTEzYGV0g/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg182-CSgCKQtGSie_rOCpD8ObOmahxtP98J94w4hhAhyphenhyphenTAjpQkromGK1QCqbhviCKy12Ysibsi5R02L3I2zo4PtDQUZ7tEXIhPS5tdeX-6t4L7t4jqvZ0Q9iTCmax2xs9_kbU2my5TJ_Q/s320/name.png) no-repeat 7px 6px;
padding: 15px 15px 15px 28px;
}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVJknEpVRqaLmSa4QH5Zgwmn215-P6HBe0R1OBQZHDKBTTVjf8FeIp_eEja7ZziTgKQaIxNN8PAwfFBLIHwpbFk1jLSWK4P91NIYIWRVYj5o3JKcb31CxFOInlYwoQV2LvjsQTEzYGV0g/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>
<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="Name" size='30' type='text' onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' />
<p></p>
<!-- Email ID Field -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == "") {this.value = "Email ID";}' onfocus='if (this.value == "Email ID") {this.value = "";}'/>
<p></p>
<!-- Message Field -->
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Leave Your Message..' onblur='if (this.value == "") {this.value = "Leave Your Message..";}' onfocus='if (this.value == "Leave Your Message..") {this.value = "";}'></textarea>
<p></p>
<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit MBT-button-color' type='reset' value='Clear'/>
<!-- Send Button -->
<input class='contact-form-button contact-form-button-submit MBT-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<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>
#ContactForm1
{
display: none ! important;
}
Fuente: Amorsevillista
0 comentarios:
Publicar un comentario